HTML <td> ετικέτα

Ορισμός και χρήση

<td> Η ετικέτα <td> ορίζει το πρότυπο δεδομένου κύτταρο της HTML τάβλας.

Η HTML τάβλα έχει δύο τύπου κύτταρα:

  • Στοιχείο τίτλου - περιέχει πληροφορίες τίτλου (χρησιμοποιώντας <th> Δημιουργία στοιχείου
  • Δεδομένα κύτταρα - περιέχουν δεδομένα (χρησιμοποιώντας <td> Δημιουργία στοιχείου

Προεπιλεγμένο:<td> Ο κείμενος στο στοιχείο είναι συνηθισμένος και αριστεράς.

Ο κείμενος στο στοιχείο <th> είναι συνήθως粗体 και κεντρικά.

Για περισσότερες πληροφορίες:

Εκμάθηση HTML:HTML Πίνακας

Εγχειρίδιο HTML DOM:Όντιος TableData

Εκμάθηση CSS:Ρύθμιση του στυλ της τάβλας

Παράδειγμα

Παράδειγμα 1

Μια απλή τάβλα HTML με δύο γραμμές και τέσσερα κύτταρα:

<table>
  <tr>
    <td>Κύτταρο A</td>
    <td>Κύτταρο B</td>
  </tr>
  <tr>
    <td>Κύτταρο C</td>
    <td>Κύτταρο D</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Πώς να ρυθμίσετε την αριστερά <td> Το περιεχόμενο (χρησιμοποιώντας CSS);

<table style="width:100%">
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td>Ιανουάριος</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Φεβρουάριος</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Πώς να προσθέσετε χρώμα υποβάθρου σε κύτταρα πίνακα (χρησιμοποιώντας CSS):

<table>
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Ιανουάριος</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Δοκιμάστε το προσωπικά

Παράδειγμα 4

Πώς ορίζεται το ύψος της κελίτας της τραπέζης (χρησιμοποιώντας CSS);

<table>
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td style="height:100px">Ιανουάριος</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Πώς καθορίζεται η μη αντικατάσταση γραμμάτων στη κελίτα της τραπέζης (χρησιμοποιώντας CSS);

<table>
  <tr>
    <th>Ποιήματα</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Αποχαιρετώ τον Πανθέον από το λευκό βασίλειο μεταξύ των ουρανών, επιστρέφω στην πόλη Τζιάνγκλιν μέσα σε μια μέρα. Οι φωνές των σαύρων στα δύο όρια δεν σταματούν, η μικρή πλοιάριο έχει περάσει τις χιλιάδες βουνά.</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 6

Πώς κατευθύνεται οριζόντια; <td> Το περιεχόμενο (χρησιμοποιώντας CSS);

<table style="width:50%;">
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">Ιανουάριος</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 7

Πώς ορίζεται το πλάτος της κελίτας της τραπέζης (χρησιμοποιώντας CSS);

<table style="width:100%">
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td style="width:70%">Ιανουάριος</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 8

Πώς δημιουργείται ένας τίτλος πίνακα;

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλεκτρονική διεύθυνση</th>
    <th>Τηλέφωνο</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 9

Πώς δημιουργείται ένας πίνακας με τίτλο;

<table>
  <caption>Μήνας αποταμίευσης</caption>
  <tr>
    <th>Μήνας</th>
    <th>Αποταμίευση</th>
  </tr>
  <tr>
    <td>Ιανουάριος</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Φεβρουάριος</td>
    <td>￥4500</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Παράδειγμα 10

Πώς ορίζεται η κύρια κελίτα της τραπέζης που διακρίνεται σε πολλαπλά ριγά ή στήλες;

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ηλεκτρονική διεύθυνση</th>
    <th colspan="2">Τηλέφωνο</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Δοκιμάστε το προσωπικά

Ιδιότητα

Ιδιότητα Τιμή Περιγραφή
colspan Αριθμός Ορίζει τον αριθμό των στηλών που πρέπει να διαρρεύσει η κελίωση της κελίδας.
headers header_id Ορίζει μια ή περισσότερες κελίδες τίτλου που σχετίζονται με την κελίδα.
rowspan Αριθμός Ρυθμίζει τον αριθμό των γραμμών που πρέπει να διαρρεύσει η κελίωση της κελίδας.

Γενικές ιδιότητες

<td> Η ετικέτα υποστηρίζει επίσης Γενικές ιδιότητες στο HTML.

ιδιότητες ενέργειας

<td> Η ετικέτα υποστηρίζει επίσης Ενέργεια ιδιότητα στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <td> Εлемент:

td {
  display: table-cell;
  vertical-align: inherit;
}

Υποστήριξη περιηγητή

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη