Curso de HTML / Crear tablas de datos con table, tr, th y td
Una tabla HTML representa datos relacionados por filas y columnas. table contiene las filas tr, y cada fila utiliza celdas de encabezado th o de datos td. Empléala cuando las relaciones tabulares aporten información, no para colocar el menú y el contenido de una página.
Planificar columnas y escribir las primeras filas
Antes de escribir etiquetas, decide qué representa una fila y qué representa cada columna. El siguiente ejemplo registra frutas y existencias. La primera fila nombra las dos columnas; las siguientes relacionan cada fruta con su cantidad.
<table>
<tr>
<th>Fruit</th>
<th>Stock</th>
</tr>
<tr>
<td>Apples</td>
<td>12 pieces</td>
</tr>
<tr>
<td>Pears</td>
<td>8 pieces</td>
</tr>
</table>Crea un documento HTML con la estructura básica y pega la tabla dentro de body. Al abrirlo, busca dos columnas y tres filas. Un navegador puede mostrar pocos bordes o ninguno con sus estilos iniciales: la ausencia de líneas no significa que hayan desaparecido las celdas.
Para añadir otro producto, crea un nuevo tr con las dos celdas correspondientes. No añadas solo una cantidad al final de una fila existente, porque quedaría bajo una columna diferente. Mantén las unidades visibles, como piezas, para que los números se puedan interpretar.
Distinguir encabezados de valores
Utiliza th cuando la celda identifica una fila o una columna y td cuando contiene el dato asociado. No elijas th únicamente para conseguir negrita. Una tabla puede tener encabezados de fila además de encabezados de columna.
En la práctica, “Fruit” y “Stock” son encabezados; “Apples” y “12 pieces” forman una fila de datos. Un valor aislado como 12 no permite saber si significa piezas, precio o porcentaje. La unidad puede figurar en las celdas o en un encabezado inequívoco, según los datos.
Agrupar filas con thead, tbody y tfoot
Puedes hacer explícitos los grupos de encabezados y datos:
<table>
<thead>
<tr><th>Fruit</th><th>Stock</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>12 pieces</td></tr>
<tr><td>Pears</td><td>8 pieces</td></tr>
</tbody>
</table>thead agrupa las filas de encabezado y tbody las del cuerpo. Cuando exista un resumen tabular real, puede ir en tfoot. Estos grupos no añaden colores o bordes por sí mismos.
El analizador HTML del navegador puede insertar un tbody en el árbol del documento aunque no lo hayas escrito. Por eso el DOM mostrado por las herramientas de desarrollo no siempre reproduce literalmente el archivo. Escribir los grupos explícitos facilita revisar la estructura, sin atribuirles una función de diseño visual.
Mantener la tabla utilizable en un ancho estrecho
Una tabla grande no debería perder columnas por quedar recortada. Puedes colocarla en un contenedor con desplazamiento horizontal. En este fragmento, el comentario indica dónde deben ir las filas anteriores; no es una tabla con datos completos por sí sola.
<div class="table-scroll">
<table>
<!-- Place the preceding table rows here. -->
</table>
</div>Añade esta regla al CSS de head o a la hoja enlazada:
.table-scroll { max-width: 100%; overflow-x: auto; }Reduce el ancho de la ventana y comprueba si se pueden consultar todas las columnas. Evita comprimir el texto hasta hacerlo ilegible. El desplazamiento conserva la estructura tabular, pero su uso con teclado y tecnologías de apoyo también debe comprobarse en el diseño final.
Revisar alineación y relaciones
Comprueba que cada fila ordinaria tenga el número de celdas previsto. Si utilizas combinaciones de filas o columnas, cuenta las posiciones que cubren, no solo el número de etiquetas. No simules columnas añadiendo muchos espacios dentro de una celda: esa distribución pertenece a CSS.
Para interpretar datos más complejos, caption, scope y las celdas combinadas permiten explicar encabezados y grupos. La referencia de table de MDN recoge sus atributos y elementos asociados. Una tabla correcta conserva relaciones comprensibles incluso cuando no se ven los colores de los encabezados.
