Tablas HTML para organizar datos - HTML desde Cero

Para que sirven las tablas?

Las tablas HTML estan disenadas para presentar datos tabulares de forma organizada: información que tiene sentido en filas y columnas, como calificaciones, horarios, comparativas de precios o estadisticas.

Es importante entender que las tablas NO deben usarse para crear el layout de una página. Esa práctica era comun en los años 2000, pero hoy tenemos CSS Flexbox y Grid para maquetar.

Estructura básica de una tabla

Una tabla completa tiene esta estructura:

<table>
  <caption>Título descriptivo de la tabla</caption>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Resumen 1</td>
      <td>Resumen 2</td>
    </tr>
  </tfoot>
</table>

Elementos principales

Elemento	Función
`<table>`	Contenedor de toda la tabla
`<caption>`	Título o descripción de la tabla
`<thead>`	Grupo de filas de encabezado
`<tbody>`	Grupo de filas con los datos
`<tfoot>`	Grupo de filas de resumen o totales
`<tr>`	Una fila de la tabla (table row)
`<th>`	Celda de encabezado (table header)
`<td>`	Celda de datos (table data)

El elemento caption

El <caption> proporciona un título accesible para la tabla. Debe ser el primer hijo del <table>:

<table>
  <caption>Precios de los planes mensuales</caption>
  <!-- ... -->
</table>

Los lectores de pantalla anuncian el caption antes de leer la tabla, lo que ayuda al usuario a decidir si quiere explorar los datos.

Encabezados con scope

El atributo scope en <th> indica si el encabezado aplica a una columna o a una fila:

<!-- Encabezado de columna -->
<th scope="col">Precio</th>

<!-- Encabezado de fila -->
<th scope="row">Plan básico</th>

Esto es esencial para la accesibilidad. Sin scope, los lectores de pantalla no pueden asociar correctamente cada celda con su encabezado correspondiente.

Combinar celdas (colspan y rowspan)

A veces necesitas que una celda ocupe varias columnas o filas:

<table>
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col" colspan="2">Precio</th>
    </tr>
    <tr>
      <th scope="col"></th>
      <th scope="col">Mensual</th>
      <th scope="col">Anual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Básico</th>
      <td>$10</td>
      <td>$100</td>
    </tr>
    <tr>
      <th scope="row">Premium</th>
      <td>$25</td>
      <td>$250</td>
    </tr>
  </tbody>
</table>

colspan="2" — La celda ocupa 2 columnas
rowspan="3" — La celda ocupa 3 filas

Tablas responsivas

Las tablas pueden desbordarse en pantallas pequenas. Una solucion simple es envolverlas en un contenedor con scroll horizontal:

<div style="overflow-x: auto;">
  <table>
    <!-- Tabla con muchas columnas -->
  </table>
</div>

Esto permite que el usuario haga scroll horizontal solo dentro de la tabla, sin afectar el resto de la página.

Buenas prácticas para tablas

Siempre usa <caption> para describir el contenido de la tabla
Usa <thead>, <tbody> y <tfoot> para estructurar la tabla semanticamente
Agrega scope a los <th> para mejorar la accesibilidad
No uses tablas para layout — usa CSS Grid o Flexbox
Mantiene las tablas simples — si necesitas más de 2 niveles de encabezados, considera dividir en tablas más pequenas

Práctica

Construye una tabla de horarios: Crea una tabla con <caption>, <thead>, <tbody> y <tfoot> que muestre un horario semanal de clases. Usa scope="col" y scope="row" en los encabezados.
Combina celdas: Modifica tu tabla para que al menos una celda use colspan y otra use rowspan, simulando un horario donde una clase ocupa dos horas o dos dias.
Hazla responsive: Envuelve tu tabla en un contenedor con overflow-x: auto y verifica que se pueda hacer scroll horizontal en pantallas pequenas.

En la siguiente leccion profundizaremos en HTML semántico y su impacto en la accesibilidad y el SEO.