<th>
Tablas
Celda de encabezado de tabla. Describe a otras celdas — nombra una columna o una fila. El atributo scope (col/row/colgroup/rowgroup) declara la dirección del encabezado y es la pieza central de la accesibilidad en tablas de datos.
<th> (table header, celda de encabezado) es semánticamente distinto de <td>. No es “una celda en negrita y centrada” — eso es el estilo por defecto que los navegadores aplican visualmente, pero se puede cambiar completamente con CSS. Lo que define a <th> es su rol semántico: comunica que esta celda describe o nombra a otras celdas de la tabla. Una celda de encabezado no contiene un dato tabulado, sino el nombre de la columna o de la fila que contiene esos datos.
El atributo scope es la herramienta que hace explícita esa relación. Sin scope, el navegador puede inferir la asociación entre encabezados y celdas en tablas simples, pero en tablas con estructura más compleja (encabezados en ambos ejes, grupos de columnas, spans) la inferencia falla y los lectores de pantalla no pueden presentar el contexto correcto. Con scope, la relación es explícita e inequívoca: cuando un lector de pantalla navega a la celda $800 de una tabla de precios, puede anunciar “Precio, Notebook: $800” porque el <th scope="col">Precio</th> y el <th scope="row">Notebook</th> le dicen exactamente qué encabeza qué.
Esta es la pieza de accesibilidad central de las tablas de datos — el equivalente de <label for> en formularios. Así como todo <input> visible necesita su <label>, toda tabla con relaciones fila↔columna debe declarar sus encabezados con <th scope>. Sin este patrón, la tabla puede ser legible visualmente pero es opaca para tecnologías asistivas.
<th> acepta colspan y rowspan con el mismo comportamiento que <td>: un <th> con colspan="2" puede encabezar dos columnas a la vez (se usa en tablas con encabezados agrupados).
Cómo funciona
<th> funciona exactamente igual que <td> en cuanto a posición en la grilla — ocupa una celda en la intersección de fila y columna. La diferencia es semántica: el navegador lo registra como encabezado en el modelo de accesibilidad, y los lectores de pantalla lo usan para dar contexto a las celdas que encabeza.
<table>
<thead>
<tr>
<th scope="col">Mes</th>
<th scope="col">Ventas</th>
<th scope="col">Meta</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Enero</th>
<td>1.200</td>
<td>1.000</td>
</tr>
<tr>
<th scope="row">Febrero</th>
<td>980</td>
<td>1.000</td>
</tr>
</tbody>
</table>| Mes | Ventas | Meta |
|---|---|---|
| Enero | 1.200 | 1.000 |
| Febrero | 980 | 1.000 |
Modelo de contenido
<th> puede contener contenido de flujo (flow content), igual que <td>. En la práctica, casi siempre contiene texto simple. Va dentro de <tr>.
Display por defecto: table-cell, con font-weight: bold y text-align: center aplicados por el agente de usuario (modificables con CSS).
Atributos
scope — dirección del encabezado (el más importante)
scope declara qué celdas encabeza este <th>. Es el atributo más importante para accesibilidad en tablas de datos.
scope="col" — este <th> encabeza la columna que está debajo de él. Usado en la fila de encabezados del <thead>.
<tr>
<th scope="col">Producto</th>
<th scope="col">Precio</th>
</tr>scope="row" — este <th> encabeza la fila que está a su derecha. Usado como primera celda de cada fila de datos en <tbody>.
<tr>
<th scope="row">Notebook</th>
<td>$800</td>
</tr>scope="colgroup" — encabeza un grupo de columnas definido por <colgroup>. Menos común; útil en tablas con encabezados agrupados.
scope="rowgroup" — encabeza todas las filas del grupo de filas actual (<thead>, <tbody> o <tfoot>). También poco frecuente.
Sin scope: el navegador puede inferir la asociación en tablas simples, pero en tablas con colspan/rowspan o encabezados en ambos ejes, la inferencia puede fallar. La regla de oro: siempre poné scope en cada <th>.
colspan y rowspan
<th> acepta colspan y rowspan con el mismo comportamiento que <td>. Un uso clásico es un <th colspan="2"> en el <thead> para crear encabezados grupados:
<thead>
<tr>
<th scope="col">Equipo</th>
<th scope="col" colspan="2">Marcador</th>
</tr>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Local</th>
<th scope="col">Visitante</th>
</tr>
</thead>En este caso, el <th colspan="2">Marcador</th> tiene scope="colgroup" implícitamente, pero es mejor declararlo explícitamente para la accesibilidad.
Accesibilidad
El rol implícito de <th> es columnheader (cuando scope="col") o rowheader (cuando scope="row"). Sin scope, el rol puede quedar como cell genérico, perdiendo la asociación semántica. Para tablas de datos con información real:
- Todos los encabezados de columna llevan
scope="col". - Todos los encabezados de fila llevan
scope="row". - La tabla entera tiene un
<caption>que la nombra.
Este patrón (th scope + caption) es la receta mínima para que una tabla sea completamente accesible a lectores de pantalla.
Notas, gotchas e interacción
<th>sinscopeno es accesible en tablas complejas. En tablas de 2×2 muy simples el navegador puede inferir la relación, pero en cuanto hayrowspan/colspano encabezados en ambos ejes, la inferencia falla. Siempre declararscope.- El estilo visual de
<th>(negrita + centrado) es del agente de usuario, no semántico. Se puede resetear con CSS:th { font-weight: normal; text-align: left; }. Cambiar el estilo no rompe la semántica. <th>puede ir en el<tbody>como encabezado de fila. No es solo para el<thead>. La primera celda de cada fila de datos suele ser<th scope="row">con el nombre de la fila.headerscomo alternativa ascope: existe el atributoheaders="id-del-th"que enlaza celdas con encabezados mediante ID. Es más explícito pero también más verboso.scopecubre el 95% de los casos;headerssirve para tablas muy irregulares.
Vigente / legacy
<th> es completamente vigente. Sus atributos de presentación (align, valign, width, bgcolor, nowrap) son legacy — reemplazados por CSS. scope, colspan y rowspan son atributos actuales.
Aprendelo en el recorrido
Esta entrada complementa las lecciones La tabla semántica y Fusión de celdas del módulo Tablas, donde <th scope="col"> y <th scope="row"> se practican como base de la tabla semántica.