Η ετικέτα thead
Η ετικέτα thead ορίζει το επάνω μέρος ενός πίνακα.
Χρησιμοποιείται για την ομαδοποίηση σειρών με τέτοιο
τρόπο, ώστε να μπορεί να εφαρμοστεί αμέσως CSS στυλ
σε μια ομάδα. Σε έναν πίνακα μπορεί να υπάρχει μόνο
μία ετικέτα thead.
Η ετικέτα thead χρησιμοποιείται συχνά μαζί
με την tbody
και την tfoot
για τον ορισμό του επάνω μέρους, του κύριου μέρους
και του κάτω μέρους ενός πίνακα HTML.
Παράδειγμα
Ας προσθέσουμε κόκκινο χρώμα κειμένου στην ομάδα
σειρών που ομαδοποιούνται από την ετικέτα
thead, χρησιμοποιώντας την ιδιότητα
color:
<table>
<thead>
<tr>
<th>Όνομα</th>
<th>Επώνυμο</th>
<th>Μισθός</th>
</tr>
</thead>
<tbody>
<tr>
<td>όνομα1</td>
<td>επώνυμο1</td>
<td>200$</td>
</tr>
<tr>
<td>όνομα2</td>
<td>επώνυμο2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>πλήθος: 2</td>
<td>-</td>
<td>σύνολο: 1200$</td>
</tr>
</tfoot>
</table>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Παράδειγμα
Και εδώ η thead δεν βρίσκεται επάνω, και η tfoot
δεν βρίσκεται κάτω, ωστόσο το πρόγραμμα περιήγησης θα τις
τοποθετήσει στις σωστές θέσεις τους:
<table>
<tfoot>
<tr>
<td>πλήθος: 2</td>
<td>-</td>
<td>σύνολο: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>όνομα1</td>
<td>επώνυμο1</td>
<td>200$</td>
</tr>
<tr>
<td>όνομα2</td>
<td>επώνυμο2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Όνομα</th>
<th>Επώνυμο</th>
<th>Μισθός</th>
</tr>
</thead>
</table>
table, td, th {
border: 1px solid black;
}
:
