El abecedario del desarrollador web: columnas, celdas, encabezados y pies de página.
Una tabla es un conjunto estructurado de datos formado por filas y columnas. En sus intersecciones se forman celdas que contienen información para el lector, como texto o números.
En los inicios de la web, las tablas se usaban para maquetar páginas enteras. Afortunadamente, hoy existen herramientas más adecuadas como Flexbox y Grid. Sin embargo, las tablas siguen siendo una herramienta útil para estructurar datos visualmente en los sitios web.
Crear una tabla en HTML es sencillo, ya que todos las etiquetas necesarias ya existen en el lenguaje. En este artículo, usando datos sobre las últimas películas de Marvel con Spider-Man, veremos cómo funcionan y qué atributos tienen.
<table>: Creando una tabla
Para crear una tabla en HTML, necesitamos dos etiquetas: <table> y </table>, uno de apertura y otro de cierre. Todo lo que se encuentre entre ellos será interpretado por el navegador como datos tabulares.
<table>
<!-- Aquí irá la estructura y el contenido de la tabla -->
</table>Si guardamos el archivo y lo abrimos en el navegador, no veremos nada. La tabla aún no existe, ya que no hemos creado sus filas y columnas.
<tr>: Trabajando con filas
Empecemos a rellenar la tabla. Primero, crearemos filas con la etiqueta <tr>:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>Ahora hay tres filas, pero sigue sin ser una tabla completa. Le faltan las columnas.
<td>: Añadiendo celdas
Cada fila debe contener celdas. Las crearemos con la etiqueta <td>, que se coloca dentro de <tr>. La abreviatura td significa table data (datos de tabla).
Por ejemplo, vamos a crear una tabla HTML con las películas de Spider-Man que forman parte del universo cinematográfico Marvel. Para cada una, indicaremos su título en español, el título original y el año de estreno.
Puedes copiar el código para no tener que escribirlo completo:
<table>
<tr>
<td>Título</td>
<td>Título original</td>
<td>Año</td>
</tr>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</table>Ahora la tabla tiene filas y columnas con información sobre las películas.
Si repites nuestro código, la tabla en tu navegador se verá diferente. No te preocupes, se debe a los estilos CSS. Si quieres que el diseño de la tabla sea como en el artículo, crea un archivo llamado style.css en la carpeta con el documento HTML. Copia y pega en él el siguiente código:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 50px;
background-color: #18191C;
color: #e6dfdf;
font-family: "Roboto", sans-serif;
}
table {
width: 650px;
border-top: 7px solid rgb(43, 129, 17);
border-collapse: collapse;
text-align: center;
margin-bottom: 20px;
border: 1px solid #dddddd;
}
td {
text-align: left;
padding: 10px;
border: 3px solid rgb(43, 129, 17);
}
th {
text-align: center;
padding: 10px;
border: 3px solid rgb(43, 129, 17);
}Después, no olvides conectar los estilos. Para ello, en el bloque <head> del archivo HTML, añade la línea <link rel="stylesheet" href="./style.css">. Para entender qué es CSS consulta nuestro artículo.
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<table>
<tr>
<td>Título</td>
<td>Título original</td>
<td>Año</td>
</tr>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</table>
</body>
</html>¡Importante! El número de celdas en cada fila debe ser el mismo. Si no se respeta esto, la maquetación de la tabla se desajustará.
<th>: Nombrando las columnas
En nuestra tabla, la primera fila no se diferencia de las demás: son las mismas celdas con datos. Pero sabemos que estos son los nombres de las columnas, no información sobre las películas. Vamos a indicarlo en el código HTML.
Para ello, colocaremos los nombres de las columnas dentro de la etiqueta <th> en la primera fila:
<table>
<thead>
<tr>
<th>Título</th>
<th>Título original</th>
<th>Año</th>
</tr>
</thead>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</table>Al contenido de <th> se le aplica un estilo por defecto: alineación al centro y negrita.
<thead>: Encabezado superior
Hemos creado la tabla y la hemos rellenado con datos. Un humano puede leerlos fácilmente, pero los motores de búsqueda y los programas no saben el significado de la información de las celdas. Para ellos, podemos añadir pistas envolviendo la estructura en etiquetas semánticas. Estos no afectan al aspecto de la tabla, pero ayudan a los motores de búsqueda a orientarse en su contenido y a los lectores de pantalla a leer la información correctamente.
Una de los etiquetas semánticos es <thead>. En HTML, se utiliza para crear y agrupar los elementos del encabezado superior, que incluye los nombres de las columnas. <thead> debe estar dentro de <table> y contener al menos un bloque <tr>.
Creemos un encabezado superior para que los motores de búsqueda y los lectores de pantalla entiendan que estos son los nombres de las columnas y no celdas de tabla normales:
<table>
<thead>
<tr>
<th>Título</th>
<th>Título original</th>
<th>Año</th>
</tr>
</thead>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</table>Ahora, si un lector de pantalla lee el contenido de la tabla, primero leerá el nombre de la columna y su contenido, y no todas las filas por orden.
<tbody>: Contenido principal
Envolveremos los datos principales de la tabla en la etiqueta semántica <tbody>. Debe ir justo después del encabezado superior, indicando la sección principal con la información. Gracias a él, el motor de búsqueda o el lector de pantalla entiende que en esta parte se encuentra la información principal para el lector.
Si no se especifica <tbody>, el navegador lo hará por sí mismo, pero es mejor añadirlo manualmente:
<table>
<thead>
<tr>
<th>Título</th>
<th>Título original</th>
<th>Año</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</tbody>
</table>La etiqueta no afecta al aspecto de la tabla. Pero permite:
- Configurar el desplazamiento de la página con la tabla. Ahora, sus celdas principales se desplazarán independientemente de los nombres de las columnas, que se fijarán en la parte superior.
- Mostrar al lector de pantalla dónde se indica la información principal en la tabla.
<tfoot>: Pie de página
Una tabla HTML también puede tener un pie de página. Normalmente, se coloca el cálculo total de los datos de todas las celdas. Por ejemplo, si la tabla contiene los sueldos de todos los empleados de una empresa, en el pie de página se puede mostrar el valor medio o la suma total.
Indicaremos el pie de página con la etiqueta semántica <tfoot>. Su contenido siempre será renderizado por el navegador al final de la tabla HTML, incluso si se coloca el bloque en el código antes que los demás. Este comportamiento del navegador puede resultar confuso, por lo que conviene recordar esta característica.
¡Importante! Un bloque <tfoot> solo puede haber uno en la tabla.
La estructura de la tabla con pie de página será así:
<table>
<thead>
<!-- Encabezado -->
</thead>
<tbody>
<!-- Parte principal -->
</tbody>
<tfoot>
<!-- Pie de página -->
</tfoot>
</table><caption>: Añadiendo un título
Añadiremos un título a nuestra tabla para que el usuario pueda entender más fácilmente de qué trata. Podemos hacerlo con la etiqueta <caption>. El navegador lo renderizará encima de la tabla.
Los títulos son importantes para los usuarios con discapacidad visual. Los lectores de pantalla los leen primero y luego la información principal. Esto ayuda a la persona a entender si merece la pena seguir escuchando o si puede omitir parte de la página web.
Para dar formato al texto en <caption> se pueden usar estilos CSS. Estos determinan el tipo y tamaño de la fuente, su color y otros parámetros visuales.
Añadiremos un título a la tabla con la etiqueta <caption>:
<table>
<caption>Spider-Man en el universo cinematográfico Marvel</caption>
<thead>
<tr>
<th>Título</th>
<th>Título original</th>
<th>Año</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</tbody>
</table>Ahora, sobre las columnas y las filas aparece el título de la tabla.
Atributos colspan y rowspan: Combinando celdas
A veces, hay que combinar celdas y columnas en una tabla HTML para ordenar los datos. Esto se puede hacer con los atributos colspan y rowspan, que se aplican a las etiquetas <th> y <td>. El primero combina celdas de dos o más columnas, y el segundo, de dos o más filas. Como valor del atributo, se indica el número de celdas que se deben combinar.
Vamos a añadir a nuestra tabla los nombres de los directores y productores de las películas. Para las tres películas son los mismos, por lo que combinaremos las celdas con los nombres usando el atributo rowspan para la etiqueta <td>:
<table>
<caption>Spider-Man en el universo cinematográfico Marvel</caption>
<thead>
<tr>
<th>Título</th>
<th>Título original</th>
<th>Año</th>
<th>Director</th>
<th>Productor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hombre Araña: Regreso a casa</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
<td rowspan="3">Jon Watts</td>
<td rowspan="3">Kevin Feige y Amy Pascal</td>
</tr>
<tr>
<td>Hombre Araña: Lejos de casa</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Hombre Araña: Sin camino a casa</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</tbody>
</table>Ahora la tabla tiene este aspecto:
Para leer más
La creación de tablas en HTML es una tarea sencilla pero que requiere atención. Incluso con conocimientos básicos, se puede obtener un buen resultado y colocar los datos de forma ordenada en una página web. Se puede encontrar documentación detallada y mejores prácticas en el portal MDN Web Docs, donde se describe detalladamente cada etiqueta y las características de su uso.
Las tablas en HTML puro parecen aburridas y monótonas. Esto se puede cambiar con estilos CSS. Puedes obtener más información en la guía del equipo de htmldesdecero, que te enseñará a trabajar con más ejemplos.
