Etiqueta thead
La etiqueta thead define la parte superior de una tabla.
Se utiliza para agrupar filas de tal
manera que se puedan aplicar estilos CSS
inmediatamente a un grupo específico. En una tabla
solo puede haber una etiqueta thead.
La etiqueta thead se utiliza a menudo junto
con tbody
y tfoot
para definir la parte superior, la parte principal
y la parte inferior de una tabla HTML.
Ejemplo
Añadamos color rojo al texto del grupo de filas
agrupadas por la etiqueta thead
usando la propiedad color:
<table>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Ejemplo
Aquí thead no está en la parte superior, y tfoot
no está en la parte inferior, sin embargo, el navegador los colocará
en sus lugares correspondientes:
<table>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
</table>
table, td, th {
border: 1px solid black;
}
:
