Estructura de tablas HTML con thead, tbody y tfoot

Aprende a construir tablas HTML semánticas paso a paso: usa el contenedor table, organiza encabezados con thead, datos con tbody y totales con tfoot. Define filas con tr, títulos con th y celdas con td. Aprovecha colspan para combinar columnas y mostrar un total claro.

¿Cómo crear una tabla HTML semántica?

Las tablas fueron clave en los inicios de HTML para dar formato, pero hoy se reservan para mostrar datos estructurados. Aun así, siguen siendo útiles cuando necesitas columnas, filas y encabezados bien definidos. La semántica correcta mejora la claridad del código y el mantenimiento.

• Usa la etiqueta table como contenedor principal.
• Crea una fila tr con th para los encabezados.
• Envuelve los encabezados en thead.
• Coloca el contenido en tbody con td.
• Cierra con tfoot para el total o resumen.

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
    </tr>
  </thead>
  <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>
  <tfoot>
    <tr>
      <th>Total</th>
      <th colspan="2">67 USD</th>
    </tr>
  </tfoot>
</table>

¿Qué etiquetas y atributos usar en tablas?

La estructura semántica divide el contenido en thead, tbody y tfoot. Las filas se crean con tr y, dentro de ellas, usas th para encabezados y td para datos. La tabla alinea columnas de forma automática y suele mostrar separadores por defecto, lo que facilita la lectura incluso sin estilos.

¿Cómo definir encabezados y filas?

• Crea una fila tr inicial para los encabezados.
• Usa th para marcar títulos como Producto, Precio y Cantidad.
• Añade más filas con tr para cada producto.
• Inserta datos con td en el mismo orden de los encabezados.
• Recuerda: tr es la table row, th es el table head y td es la table data.

¿Cómo mostrar datos y totales con colspan?

• Coloca el resumen en tfoot para separar visualmente el total.
• Usa th también en el pie para resaltar el total en negritas.
• Aplica el atributo colspan="2" cuando una celda deba ocupar dos columnas.
• Ejemplo: Total y 67 USD ocupando dos columnas para alinear con Precio y Cantidad.

¿Qué flujo práctico seguir al construir la tabla?

Empieza por el contenedor table, suma thead con encabezados claros, agrega tbody con filas de datos reales y cierra con tfoot para el total. En el ejemplo, se cargan productos como Laptop, Mouse y Teclado, con precios en USD y cantidades que pueden considerarse stock disponible. Al avanzar, el navegador muestra alineación y separadores sin necesidad de estilos adicionales.

• Define columnas primero: encabezados en thead.
• Inserta filas en tbody con el mismo orden de columnas.
• Calcula y muestra el total en tfoot con colspan cuando corresponda.
• Aprovecha la semántica para mantener el código claro y escalable.

¿Tienes dudas o quieres compartir tu ejemplo de tabla con thead, tbody, tfoot y colspan? Comenta y conversemos.