Cargando...

Encabezados de tabla HTML

Tras los tamaños, esta lección marca el significado de las etiquetas: th, scope y caption. La presentación sigue en CSS.

Por qué no basta un `td` en negrita

Las herramientas necesitan th real. Un td negrita puede parecer igual y no anunciar columnas o filas.

Respuesta directa

Etiqueta con th. Usa scope="col"/scope="row" si ayuda, y <caption> para el título. Los datos van en td.

Encabezados de columna con caption

Fila superior con th scope="col" más caption.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

Lectura del ejemplo de columnas

caption dentro de table
th superiores con scope=col
cantidades en td

Encabezados de fila para registros con nombre

El nombre de la fila es th scope="row", combinable con encabezados de columna.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

Lectura del ejemplo de filas

arriba scope=col
Ada/Lin scope=row
puntos en td

Mapa de scope

Consulta rápida de valores.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

Domina col y row primero en este curso.

Práctica

Tabla de club con 3 columnas
caption
th scope=col arriba
th scope=row en nombres
prueba volver a td y compara

Errores fáciles

td negrita sin th
caption fuera de table
olvidar scope en rejillas mixtas
marcar todo como th

Resumen

th marca encabezados reales
scope une columna o fila
caption titula la tabla
datos en td

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma