Tablas en HTML: Estructura, thead, tbody, colspan y Accesibilidad

Modelo Mental de las Tablas HTML

Para comprender las tablas en HTML, pensalas como una planilla de Excel. La diferencia clave es que HTML **se construye por filas (rows)** y no por columnas. El navegador lee el código de arriba hacia abajo, creando una fila completa antes de pasar a la siguiente.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- <table> es el contenedor principal de toda la tabla -->
<table>
  <!-- <tr> define una fila horizontal -->
  <tr>
    <!-- <td> representa una celda de datos -->
    <td>Dato A</td>
    <td>Dato B</td>
  </tr>

  <!-- Segunda fila de la tabla -->
  <tr>
    <td>Dato C</td>
    <td>Dato D</td>
  </tr>
</table>

<!-- <table> es el contenedor principal de toda la tabla -->
<table>
  <!-- <tr> define una fila horizontal -->
  <tr>
    <!-- <td> representa una celda de datos -->
    <td>Dato A</td>
    <td>Dato B</td>
  </tr>

  <!-- Segunda fila de la tabla -->
  <tr>
    <td>Dato C</td>
    <td>Dato D</td>
  </tr>
</table>

Analogía entre una tabla HTML y una hoja de cálculo — Las tablas HTML se construyen fila por fila, igual que en una planilla de Excel.

Estructura Básica: tr, th y td

Las tablas HTML se componen de tres etiquetas fundamentales: `<tr>` para filas, `<th>` para celdas de encabezado y `<td>` para datos. Mantener una estructura consistente es clave para evitar tablas rotas.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Inicio de la tabla -->
<table>
  <!-- Fila de encabezados -->
  <tr>
    <!-- <th> define títulos de columna -->
    <th>Nombre</th>
    <th>Puesto</th>
  </tr>

  <!-- Fila de datos -->
  <tr>
    <!-- <td> contiene datos comunes -->
    <td>Sofía</td>
    <td>Gerente</td>
  </tr>
</table>

<!-- Inicio de la tabla -->
<table>
  <!-- Fila de encabezados -->
  <tr>
    <!-- <th> define títulos de columna -->
    <th>Nombre</th>
    <th>Puesto</th>
  </tr>

  <!-- Fila de datos -->
  <tr>
    <!-- <td> contiene datos comunes -->
    <td>Sofía</td>
    <td>Gerente</td>
  </tr>
</table>

Jerarquía de una tabla HTML con tr th y td — Cada tabla contiene filas (tr) y cada fila contiene celdas de encabezado (th) o datos (td).

Estructura Semántica Profesional

Las tablas modernas utilizan `<thead>`, `<tbody>` y `<tfoot>` para separar visual y semánticamente los encabezados, los datos y los totales. Esto mejora accesibilidad, SEO e impresión.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Contenedor principal de la tabla -->
<table>
  <!-- Encabezado de la tabla -->
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>

  <!-- Cuerpo con los datos -->
  <tbody>
    <tr>
      <td>Manzana</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Pera</td>
      <td>$2</td>
    </tr>
  </tbody>

  <!-- Pie con totales o resúmenes -->
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

<!-- Contenedor principal de la tabla -->
<table>
  <!-- Encabezado de la tabla -->
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>

  <!-- Cuerpo con los datos -->
  <tbody>
    <tr>
      <td>Manzana</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Pera</td>
      <td>$2</td>
    </tr>
  </tbody>

  <!-- Pie con totales o resúmenes -->
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

Separación semántica de una tabla HTML — Uso correcto de thead, tbody y tfoot para tablas accesibles y profesionales.

Fusión de Celdas en Tablas HTML

Los atributos `colspan` y `rowspan` permiten combinar celdas horizontal y verticalmente. Son ideales para títulos generales o agrupaciones de datos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Celda que ocupa tres columnas -->
<th colspan="3">Reporte Anual</th>

<!-- Celda que se extiende dos filas hacia abajo -->
<td rowspan="2">Categoría A</td>

<!-- Celda que ocupa tres columnas -->
<th colspan="3">Reporte Anual</th>

<!-- Celda que se extiende dos filas hacia abajo -->
<td rowspan="2">Categoría A</td>

Ejemplo visual de colspan y rowspan — Colspan fusiona columnas y rowspan fusiona filas dentro de una tabla.

Uso Correcto de las Tablas

Las tablas deben usarse solo para datos. Utilizarlas para maquetar sitios es una mala práctica que afecta accesibilidad, rendimiento y SEO.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<!-- Las tablas NO deben usarse para diseño visual -->
<!-- Utilizá HTML semántico + CSS -->
<!-- ❌ Mala práctica -->
<table>
  <tr>
    <td>Logo</td>
    <td>Menú</td>
  </tr>
</table>

<!-- ✅ Buena práctica -->
<header>
  <div class="logo">Logo</div>
  <nav>Menú</nav>
</header>

<!-- Las tablas NO deben usarse para diseño visual -->
<!-- Utilizá HTML semántico + CSS -->
<!-- ❌ Mala práctica -->
<table>
  <tr>
    <td>Logo</td>
    <td>Menú</td>
  </tr>
</table>

<!-- ✅ Buena práctica -->
<header>
  <div class="logo">Logo</div>
  <nav>Menú</nav>
</header>

htmlCssOnlineCourseResponsiveWebDesignFromScratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, ~~sin videos fríos~~ ni ~~cursos masivos~~.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos

Precio $150000 ARG Oferta especialDisponible por 0 Días y 00:00:00 Hs

Ver próximas fechas

Leccion Anterior

Interfaz de formulario moderno con validaciones y teclado móvil activo

Formularios HTML5: Lección Técnica Definitiva

En esta lección aprenderás a crear formularios HTML5 bien estructurados utilizando la etiqueta <form>, métodos GET y POST, inputs semánticos, validaciones nativas del navegador y buenas prácticas de accesibilidad y experiencia de usuario en dispositivos móviles.

Comenzar Lección

Leccion Actual

Tablas en HTML: Estructura y Semántica Profesional

Cómo representar datos correctamente sin romper accesibilidad ni SEO

Comenzar Lección

Lecciones Siguiente

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML

Fundamentos de CSS

En esta lección aprendés cómo funciona CSS desde la base: qué es una regla de estilo, cómo se escribe la sintaxis correcta, qué son los selectores y cómo aplicar estilos visuales profesionales sobre cualquier estructura HTML.

Comenzar Lección

¿Por qué mi tabla no tiene líneas divisorias (bordes)?

Es el comportamiento predeterminado. HTML5 eliminó los atributos visuales (como `border="1"`) a favor de CSS. Debes aplicar `border: 1px solid black` a los elementos `table`, `th` y `td` en tu hoja de estilos.

¿Qué significa `border-collapse: collapse`?

Por defecto, cada celda tiene su propio borde, creando un efecto de 'doble línea'. `collapse` fusiona los bordes adyacentes en una sola línea fina y limpia, estándar en diseño moderno.

¿Cómo hago que una celda ocupe dos columnas?

Añade el atributo `colspan="2"` a la etiqueta `<td>` o `<th>`. Recuerda que debes eliminar una celda en esa misma fila para que la suma total de columnas siga cuadrando.

¿Cómo alineo el texto al centro o derecha?

Usa la propiedad CSS `text-align`. Por defecto, los `<th>` vienen centrados (`center`) y los `<td>` a la izquierda (`left`). Para números (precios), se suele usar `text-align: right`.

¿Puedo poner una tabla dentro de otra tabla?

Técnicamente sí, pero se desaconseja totalmente. Complica el código, rompe la accesibilidad y hace que el navegador trabaje el doble para renderizarla. Casi siempre hay una mejor solución con CSS.

¿Qué es el atributo `scope`?

Es vital para accesibilidad. `<th scope="col">` indica que ese título es para toda la columna vertical. `<th scope="row">` indica que es para la fila horizontal. Ayuda a los ciegos a navegar la tabla.

¿Cómo hago una tabla responsive en celular?

Las tablas no se adaptan bien a pantallas pequeñas. La solución estándar es envolver la `<table>` en un `<div>` contenedor y darle estilo `overflow-x: auto;`. Esto permite al usuario deslizar (scroll) la tabla horizontalmente.

¿Es obligatorio usar `thead` y `tbody`?

No es obligatorio para que funcione, pero sí es una buena práctica (Best Practice). Permite al navegador y a los buscadores entender mejor la estructura y facilita aplicar estilos CSS específicos a la cabecera o al cuerpo.

¿Qué pasa si mis filas no tienen la misma cantidad de celdas?

La tabla se verá rota o con huecos extraños al final de las filas incompletas. El navegador no dará error, pero visualmente será incorrecto. Siempre verifica que la suma de `td` + `colspan` sea igual en todas las filas.

¿Para qué sirve la etiqueta `<caption>`?

Sirve para poner un título o leyenda visible a la tabla entera. Se coloca justo después de abrir la etiqueta `<table>`. Es semánticamente mejor que poner un párrafo `<p>` o `<h3>` fuera de la tabla.