Estructura de las tablas en HTML

Las tablas en HTML han tenido un papel fundamental en los primeros años de desarrollo web. A falta de mejores herramientas para organizar el contenido del documento, se recurría al uso de tablas para conseguir diseños más vistosos, que permitiesen llegar más allá de lo que en principio hacían las propias etiquetas HTML disponibles, como la presentación del contenido en columnas, por ejemplo.

Esto hizo que se abusase de ellas, utilizándolas para funciones en las que en principio no se tendrían que usar, dando como resultado un enfoque incorrecto del uso del lenguaje HTML, al usar las etiquetas con la intención de formatear el documento, en lugar de usarlas para definir su contenido.

Por otro lado, el uso de esas etiquetas requería de la anidadción de unas tablas dentro de otras para conseguir diseños más o menos elaborados, lo que suponía unas estructuras de HTML demasiado complejas, en las que era bastante fácil cometer errores de diseño. Esto, ligado a la propia estructura flexible de las tablas, cuyo tamaño acaba determinado por su contenido, haciendo caso omiso a otras propiedades como anchura y altura, acabó por dar a las tablas una fundada pero inmerecida mala reputación en el ámbito del desarrollo web.

Básicamente el problema era que se estaban utilizando para fines para los que no han sido diseñadas y que escapan a su único objetivo válido. Si tenemos esto en cuenta y usamos las tablas para lo que realmente han sido pensadas, veremos que su uso no supone una gran complejidad, y que además pueden ser la solución perfecta cuando se trata de organizar los datos. Aún así, en la época de Internet en todos los dispositivos en la que vivimos, las tablas tienen el inconveniente de ser una estructura demasiado rígida para adaptarse a cualquier tipo de pantalla. Y ese es uno de los principales retos que tenemos a día de hoy con su uso. En este caso su solución pasa por una correcta combinación de HTML y CSS.

Qué son las tablas HTML

Para poder usar correctamente las etiquetas de tablas necesitamos saber qué tipo de elemento es una tabla HTML exactamente. De este modo podremos decidir si resulta apropiado su uso, o nos conviene más optar por otro tipo de elementos.

Una tabla en HTML es una estructura que permite organizar y presentar datos con un formato de cuadrícula. En esencia esa es su finalidad: presentar listados de información. Cualquier tipo de contenido que pueda organizarse en una serie de encabezados y filas puede ser presentado dentro de una estructura de tabla. Y cuanto más regular sea la organización de los datos, más sencilla será su inserción dentro de esta estructura. Del mismo modo, cualquier otro tipo de información que no presente una organización tabular, en el sentido de datos entendidos como líneas de información que se desglosan en apartados (filas y columnas), deberá ser presentado con otro tipo de etiquetas HTML, pero no con tablas.

Una vez entendido esto construir una tabla es muy sencillo. Se trata de indicar en el documento dónde empieza y termina la tabla, en primer lugar. En segundo, indicamos cuantas filas contiene esa tabla. Y en tercero, decimos cuantas celdas contiene cada una de las filas de la tabla. Con esos tres datos, y por lo tanto tres únicas etiquetas, podemos construir una tabla básica en HTML. Cuanto más regular sea la estructura de los datos más sencilla será. Esas tres etiquetas son:

La estructura será esta:

  1. Etiqueta tabla para iniciar la tabla
  2. Etiqueta fila que contiene las celdas
  3. Etiqueta celda para cada una de ellas

Ejemplo:

el código


		<table>
			<tr>
				<td>Nombre del Módulo</td>
				<td>Fecha de Inicio</td>
				<td>Fecha Finalicación</td>
			</tr>
			<tr>
				<td>HTML y CSS</td>
				<td>29/01/2021</td>
				<td>28/03/2021</td>
			</tr>
			<tr>
				<td>CSS Avanzado</td>
				<td>03/04/2021</td>
				<td>30/04/2021</td>
			</tr>
			<tr>
				<td>JavaScript</td>
				<td>02/05/2021</td>
				<td>01/06/2021</td>
			</tr>
		</table>
	

Nos mostrará la siguiente tabla:

Nombre del Módulo Fecha de Inicio Fecha Finalicación
HTML y CSS 29/01/2021 28/03/2021
CSS Avanzado 03/04/2021 30/04/2021
JavaScript 02/05/2021 01/06/2021

Encabezados de columnas

Tenemos una cuarta etiqueta que permite definir que las celdas de una fila se comporten como encabezados de columnas. Es la etiqueta th, que normalmente irá en la primera fila de la tabla, que se supone que contiene los encabezados. Esta etiqueta es de corte semántico, puesto que no se refiere a un elemento diferente a los que ya tenemos (no deja de ser una celda de tabla), sino que le da un significado distinto a esas celdas indicando al navegador que son celdas de encabezado.

En la tabla anterior reemplazamos las 3 etiquetas td de la primera fila por 3 etiquetas th, y tenemos una tabla en la que si no aplicamos CSS el navegador distingue estas nuevas celdas de las anteriores resaltándolas en negrita:

Nombre del Módulo Fecha de Inicio Fecha Finalicación
HTML y CSS 29/01/2021 28/03/2021
CSS Avanzado 03/04/2021 30/04/2021
JavaScript 02/05/2021 01/06/2021

Atributos html para las etiquetas td

Esta estructura a veces puede ser demasiado básica para conseguir una tabla funcional, cuando nos encontramos con celdas que ocupan más de una fila de alto,o más de una columna de ancho. Para solucionar estos casos disponemos de dos atributos que podemos aplicar a las celdas y que permiten que estas ocupen más de una columna o fila "rompiendo" la estructura cuadricular de la tabla, son los atributos colspan y rowspan respectivamente.

Estos atributos tienen cada uno como valor el número de celdas que tiene que expandirse la celda indicada en horizontal (colspan) o en vertical (rowspan).

Por ejemplo para indicar que una celda ocupa 3 columnas haremos esto <td colspan="3">. Y para indicar que ocupe dos filas de alto sería así: <td rowspan="2">

Si en el ejemplo anterior queremos añadir una fila donde las dos últimas celdas se combinen en una sola añadiremos el siguiente código:

	 	
		<tr>
			<td>JQuery</td>
			<td colspan="2">Sin fechas definidas</td>
		</tr>
		
	

Que nos devolverá la siguiente tabla:

Nombre del Módulo Fecha de Inicio Fecha Finalicación
HTML y CSS 29/01/2021 28/03/2021
CSS Avanzado 03/04/2021 30/04/2021
JavaScript 02/05/2021 01/06/2021
JQuery Sin fechas definidas

Si inspeccionamos la tabla anterior en el navegador veremos que incluye una etiqueta tbody englobando todas las filas de la tabla que añade automáticamente el propio navegador. Esto lo hace porque esta etiqueta es necesaria para definir los datos de la tabla correctamente, y al no añadirla nosotros la incluye el por defecto con todas las filas de la tabla. Esto nos lleva al tema de las etiquetas semánticas de tablas.

Etiquetas semánticas y de formato para las tablas

Las etiquetas semánticas ayudan a que el navegador entienda mejor qué datos está tratando, y por lo tanto como debe organizarlos en el documento, al mismo tiempo que nos permiten simplificar la tarea de formatear la tabla. Estas son:

Ejemplo

La tabla del ejemplo anterior quedaría así usando todas estas etiquetas. Para ello añadimos dos elementos de contenido nuevo, el título y una fila de resumen, y reorganizamos las filas existentes agrupándolas entre encabezado y cuerpo de la tabla.

Curso de Confección y Publicación de Página Web
Módulo Inicio Fin
Curso Completo 29-09-2021 31-03-2022
HTML y CSS 29/01/2021 28/03/2021
CSS Avanzado 03/04/2021 30/04/2021
JavaScript 02/05/2021 01/06/2021
JQuery Sin fechas definidas

Usar etiquetas para organizar la tabla en columnas

Disponemos de dos etiquetas específicas para indicar al navegador como vamos a organizar la tabla a nivel de columnas, con propósito de organizar los datos, o bien aplicarles formato.

La primera etiqueta es colgroup y sirve para indicar que vamos a definir un grupo de columas. Esta etiqueta contendrá anidada el segundo tipo de etiqueta.

La segunda es la etiqueta col que sirve para diferenciar cada una de las columnas del grupo. Podemos usar una etiqueta col para identificar cada una de las columnas, o podemos añadir un atributo span a una sola etiqueta col indicando en su valor el número de columnas que estamos agrupando en ella.

Estas etiquetas deben insertarse al principio de la tabla, después del elemento caption si lo hay, y antes de cualquier otro contenido.

Ejemplo

Vamos a organizar la tabla anterior por columnas añadiendo este código:


<table>
	<caption>Curso de Confección y Publicación de Página Web</caption>
	<colgroup>
		<col class="primera">
		<col span="2" class="centro">
		<col class="final">
	</colgroup>
	<thead>
		<tr>
			<th>Módulo</th>
			<th>Inicio</th>
			<th>Fin</th>
			<th>Duración</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">Curso Completo</td>
			<td>530</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>HTML</td>
			<td>29-09-2021</td>
			<td>30-10-2021</td>
			<td>150</td>
		</tr>
		<tr>
			<td>CSS</td>
			<td>31-10-2021</td>
			<td>15-01-2022</td>
			<td rowspan="2">190</td>
		</tr>
		<tr>
			<td>JavaScript</td>
			<td>16-01-2022</td>
			<td>05-03-2022</td>
		</tr>
	</tbody>
</table>

Y este CSS:

.primera { background-color: lightseagreen; } .centro { background-color: lightskyblue; } .final { background-color: lime; }

Resultando este tipo de elemento:

Curso de Confección y Publicación de Página Web
Módulo Inicio Fin Duración
Curso Completo 530
HTML 29-09-2021 30-10-2021 150
CSS 31-10-2021 15-01-2022 190
JavaScript 16-01-2022 05-03-2022

Atributos específicos para Tablas

Además de todos los atributos habituales en CSS, para trabajar con tablas tenemos un par de atributos que nos permiten definir el comportamiento de sus bordes. Son border-collapse que establece si hay separación o no entre los bordes de las celdas (sus valores son "collapse" para bordes juntos y "separate" para que queden separados), y border-spacing, que define en unidades la separación entre estos bordes.

Veamos como queda una tabla con todas las etiquetas definidas:

Horario de Módulos
Nombre del Módulo Fecha de Inicio Fecha Finalicación
Confección y publicación de páginas web 29/01/2021 26/06/2021
HTML y CSS 29/01/2021 28/03/2021
CSS Avanzado 03/04/2021 30/04/2021
JavaScript 02/05/2021 01/06/2021
JQuery 02/06/2021 25/06/2021

Generada a partir del siguiente código:

HTML

	
	<table class="tabla_final">
	<caption>Horario de Módulos</caption>
	<colgroup>
		<col class="col1">
		<col span="2" class="col2">
	</colgroup>
		<thead>
			<tr>
				<th>Nombre del Módulo</th>
				<th>Fecha de Inicio</th>
				<th>Fecha Finalicación</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>Confección y publicación de páginas web</td>
				<td>29/01/2021</td>
				<td>26/06/2021</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>HTML y CSS</td>
				<td>29/01/2021</td>
				<td>28/03/2021</td>
			</tr>
			<tr>
				<td>CSS Avanzado</td>
				<td>03/04/2021</td>
				<td>30/04/2021</td>
			</tr>
			<tr>
				<td>JavaScript</td>
				<td>02/05/2021</td>
				<td>01/06/2021</td>
			</tr>
			<tr>
				<td>JQuery</td>
				<td>02/06/2021</td>
				<td>25/06/2021</td>
		</tr>
	</tbody>
		</table>
	

CSS

	
		table, th, td {
			border: 1px solid black;
		}
		.col1 {
			background-color: lemonchiffon;
		}
		.col2 {
			background-color: lightcyan;
		}
		thead {
			background-color: lightgrey;
		}
		tfoot {
			background-color: orange;
		}
		.tabla_final {
			border-collapse: separate;
			border-spacing: 10px;
		}