Estructura básica de tablas

Las tablas HTML permiten organizar información en filas y columnas de manera estructurada y legible. Representan una forma eficaz de presentar datos tabulares como horarios, precios, estadísticas o cualquier información que se beneficie de una disposición en cuadrícula.

Elementos fundamentales

Una tabla HTML se construye utilizando varios elementos que trabajan en conjunto para crear la estructura deseada. El elemento principal es **<table>**, que actúa como contenedor de toda la tabla.

<table>
  <!-- Contenido de la tabla -->
</table>

Dentro del elemento <table>, utilizamos **<tr>** (table row) para definir cada fila de la tabla. Cada fila puede contener una o más celdas de datos.

<table>
  <tr>
    <!-- Primera fila -->
  </tr>
  <tr>
    <!-- Segunda fila -->
  </tr>
</table>

Para crear las celdas individuales dentro de cada fila, utilizamos el elemento <td> (table data). Este elemento contiene el contenido real que queremos mostrar en cada celda.

<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
  <tr>
    <td>Celda 4</td>
    <td>Celda 5</td>
    <td>Celda 6</td>
  </tr>
</table>

Ejemplo práctico básico

Veamos cómo crear una tabla simple que muestre información de productos:

<table>
  <tr>
    <td>Producto A</td>
    <td>15€</td>
    <td>En stock</td>
  </tr>
  <tr>
    <td>Producto B</td>
    <td>25€</td>
    <td>Agotado</td>
  </tr>
  <tr>
    <td>Producto C</td>
    <td>18€</td>
    <td>En stock</td>
  </tr>
</table>

Esta tabla contiene tres filas con tres columnas cada una, mostrando el nombre del producto, su precio y su disponibilidad.

Elementos de agrupación estructural

HTML proporciona elementos adicionales para organizar mejor el contenido de las tablas grandes y mejorar su semántica. Estos elementos son especialmente útiles para tablas complejas.

El elemento **<tbody>** (table body) agrupa las filas que contienen los datos principales de la tabla:

<table>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
    <tr>
      <td>Dato 3</td>
      <td>Dato 4</td>
    </tr>
  </tbody>
</table>

Para tablas que incluyen encabezados, podemos usar <thead> (table head) para agrupar las filas de encabezado:

<table>
  <thead>
    <tr>
      <td>Encabezado 1</td>
      <td>Encabezado 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </tbody>
</table>

El elemento **<tfoot>** (table foot) se utiliza para agrupar filas que contienen información de resumen o totales:

<table>
  <thead>
    <tr>
      <td>Artículo</td>
      <td>Precio</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Camiseta</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Pantalón</td>
      <td>35€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>55€</td>
    </tr>
  </tfoot>
</table>

Estructura completa recomendada

Para crear tablas bien estructuradas y semánticamente correctas, la estructura recomendada incluye todos los elementos de agrupación:

<table>
  <thead>
    <tr>
      <td>Nombre</td>
      <td>Edad</td>
      <td>Ciudad</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Madrid</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>32</td>
      <td>Barcelona</td>
    </tr>
    <tr>
      <td>Elena</td>
      <td>25</td>
      <td>Valencia</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total personas</td>
      <td>3</td>
      <td>3 ciudades</td>
    </tr>
  </tfoot>
</table>

Esta estructura proporciona una organización clara del contenido y facilita tanto la comprensión del código como el procesamiento por parte de navegadores y tecnologías de asistencia.

Consideraciones importantes

Es fundamental que todas las filas tengan el mismo número de celdas para mantener la estructura rectangular de la tabla. Si una fila necesita menos celdas, se debe considerar el uso de celdas vacías o técnicas de combinación de celdas.

<table>
  <tbody>
    <tr>
      <td>Fila 1, Celda 1</td>
      <td>Fila 1, Celda 2</td>
      <td>Fila 1, Celda 3</td>
    </tr>
    <tr>
      <td>Fila 2, Celda 1</td>
      <td>Fila 2, Celda 2</td>
      <td>Fila 2, Celda 3</td>
    </tr>
  </tbody>
</table>

Las tablas HTML están diseñadas específicamente para datos tabulares y no deben utilizarse para maquetar el diseño general de una página web, práctica que era común en el pasado pero que actualmente se considera incorrecta.

Encabezados y celdas de datos

Los encabezados de tabla proporcionan contexto y significado a los datos que contiene cada columna o fila. HTML distingue claramente entre celdas que contienen encabezados y celdas que contienen datos, utilizando elementos específicos para cada propósito.

Elemento th para encabezados

El elemento **<th>** (table header) se utiliza para crear celdas de encabezado que describen el contenido de las columnas o filas. A diferencia de <td>, las celdas <th> tienen un propósito semántico específico: identificar y etiquetar los datos.

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>899€</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Diferencias entre th y td

Las celdas de encabezado (<th>) y las celdas de datos (<td>) tienen roles completamente diferentes en una tabla:

**<th>**: Contiene etiquetas descriptivas que identifican qué representa cada columna o fila
**<td>**: Contiene los datos reales que se están presentando

<table>
  <tbody>
    <tr>
      <th>Estudiante</th>
      <td>María González</td>
    </tr>
    <tr>
      <th>Nota</th>
      <td>8.5</td>
    </tr>
    <tr>
      <th>Asignatura</th>
      <td>Programación</td>
    </tr>
  </tbody>
</table>

En este ejemplo, los elementos <th> actúan como etiquetas que describen qué información contiene cada fila.

Encabezados de columna y fila

Los encabezados pueden aplicarse tanto a columnas como a filas, dependiendo de cómo esté estructurada la información:

Encabezados de columna (más común):

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Enero</th>
      <th>Febrero</th>
      <th>Marzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Móviles</td>
      <td>120</td>
      <td>135</td>
      <td>98</td>
    </tr>
    <tr>
      <td>Tablets</td>
      <td>45</td>
      <td>52</td>
      <td>41</td>
    </tr>
  </tbody>
</table>

Encabezados de fila:

<table>
  <tbody>
    <tr>
      <th>Lunes</th>
      <td>9:00 - Matemáticas</td>
      <td>10:00 - Historia</td>
      <td>11:00 - Inglés</td>
    </tr>
    <tr>
      <th>Martes</th>
      <td>9:00 - Física</td>
      <td>10:00 - Química</td>
      <td>11:00 - Literatura</td>
    </tr>
  </tbody>
</table>

Atributo scope para claridad semántica

El atributo **scope** especifica exactamente a qué celdas se refiere cada encabezado, mejorando la accesibilidad y la comprensión de la tabla:

**scope="col"**: El encabezado se refiere a toda la columna
**scope="row"**: El encabezado se refiere a toda la fila

<table>
  <thead>
    <tr>
      <th scope="col">Ciudad</th>
      <th scope="col">Población</th>
      <th scope="col">Superficie</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Madrid</th>
      <td>3.223.334</td>
      <td>604.3 km²</td>
    </tr>
    <tr>
      <th scope="row">Barcelona</th>
      <td>1.620.343</td>
      <td>101.4 km²</td>
    </tr>
  </tbody>
</table>

Ejemplo práctico completo

Veamos un ejemplo que combina encabezados de columna y fila con el uso apropiado del atributo scope:

<table>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col">Ventas Online</th>
      <th scope="col">Ventas Tienda</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1 2024</th>
      <td>45.000€</td>
      <td>32.000€</td>
      <td>77.000€</td>
    </tr>
    <tr>
      <th scope="row">Q2 2024</th>
      <td>52.000€</td>
      <td>28.000€</td>
      <td>80.000€</td>
    </tr>
    <tr>
      <th scope="row">Q3 2024</th>
      <td>48.000€</td>
      <td>35.000€</td>
      <td>83.000€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total Anual</th>
      <td>145.000€</td>
      <td>95.000€</td>
      <td>240.000€</td>
    </tr>
  </tfoot>
</table>

Encabezados múltiples y complejos

En tablas más complejas, es posible tener múltiples niveles de encabezados. Esto se consigue creando varias filas de encabezados dentro de <thead>:

<table>
  <thead>
    <tr>
      <th scope="col">Empleado</th>
      <th scope="col">Departamento</th>
      <th scope="col">Salario Base</th>
      <th scope="col">Bonus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana Martín</td>
      <td>Desarrollo</td>
      <td>35.000€</td>
      <td>3.500€</td>
    </tr>
    <tr>
      <td>Pedro López</td>
      <td>Marketing</td>
      <td>32.000€</td>
      <td>4.000€</td>
    </tr>
    <tr>
      <td>Sara Chen</td>
      <td>Desarrollo</td>
      <td>38.000€</td>
      <td>3.800€</td>
    </tr>
  </tbody>
</table>

Mejores prácticas para encabezados

Los encabezados efectivos deben ser:

Descriptivos: Explicar claramente qué contiene cada columna o fila
Concisos: Usar el mínimo texto necesario para transmitir el significado
Consistentes: Mantener un estilo y formato uniforme

<!-- Ejemplo de buenos encabezados -->
<table>
  <thead>
    <tr>
      <th scope="col">Código</th>
      <th scope="col">Descripción</th>
      <th scope="col">Precio (€)</th>
      <th scope="col">Disponible</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>PRD001</td>
      <td>Teclado mecánico RGB</td>
      <td>89.99</td>
      <td>Sí</td>
    </tr>
  </tbody>
</table>

El uso correcto de encabezados hace que las tablas sean más accesibles para usuarios con tecnologías de asistencia y más fáciles de entender para todos los usuarios, creando una experiencia de navegación más clara y profesional.

Combinación de celdas (colspan, rowspan)

La combinación de celdas permite que una celda ocupe el espacio de múltiples columnas o filas, creando diseños más flexibles y organizados. HTML proporciona dos atributos específicos para esta funcionalidad: colspan para expandir celdas horizontalmente y rowspan para expandirlas verticalmente.

Atributo colspan

El atributo **colspan** hace que una celda se extienda a través de múltiples columnas. Su valor indica el número total de columnas que debe ocupar la celda.

<table>
  <thead>
    <tr>
      <th colspan="3">Informe Trimestral</th>
    </tr>
    <tr>
      <th>Producto</th>
      <th>Ventas</th>
      <th>Beneficio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptops</td>
      <td>150</td>
      <td>15.000€</td>
    </tr>
  </tbody>
</table>

En este ejemplo, la celda del encabezado principal se extiende a través de las tres columnas, creando un título que abarca toda la tabla.

Atributo rowspan

El atributo **rowspan** permite que una celda se extienda verticalmente a través de múltiples filas. El valor especifica cuántas filas debe ocupar la celda.

<table>
  <tbody>
    <tr>
      <th rowspan="3">Ventas Q1</th>
      <td>Enero</td>
      <td>25.000€</td>
    </tr>
    <tr>
      <td>Febrero</td>
      <td>28.000€</td>
    </tr>
    <tr>
      <td>Marzo</td>
      <td>22.000€</td>
    </tr>
  </tbody>
</table>

La celda "Ventas Q1" se extiende verticalmente a través de las tres filas, agrupando visualmente los datos trimestrales.

Combinación práctica

Podemos combinar ambos atributos para crear estructuras más complejas. Veamos un ejemplo de un horario escolar:

<table>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Miércoles</th>
      <th>Jueves</th>
      <th>Viernes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00-10:00</td>
      <td>Matemáticas</td>
      <td>Historia</td>
      <td>Matemáticas</td>
      <td>Ciencias</td>
      <td>Arte</td>
    </tr>
    <tr>
      <td>10:00-11:00</td>
      <td colspan="2">Educación Física</td>
      <td>Inglés</td>
      <td>Literatura</td>
      <td>Música</td>
    </tr>
    <tr>
      <td>11:30-12:30</td>
      <td>Historia</td>
      <td>Matemáticas</td>
      <td rowspan="2">Proyecto</td>
      <td>Historia</td>
      <td>Ciencias</td>
    </tr>
    <tr>
      <td>12:30-13:30</td>
      <td>Literatura</td>
      <td>Ciencias</td>
      <td>Inglés</td>
      <td>Literatura</td>
    </tr>
  </tbody>
</table>

Casos de uso comunes

Las combinaciones de celdas son especialmente útiles en varios escenarios:

1. Títulos y subtítulos:

<table>
  <thead>
    <tr>
      <th colspan="4">Resultados Anuales 2024</th>
    </tr>
    <tr>
      <th colspan="2">Primer Semestre</th>
      <th colspan="2">Segundo Semestre</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>85.000€</td>
      <td>92.000€</td>
      <td>78.000€</td>
      <td>95.000€</td>
    </tr>
  </tbody>
</table>

2. Agrupación de datos relacionados:

<table>
  <tbody>
    <tr>
      <th rowspan="3">Contacto</th>
      <td>Teléfono</td>
      <td>912 345 678</td>
    </tr>
    <tr>
      <td>Email</td>
      <td>info@empresa.com</td>
    </tr>
    <tr>
      <td>Dirección</td>
      <td>Calle Principal 123, Madrid</td>
    </tr>
  </tbody>
</table>

3. Resúmenes y totales:

<table>
  <tbody>
    <tr>
      <td>Producto A</td>
      <td>100€</td>
      <td>2</td>
      <td>200€</td>
    </tr>
    <tr>
      <td>Producto B</td>
      <td>150€</td>
      <td>1</td>
      <td>150€</td>
    </tr>
    <tr>
      <td colspan="3">Total</td>
      <td>350€</td>
    </tr>
  </tbody>
</table>

Consideraciones importantes

Al utilizar combinaciones de celdas, debemos tener en cuenta varios aspectos:

Cálculo de columnas: Cuando una celda usa colspan="2", esa fila tendrá una celda menos visible, pero la estructura sigue siendo rectangular
Consistencia: Todas las filas deben tener el mismo número total de "espacios de celda" cuando se cuentan las expansiones
Planificación: Es recomendable planificar la estructura antes de escribir el código

<!-- Ejemplo de estructura bien planificada -->
<table>
  <thead>
    <tr>
      <th colspan="3">Datos de Empleados</th>
    </tr>
    <tr>
      <th>Nombre</th>
      <th>Departamento</th>
      <th>Salario</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Juan Pérez</td>
      <td>Desarrollo</td>
      <td>40.000€</td>
    </tr>
    <tr>
      <td colspan="2">Bonus anual: 4.000€</td>
    </tr>
  </tbody>
</table>

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en HTML

Documentación oficial de HTML

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, HTML es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de HTML

Explora más contenido relacionado con HTML y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de HTML Explorar todas las tecnologías

Aprendizajes de esta lección

Comprender la estructura básica de una tabla HTML y sus elementos fundamentales.
Diferenciar entre celdas de datos y encabezados, y utilizar correctamente los elementos y .
Aplicar elementos de agrupación como , y para mejorar la semántica y organización.
Utilizar atributos colspan y rowspan para combinar celdas y crear tablas más complejas.
Identificar buenas prácticas y errores comunes en la construcción de tablas HTML.

Tablas

Estructura básica de tablas

Elementos fundamentales

Ejemplo práctico básico

Elementos de agrupación estructural

Estructura completa recomendada

Consideraciones importantes

Encabezados y celdas de datos

Elemento th para encabezados

Diferencias entre th y td

Encabezados de columna y fila

Atributo scope para claridad semántica

Ejemplo práctico completo

Encabezados múltiples y complejos

Mejores prácticas para encabezados

Combinación de celdas (colspan, rowspan)

Atributo colspan

Atributo rowspan

Combinación práctica

Casos de uso comunes

Consideraciones importantes

Fuentes y referencias

Alan Sastre

Más tutoriales de HTML

Aprendizajes de esta lección