Estructura de las tablas en HTML

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:

• <table> Es la etiqueta que contendrá a toda la tabla, con el resto de etiquetas anidadas en ella
• <tr> Esta etiqueta define una fila completa de la tabla
• <td>Esta etiqueta define una celda individual

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:

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:

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:

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:

Cabeceras

• <th> Define una celda de encabezado. Normalmente será en la primera fila de la tabla

Partes de la tabla

• <caption>Permite añadir un título a la tabla. Debe incluirse justo después de la apertura de la tabla
• thead: Define una fila o más que actúan como encabezado de tabla. Normalmente son las primeras filas
• tbody: Define el conjunto de datos propiamente dicho de la tabla, prescindiendo de las cabeceras y pies que pueda haber. Un uso de esta etiqueta puede darse en tablas extensas, con cientos o miles de registros, para que el navegador sepa qué datos mantener siempre visibles en pantalla y qué datos desplazar mediante scroll.
• tfoot: Define qué fila o filas forman el pie de la tabla, con información que tampoco son registros propiamente dichos, sino que suelen actuar como resumen de datos. En la estructura HTML de la tabla la etiqueta tfoot debe aparecer antes que la etiqueta tbody

Organización de columnas

• <colgroup> Sirve para definir las columnas de la tabla a nivel de formato. Debe ir siempre antes de cualquier fila de la tabla, justo después de la etiqueta table, o caption si lo tiene.
• <col> Define las columnas de la tabla para ser formateadas. Debe ir anidada siempre dentro de colgroup

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.

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:

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:

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

			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;
			}