Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
No todas las celdas son iguales: algunas encabezan una columna o una fila. Usar la etiqueta correcta para ellas ayuda tanto a la vista como a la accesibilidad.
Explicación
Para las celdas de encabezado y para agrupar la tabla, existen etiquetas específicas:
<th>Celda de encabezado ("table header"), en vez de <td>. El navegador la muestra en negrita y centrada.
scope="col"Indica que ese <th> encabeza una columna completa.
scope="row"Indica que ese <th> encabeza una fila completa.
<thead> / <tbody>Agrupan la fila de encabezado y el cuerpo de datos por separado.
Reto rápido
Esta primera fila usa <td>, pero debería ser una fila de encabezados. Cambia sus dos celdas a <th> con scope="col".
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Usa scope="col" o scope="row" en cada <th> para que un lector de pantalla anuncie correctamente a qué fila o columna pertenece una celda.
Dato extra
<thead> y <tbody> son opcionales, pero se recomiendan en tablas más grandes: ayudan a leer el código y a aplicar estilos por separado.
Error común
Usar <td> con negrita por CSS para simular un encabezado, en vez de un <th> real: se ve igual, pero pierde el significado semántico para accesibilidad.
Siguiente paso
Ya distingues celdas de datos y de encabezado. Ahora veamos cómo combinar varias celdas en una.
Ir a la siguiente lección