HTML <th> ετικέτα

  • Προηγούμενη Σελίδα <tfoot>
  • Επόμενη Σελίδα <thead>

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

<th> Η ετικέτα ορίζει την κελίδα τίτλου του HTML πίνακα.

Το HTML πίνακα έχει δύο τύπους κελιών:

  • Κελί τίτλου - περιέχει πληροφορίες τίτλου (χρησιμοποιώντας <th> creation of the element)
  • Κελί δεδομένων - περιέχει δεδομένα (χρησιμοποιώντας <td> creation of the element)

By default,<th> The text in the element is bold and centered.

By default, the text in the <td> element is plain and left-aligned.

Δείτε επίσης:

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

Εγχειρίδιο HTML DOM;Όντιο TableHeader

Εκμάθηση CSS;Ρύθμιση στυλ φόρμας

Παράδειγμα

Παράδειγμα 1

Μια απλή πίνακας HTML με τρία ρόوط, δύο κελίδες τίτλου και τέσσερις κελίδες δεδομένων;

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 2

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

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 3

Πώς να προσθέσετε χρώμα φόντου στην κελίδα τίτλου του πίνακα (χρησιμοποιώντας CSS);

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 4

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

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 5

Πώς ορίζεται η μη αλλαγή γραμμής στην κεφαλίδα κελιού του πίνακα (χρησιμοποιώντας CSS);

<table>
  <tr>
    <th>Μήνας</th>
    <th style="white-space:nowrap">Περίληψη για νέα αυτοκίνητα</th>
  </tr>
  <tr>
    <td>Ιανουάριος</td>
    <td>￥3400</td>
  </tr>
</table>

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 6

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

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 7

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

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

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 8

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

<table>
  <tr>
    <th>Όνομα</th>
    <th>Ε-mail</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>Ε-mail</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>

Προσπάθησε να το δοκιμάσεις!

Αντικείμενο

Αντικείμενο Αξία Περιγραφή
abbr Κείμενο Ορίζει την εύκταση της περιγραφής του περιεχομένου της κεφαλίδας κελιού.
colspan Αριθμός Ορίζει τον αριθμό των στήλων που πρέπει να καλύπτει η κεφαλίδα κελί.
headers header_id Ορίζει μια ή περισσότερες κεφαλίδες κελιών που σχετίζονται με το κελί.
rowspan Αριθμός Ορίζει τον αριθμό των γραμμών που πρέπει να καλύπτει η κεφαλίδα κελί.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Η κεφαλίδα κελί είναι κεφαλίδα στήλης, κεφαλίδα γραμμής ή κεφαλίδα ενός συνόλου στήλων ή γραμμών.

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

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

Ιδιότητες Ενεργειών

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

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

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <th> Στοιχείο:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη Σελίδα <tfoot>
  • Επόμενη Σελίδα <thead>