FUNDAMENTOS FRONTEND

Tablas en HTML: Estructura y Semántica Profesional

Filas, celdas, thead, tbody y fusión de celdas explicadas paso a paso

Crea tablas HTML semánticas y accesibles. Aprende a usar thead, tbody, combinar celdas y estructurar datos correctamente para evitar errores comunes de maquetación.

1

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.

<!-- <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.
2

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.

<!-- 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).
3

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.

<!-- 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.
4

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.

<!-- 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.
5

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.

<!-- 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>
Publicidad
html-css-online-course-responsive-web-design-from-scratch

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 especial
Ver próximas fechas

Lección anterior

Interfaz de formulario moderno con validaciones y teclado móvil activo
Vista previa de interfaces de formularios optimizadas para validación en tiempo real y usabilidad móvil.

Formularios HTML5: Lección Técnica Definitiva

Domina los formularios HTML5: estructura, métodos GET/POST, inputs semánticos y validaciones nativas. Aprende accesibilidad y optimización móvil para una mejor experiencia.

Comenzar Lección

Lección actual

Estructura de tabla HTML moderna
Ilustración de una cuadrícula de datos estructurada semánticamente.

Tablas en HTML: Estructura y Semántica Profesional

Crea tablas HTML semánticas y accesibles. Aprende a usar thead, tbody, combinar celdas y estructurar datos correctamente para evitar errores comunes de maquetación.

Lección actual

Lección siguiente

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML
CSS es el lenguaje que transforma la estructura HTML en interfaces visuales atractivas.

Fundamentos de CSS

Aprende CSS desde la base: domina la sintaxis, reglas de estilo y selectores. Descubre cómo transformar código HTML en interfaces visuales profesionales con estilos correctos.

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.