Tablas en HTML con thead tbody y tfoot

Contenido del curso

No sé dónde empezar

Fundamentos de HTML

Listas y Enlaces

Formularios y Tablas

Contenido Multimedia

Accesibilidad Web Y SEO

Proyecto final

17
Portafolio en HTML semántico accesible
08:01 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:24

Tablas en HTML con thead tbody y tfoot

Curso de HTML

Clase 12 de 17

Clase 12 / 17

Recursos

Las tablas en HTML siguen siendo una herramienta vigente para mostrar datos estructurados como productos, precios o inventarios. Aprende a construirlas con etiquetas semánticas como table, thead, tbody y tfoot, y entiende cómo organizar filas, columnas y encabezados de forma correcta.

¿Para qué sirven las tablas en HTML hoy?

Cuando HTML estaba iniciando, las tablas eran una de las primeras etiquetas disponibles y se usaban incluso para maquetar páginas completas. Hoy ese uso quedó atrás, pero las tablas siguen siendo la mejor opción cuando necesitas presentar información tabular real: catálogos, listas de precios, reportes o cualquier dato que se entienda mejor en filas y columnas.

¿Cuándo usar una tabla en HTML? Úsala cuando tengas datos que se relacionan entre sí en filas y columnas, como productos con precio y stock. No la uses para maquetar layouts; para eso existe CSS.

¿Cómo se estructura una tabla con table, thead y tbody?

La etiqueta table es el contenedor principal. Dentro de ella se organizan tres bloques semánticos que separan la cabecera, el cuerpo y el pie [01:50].

thead: agrupa la fila de encabezados de la tabla.
tbody: contiene las filas con la información principal.
tfoot: marca la zona final, ideal para totales o resúmenes.

Dentro de cada bloque, las filas se crean con tr (table row), los encabezados con th (table head) y las celdas de datos con td (table data) [02:10].

¿Cómo se ve un encabezado básico de tabla?

Un encabezado típico para un listado de productos se vería así:

html

<table> <thead> <tr> <th>Producto</th> <th>Precio</th> <th>Cantidad</th> </tr> </thead> </table>

Al abrirlo en el navegador, la primera fila aparece con los títulos en negritas, gracias al comportamiento por defecto de th.

¿Cómo agregar filas y datos al cuerpo de la tabla?

Dentro de tbody cada producto ocupa una fila nueva con tr, y cada dato vive dentro de un td. Así se mantiene la alineación con los encabezados definidos arriba.

Un ejemplo con tres productos quedaría así:

html

<tbody> <tr> <td>Laptop</td> <td>45 USD</td> <td>2</td> </tr> <tr> <td>Mouse</td> <td>12 USD</td> <td>5</td> </tr> <tr> <td>Teclado</td> <td>10 USD</td> <td>3</td> </tr> </tbody>

Nota cómo cada td se alinea automáticamente con su encabezado correspondiente. El navegador se encarga de la separación visual entre celdas, aunque todavía no apliques estilos con CSS [04:20].

¿Cuál es la diferencia entre th y td? th se usa para celdas de encabezado y aparece en negritas por defecto. td se usa para celdas de datos normales dentro del cuerpo de la tabla.

¿Cómo crear el pie de tabla con tfoot y colspan?

La etiqueta tfoot cierra la estructura y normalmente se usa para mostrar un total o resumen. Cuando un dato necesita ocupar varias columnas, entra en juego el atributo colspan.

En el ejemplo, el total de la compra suma 67 USD y se muestra en dos celdas: una con la palabra Total y otra con el monto. Como solo hay dos elementos pero la tabla tiene tres columnas, el segundo th se extiende usando colspan="2" para hacer match con el ancho de las columnas de precio y cantidad [06:15].

html

<tfoot> <tr> <th>Total</th> <th colspan="2">67 USD</th> </tr> </tfoot>

¿Qué hace exactamente el atributo colspan?

colspan le dice al navegador cuántas columnas debe ocupar una celda. Si pones colspan="2", esa celda se fusiona con la siguiente y abarca el ancho de dos columnas. Existe también rowspan, que cumple la misma función pero en filas.

Con esto ya tienes una tabla completa: encabezado claro con thead, contenido organizado en tbody y un cierre con tfoot que resume la información. La estructura es semántica, accesible y fácil de estilizar más adelante con CSS.

¿En qué proyecto te imaginas usando esta estructura primero, un catálogo de productos o un reporte de datos? Cuéntame en los comentarios.

Nailimer Molina Wasveiler

Hace 5 meses

¿Cómo se trabaja con las tablas?

La tabla se divide por encabezado, body y foot. Se suele crear por filas y cada celda es "data".

Semántica: para crear la tabla la etiqueta table. Es el contenedor principal.

Encabezado: El contenedor del encabezado usa la etiqueta thead. Cada encabezado por individual tiene etiqueta th que va dentro de la etiqueta contenedora tr.
Fila: etiqueta tr
Body de la tabla: etiqueta tbody.
Data de la tabla: etiqueta td.
Footer de la tabla: etiqueta tfoot. Puede ser el final de total dependiendo de la tabla.
Para ocupar dos columnas: atributo colspan dentro de la etiqueta th.

💡

El flujo de trabajo ideal y ordenado es: abres una etiqueta <tr>, insertas todos los elementos <td> necesarios de izquierda a derecha para esa fila específica, y luego cierras el <tr> antes de comenzar a estructurar la siguiente línea de información.