Fundamentos Frontend

Tablas en HTML: Dominando la Información Tabulada

Las tablas suelen confundir al principio porque se codifican 'hacia abajo' pero se visualizan 'hacia el lado'. En esta guía desmitificamos su estructura, aprendemos a fusionar celdas y descubrimos por qué son vitales para representar datos (y prohibidas para maquetar sitios).

Ilustración de una cuadrícula de datos estructurada semánticamente.

Concepto Mental: La Analogía de Excel

Para entender HTML Tables, piensa en una hoja de cálculo. La etiqueta `<table>` es el archivo. Pero aquí hay una regla de oro: **HTML construye por filas, no por columnas**. El navegador lee el código de arriba a abajo: primero abre una fila (`<tr>`), inserta las celdas de esa fila (`<td>`), la cierra, y pasa a la siguiente línea.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<table>
  <tr> 
     <td>Dato A</td> <td>Dato B</td>
  </tr>

  <tr> 
     <td>Dato C</td> <td>Dato D</td>
  </tr>
</table>

<table>
  <tr> 
     <td>Dato A</td> <td>Dato B</td>
  </tr>

  <tr> 
     <td>Dato C</td> <td>Dato D</td>
  </tr>
</table>

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<table>
  <tr>
    <th>Nombre</th>
    <th>Puesto</th>
  </tr>
  <tr>
    <td>Sofía</td>
    <td>Gerente</td>
  </tr>
</table>

<table>
  <tr>
    <th>Nombre</th>
    <th>Puesto</th>
  </tr>
  <tr>
    <td>Sofía</td>
    <td>Gerente</td>
  </tr>
</table>

Diagrama de bloques mostrando la jerarquía Table > TR > TH/TD — Jerarquía visual: La tabla contiene filas (TR), y las filas contienen celdas de encabezado (TH) o de datos (TD).

Semántica Estructural: thead, tbody, tfoot

Para tablas profesionales, no tiramos las filas sueltas. Las agrupamos según su función lógica: * **`<thead>`**: Envuelve la fila de títulos. Vital para que, al imprimir, los títulos se repitan en cada hoja. * **`<tbody>`**: Contiene el grueso de los datos. * **`<tfoot>`**: Para filas de totales o resúmenes al final.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<table>
  <thead>
    <tr> <th>Producto</th> <th>Precio</th> </tr>
  </thead>
  
  <tbody>
    <tr> <td>Manzana</td> <td>$1</td> </tr>
    <tr> <td>Pera</td>    <td>$2</td> </tr>
  </tbody>

  <tfoot>
    <tr> <td>Total</td>   <td>$3</td> </tr>
  </tfoot>
</table>

<table>
  <thead>
    <tr> <th>Producto</th> <th>Precio</th> </tr>
  </thead>
  
  <tbody>
    <tr> <td>Manzana</td> <td>$1</td> </tr>
    <tr> <td>Pera</td>    <td>$2</td> </tr>
  </tbody>

  <tfoot>
    <tr> <td>Total</td>   <td>$3</td> </tr>
  </tfoot>
</table>

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<tr>
  <th colspan="3">Reporte Anual de Ventas</th>
</tr>


<tr>
  <td rowspan="2">Categoría A</td>
  <td>Producto 1</td>
</tr>

<tr>
  <th colspan="3">Reporte Anual de Ventas</th>
</tr>


<tr>
  <td rowspan="2">Categoría A</td>
  <td>Producto 1</td>
</tr>

Gráfico explicativo de fusión de celdas horizontal y vertical — Visualización de cómo 'colspan' fusiona celdas a la derecha y 'rowspan' fusiona celdas hacia abajo.

El Pecado Original: Tablas para Layout

**Historia:** En los 90s (HTML4), se usaban tablas invisibles para maquetar sitios (ej: menú en una celda, contenido en otra). **Hoy:** Esto está prohibido por estándares W3C. Las tablas son lentas de renderizar y terribles para lectores de pantalla. **Regla:** Usa Tablas solo para datos (Excel). Usa CSS Grid/Flexbox para diseño.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<table>
  <tr> <td>Logo</td> <td>Banner</td> </tr>
</table>


<header class="flex-container">
  <div class="logo">...</div>
  <nav>...</nav>
</header>

<table>
  <tr> <td>Logo</td> <td>Banner</td> </tr>
</table>


<header class="flex-container">
  <div class="logo">...</div>
  <nav>...</nav>
</header>

Estilizando Tablas con CSS

Por defecto, HTML5 muestra tablas sin bordes y compactas. Para que parezcan una tabla real, dependemos de CSS. Propiedades clave: * `border-collapse: collapse;`: Elimina el doble borde antiguo. * `padding`: Da aire dentro de las celdas. * `nth-child(even)`: Permite crear efectos de 'cebra' (filas de colores alternos).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

table {
  width: 100%;
  border-collapse: collapse; /* Bordes finos y unidos */
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

/* Efecto Cebra: Filas pares con fondo gris */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

table {
  width: 100%;
  border-collapse: collapse; /* Bordes finos y unidos */
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

/* Efecto Cebra: Filas pares con fondo gris */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

¿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.