Etiqueta HTML <thead>
La etiqueta HTML <thead> agrupa las filas de encabezado de una tabla. Aprende su sintaxis, accesibilidad con th scope y CSS, con ejemplos.
La etiqueta <thead> define el encabezado de una tabla HTML. La etiqueta se utiliza junto con las etiquetas <tbody> y <tfoot>, que especifican el cuerpo y el pie de la tabla, respectivamente.
La etiqueta <thead> debe usarse como elemento hijo de <table>, después de los elementos <caption> y <colgroup>, y antes de los elementos <tbody>, <tfoot> y <tr>. Solo se puede usar una etiqueta <thead> dentro de un <table>.
En HTML5, la etiqueta <tfoot> puede colocarse antes o después de <tbody> — el navegador renderiza el pie al final de la tabla en ambos casos. (En la especificación anterior HTML 4.01, <tfoot> debía ir antes de <tbody>; ese requisito fue eliminado en HTML5.)
Por qué importa la etiqueta <thead>
Agrupar las filas de encabezado en <thead> no es solo cuestión de tener un marcado ordenado. Proporciona a la tabla una estructura semántica real que los navegadores y las tecnologías de asistencia pueden utilizar:
- Los lectores de pantalla pueden identificar y anunciar las celdas de encabezado, ayudando a los usuarios a comprender qué significa cada celda de datos mientras navegan por la tabla.
- Impresión y tablas largas: cuando una tabla abarca varias páginas impresas (o se desplaza dentro de un contenedor de altura fija), los navegadores pueden repetir las filas
<thead>al inicio de cada página o sección, para que las columnas permanezcan etiquetadas. - Los estilos y los scripts se vuelven más sencillos: puedes aplicar CSS a
theado ordenar solo las filas del cuerpo en JavaScript sin tocar el encabezado.
Para que la estructura sea significativa, coloca celdas <th scope="col"> dentro de <thead> — consulta la sección de Accesibilidad a continuación.
El <thead> debe contener al menos un elemento <tr>.
Los elementos <thead>, <tbody> y <tfoot> no afectan el diseño de la tabla de forma predeterminada. Usa propiedades CSS para personalizar el aspecto de la tabla.
Sintaxis
La etiqueta <thead> va en pares. El contenido se escribe entre las etiquetas de apertura (<thead>) y de cierre (</thead>).
<table>
<thead>
<tr>
<th scope="col"> ... </th>
</tr>
</thead>
<tbody> ... </tbody>
<tfoot> ... </tfoot>
</table>Ejemplo de la etiqueta HTML <thead>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>Accesibilidad
La etiqueta <thead> obtiene principalmente su valor a través de la accesibilidad. Para aprovechar al máximo sus beneficios, usa <th> (no <td>) dentro de ella y agrega el atributo scope:
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>scope="col" indica a los lectores de pantalla que la celda es el encabezado de toda la columna. A medida que el usuario se desplaza por la columna, la tecnología de asistencia puede anunciar el encabezado antes de cada celda de datos, de modo que la relación entre un valor (por ejemplo, 500) y su etiqueta (Savings) nunca se pierde. Para un encabezado que etiqueta una fila en lugar de una columna, usa scope="row". Consulta la etiqueta <th> para obtener más información sobre las celdas de encabezado y los alcances.
Mantén los títulos reales de las columnas en <thead> y las filas de resumen o totales acumulados en <tfoot>; esta estructura coherente es lo que permite que los lectores de pantalla, las hojas de estilo de impresión y los scripts traten el encabezado correctamente.
Atributos
Todos los atributos que se muestran a continuación están obsoletos y no son compatibles con HTML5. Se enumeran aquí únicamente para que puedas reconocerlos en el marcado heredado. Usa CSS en su lugar — consulta Reemplazar los atributos obsoletos con CSS.
| Atributo | Valores | Descripción |
|---|---|---|
| align | left, right, center, justify, char | Alineación horizontal del contenido dentro de un <thead>. No compatible con HTML5. |
| bgcolor | color (nombre o hexadecimal) | Color de fondo de las filas dentro de un <thead>. No compatible con HTML5. |
| char | character | Alinea el contenido con un carácter; se usa solo con align="char". No compatible con HTML5. |
| charoff | number | Desplazamiento (en caracteres) desde el carácter definido por char; se usa solo con align="char". No compatible con HTML5. |
| valign | top, bottom, middle, baseline | Alineación vertical del contenido dentro de un <thead>. No compatible con HTML5. |
La etiqueta <thead> también admite los Atributos Globales y los Atributos de Evento.
Reemplazar los atributos obsoletos con CSS
Cada atributo de presentación anterior tiene un equivalente directo en CSS que debes usar en su lugar:
| Atributo antiguo | Reemplazo CSS |
|---|---|
align="center" | text-align: center; |
valign="middle" | vertical-align: middle; |
bgcolor="#f2f2f2" | background-color: #f2f2f2; |
char / charoff | Sin equivalente en CSS; alinea los números con text-align o padding. |
Un encabezado con estilo típico tiene este aspecto:
thead {
background-color: #f2f2f2;
font-weight: bold;
}
thead th {
text-align: center;
vertical-align: middle;
padding: 10px;
}Para más opciones de estilo de tablas, consulta CSS Tables.