HTML. Unidad 6. Tablas.

Introducción

Esta unidad te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo en el futuro (utilizando CSS).

¿Qué es una tabla?

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un horario, o información sobre diversos países, como se muestra en este ejemplo:

Países Capitales Población Idioma
USA Washington, D.C. 309 millones Inglés
Suecia Estocolmo 9 millones Sueco

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

¿Cómo crear una tabla?

Veamos un ejemplo práctico y construyamos una tabla simple.

1. Hola, soy tu primera celda. 2. Soy tu segunda celda. 3. Soy tu tercera celda. 4. Soy tu cuarta celda.
5. Segunda fila, primera celda. 6. Segunda fila, segunda celda. 7. Segunda fila, tercera celda. 8. Segunda fila, cuarta celda.

Construyamos la tabla paso a paso:

  1. El contenido de cada tabla está delimitado por las etiquetas <table> ... </table>:
<table>
    1. Hola, soy tu primera celda.
    2. Soy tu segunda celda.
    3. Soy tu tercera celda.
    4. Soy tu cuarta celda.
    5. Segunda fila, primera celda.
    6. Segunda fila, segunda celda.
    7. Segunda fila, tercera celda.
    8. Segunda fila, cuarta celda.
</table>
  1. El contenedor más pequeño dentro de una tabla es la celda, que se crea utilizando el elemento <td> (‘td’ significa ‘table data’). Pondremos el contenido de cada celda entre estas etiquetas:
<table>
    <td>1. Hola, soy tu primera celda.</td>
    <td>2. Soy tu segunda celda.</td>
    <td>3. Soy tu tercera celda.</td>
    <td>4. Soy tu cuarta celda.</td>
    <td>5. Segunda fila, primera celda.</td>
    <td>6. Segunda fila, segunda celda.</td>
    <td>7. Segunda fila, tercera celda.</td>
    <td>8. Segunda fila, cuarta celda.</td>
</table>
  1. Como se puede observar, las celdas no se colocan unas debajo de las otras, sino que se distribuyen automáticamente en la misma fila. Cada elemento <td> crea una celda individual, que se va colocando al final de la fila, haciendo que cada celda que añadamos incremente el tamaño de la fila. Para conseguir que la fila pare de crecer y las siguientes celdas se coloquen en una segunda fila, debemos usar el elemento <tr> (‘tr’ significa ‘table row’). Vamos a hacer esto ahora (encerraremos cada fila en un elemento <tr>, y dentro tendremos los elementos <td> con los contenidos individuales de cada celda):
<table>
    <!-- Primera fila -->
    <tr>
        <td>1. Hola, soy tu primera celda.</td>
        <td>2. Soy tu segunda celda.</td>
        <td>3. Soy tu tercera celda.</td>
        <td>4. Soy tu cuarta celda.</td>
    </tr>

    <!-- Segunda fila -->
    <tr>
        <td>5. Segunda fila, primera celda.</td>
        <td>6. Segunda fila, segunda celda.</td>
        <td>7. Segunda fila, tercera celda.</td>
        <td>8. Segunda fila, cuarta celda.</td>
    </tr>
</table>

Importante: Bordes de la tabla

Por defecto, el navegador no mostrará los bordes de las tablas. Para conseguir que se muestren los bordes, usaremos un poco de código CSS. De momento insertaremos el siguiente código en la sección <head> de cada fichero html que creemos (aprenderemos el significado de este código en otra unidad):

<head>
    ...
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    ...
</body>

Ejercicio propuesto: Tablas simples

Crea una nueva página web, copia y pega un par de veces la tabla del ejemplo anterior y cambia el contenido para obtener el siguiente resultado:

Importante: no olvides utilizar el código CSS del encabezado del documento para mostrar los bordes de la tabla.
uno dos tres cuatro
cinco seis siete ocho
uno dos tres
cuatro cinco seis
siete ocho nueve

Tablas con imágenes

Puedes insertar cualquier contenido dentro de las celdas de una tabla. Por ejemplo, imágenes:

<table>
    <tr>
        <td><img src="https://picsum.photos/id/10/300/200" /></td>
        <td><img src="https://picsum.photos/id/1000/200/200" /></td>
    </tr>
    <tr>
        <td><img src="https://picsum.photos/id/1003/200/200" /></td>
        <td><img src="https://picsum.photos/id/1011/300/200" /></td>
    </tr>
</table>

Ejercicio propuesto: Imágenes de prueba

Crea una tabla de dos columnas y al menos diez filas, e inserta varias imágenes, como se muestra en el ejemplo anterior (con bordes). Copia la misma tabla en un archivo nuevo y añade el código CSS necesario para observar el resultados ahora sin bordes.

Puedes usar por ejemplo imágenes que aparecen en «https://picsum.photos/images» . Sólo necesitas escoger una imagen y utilizar el «id» y el «size» correspondiente. Por ejemplo, «https://picsum.photos/id/1/200/200» es la imagen #1 (width=200px and height=200px). O «https://picsum.photos/id/103/300/200» es la imagen #103 (width=300px and height=200px).

Añadiendo encabezados con elementos <th>

Ahora prestemos atención a los encabezados de las tablas. Son celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna. Para ilustrar por qué son útiles, primero echemos un vistazo a la siguiente tabla:

Table without headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

Como podemos observar, aunque se puede distinguir perfectamente el contenido de la tabla, no resulta tan fácil hacer referencias cruzadas. Si los encabezados de columna y fila destacaran de alguna manera, podríamos interpretar más fácilmente el contenido de las celdas.

Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> (‘th’ significa ‘table header’, encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Si cambiamos todos los elementos <td> de la tabla por elementos <th>, los datos que contienen se verán resaltados por defecto de alguna forma. Por ejemplo:

Table with headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

En el futuro cambiaremos los estilos de los elementos <td> y <th> utilizando CSS. Por ahora, concentrémonos en el código HTML:

<table>
    <tr>
        <th>Dog name</th>
        <th>Breed</th>
        <th>Age</th>
        <th>Eating Habits</th>
    </tr>
    <tr>
        <th>Knocky</th>
        <td>Jack Russell</td>
        <td>12</td>
        <td>Eats everyone's leftovers</td>
    </tr>
    <tr>
        <th>Poppy</th>
        <td>Poodle</td>
        <td>9</td>
        <td>Nibbles at food</td>
    </tr>
    <tr>
        <th>Buddy</th>
        <td>Street dog</td>
        <td>10</td>
        <td>Hearty eater</td>
    </tr>
    <tr>
        <th>Bailey</th>
        <td>Cocker Spaniel</td>
        <td>5</td>
        <td>Will eat till he explodes</td>
    </tr>        
</table>

Ejercicio propuesto: Paseador de perros

Crea una página web con una tabla similar a la del ejemplo anterior, para guardar la información de todos los clientes de un paseador de perros. Primero debe agregar tres columnas adicionales (para mantener el nombre de los propietarios, sus números de teléfono y las fotos de los perros). Después de eso, debes insertar varias filas para mostrar los datos de al menos diez perros.

En este caso puedes utilizar otro sitio web para obtener imágenes de prueba sobre perros: «https://placedog.net/images«. Accede a esta URL y sigue las instrucciones que aparecen en la parte superior de la página para insertar cada imagen. Por ejemplo:
Dog name Owner Phone number Breed Age Eating Habits Picture
Knocky Fernando Ruiz 111222333 Jack Russell 12 Eats everyone’s leftovers
Poppy John Doe 222333444 Poodle 9 Nibbles at food
Buddy Peter Stark 333444555 Street dog 10 Hearty eater
Bailey Steve Doe 666777888 Cocker Spaniel 5 Will eat till he explodes

Añadir un título a tu tabla con <caption>

Puedes dar un título a tu tabla colocándolo dentro de un elemento <caption> y anidándolo dentro del elemento <table>. Debes ponerlo justo debajo de la etiqueta de apertura <table>:

<table>
  <caption>Dinosaurios en el período Jurásico</caption>

  ...
</table>

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

Ejercicio propuesto: Tabla sencilla con título y encabezados

Crea una página web con una tabla similar a la siguiente e inserta algunas filas adicionales (al menos diez).

Utiliza un elemento <caption> para poner el texto «Tabla simple con encabezados», y utiliza el elemento <th> para los encabezados «Nombre» and «Apellidos» headers.
Tabla simple con encabezados
Nombre Apellidos
John Doe
Fernando Ruiz

Ejercicio propuesto: Lista de países

Crea una tabla con cinco columnas y al menos diez filas, e inserta los datos relacionados con varios países. Puedes enumerar, por ejemplo, los nombres de los países, sus capitales, su población, el idioma y varias imágenes, como hicimos en el ejemplo al principio de la unidad, pero añadiendo una nueva columna para mostrar una imagen. Tienes que usar encabezados de tabla (<th>) y un título (<caption>). Tu tabla se debería parecer a la que se muestra a continuación.

Puedes usar de nuevo la web «https://picsum.photos/images» para coger diversas imágenes que puedan resultar representativas de cada país.
Countries I like
Countries Capitals Population Language Images
USA Washington, D.C. 309 million English
Sweden Stockholm 9 million Swedish

Ampliar las filas y las columnas

Para proporcionar control adicional sobre cómo las celdas se ajustan o se expanden sobre las columnas, podemos usar el atributo colspan en los elementos <th> y <td>. Este atributo nos permitirá especificar cuántas columnas debe ocupar una celda (el valor por defecto es 1). De forma similar, podemos utilizar el atributo rowspan para especificar sobre cuántas filas se extiende una determinada celda.

El siguiente ejemplo muestra una tabla muy sencilla que enumera los nombres de las personas junto con información diversa sobre la membresía en un club. Hay solo cuatro filas (incluida una fila de encabezado), cada una con cuatro columnas (incluida una columna de encabezado):

Name ID Member Since Balance
Margaret Nguyen 427311 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 15.00
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

Añadamos ahora otra columna que muestre la fecha en que finalizó la membresía de un usuario, junto con un encabezado sobre las fechas de «afiliación» y «cancelada» llamada «Fechas de membresía». Esto implica agregar intervalos de filas y columnas a la tabla, de modo que las celdas de encabezado puedan terminar en los lugares correctos. Veamos primero cómo quedaría la tabla:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00

Observa que el área de encabezado aquí ocupa en realidad dos filas, una con los encabezados «Nombre», «ID», «Fechas de membresía» y «Saldo», y la otra con los encabezados «Afiliación» y «Cancelado», que son los subtítulos que aparecen debajo de «Fechas de membresía». Esto se logra mediante:

  • Poniendo los encabezados de la primera fila («Name», «ID», y «Balance») en una celda que se expanda a la fila siguiente, utilizando el atributo rowspan, de forma que tengan una altura de dos filas.
  • Poniendo el encabezado «Membership Dates» de la primera fila en una celda que se expanda a la siguiente columna usando el atributo colspan attribute, que provocará que el encabezado tenga una anchura de dos columnas.
  • Creando una segunda fila de elementos <th> que contenga los encabezados «Joined» y «Canceled». Como las otras celdas ya están ocupadas por sus equivalentes en la primera fila, y se expanden a la segunda, las nuevas celdas se deberían colocar correctamente debajo del encabezado «Membership Dates».

El código HTML es similar al del ejemplo anterior, excepto que debemos añadir una nueva columna en cada fila, y también tenemos que cambiar el encabezado, para que quede de la siguiente forma:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td><time datetime="2017-04008">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

Las diferencias que importan aquí (relativas a la expansión de filas y columnas) se encuentran en las primeras líneas del código del ejemplo anterior. Simplemente utilizamos rowspan para conseguir que los encabezados «Name», «ID», y «Balance» ocupen dos filas en vez de una, y usamos colspan para conseguir que el encabezado «Membership Dates» se extienda a lo largo de dos columnas.

Ejercicio propuesto: Tu horario

Crea una página web para mostrar tu horario del instituto. Deberías crear una tabla similar a la que se muestra a continuación.

Se deben utilizar elementos <th> para los encabezados, y el atributo colspan para los recreos. También puedes usar el elemento <strong> para resaltar el nombre de la asignatura de cada celda.
Monday Tuesday Wednesday Thursday Friday
07:55h Computer Safety
Peter Williams
Computer Safety
Peter Williams
Computer Safety
Peter Williams
08:50h Network Services
Samuel Holland
Computer Safety
Peter Williams
Network Services
Samuel Holland
Computer Safety
Peter Williams
09:45h Network Operating Systems
Lucy Scott
Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
Network Services
Samuel Holland
10:40h B R E A K
11:00h Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Business and Entrepreneurial Initiative
Rick Harris
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
11:55h Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
Web Applications
Fernando Ruiz
12:50h B R E A K
13:10h Network Services
Samuel Holland
Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
14:05h Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Operating Systems
Lucy Scott

Estructurar la tabla con <thead>, <tbody> and <tfoot>

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con <thead><tfoot> y <tbody>, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

The table header
First cell in the table body Second cell in the table body
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First cell in the table body</td>
            <td>Second cell in the table body</td>
        </tr>
    </tbody>
</table>

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

Para utilizar todos estos elementos solo debes tener en cuenta las siguientes consideraciones:

  • El elemento <thead> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos <col>/<colgroup>, el encabezado de la tabla debe estar justo debajo.
  • El elemento <tfoot> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).
  • El elemento <tbody> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.

Los elementos <thead> +<tbody>

Añadamos por ejemplo los elementos <thead> y <tbody> a la tabla de los miembros del club:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</td>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</td>
      <td>533175</td>
      <td><time datetime="2011-01013">January 13, 2011</time></td>
      <td><time datetime="2017-04008">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</td>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Ejercicio propuesto: Miembros de un club

Crea una página web para mostrar una lista con los miembros de un club, tal como lo hemos hecho en el ejemplo anterior. Puede usar el mismo código fuente que se explicó anteriormente, pero debes añadir un par de columnas: una para escribir la dirección de correo electrónico de cada miembro y la otra para mostrar sus fotos. También debes añadir varias filas a la tabla para que contenga al menos diez miembros del club (puede usar nombres, fechas y saldos aleatorios).

Los elementos <thead> +<tbody> +<tfoot>

Ahora vamos a ver todos estos nuevos elementos en acción con otra tabla, donde usaremos todas las secciones posibles (<thead>, <tbody> y <tfoot>). Echa un vistazo al siguiente ejemplo:

How I chose to spend my money
Purchase Location Date Evaluation Cost (€)
SUM 118
Haircut Hairdresser 12/20 Great idea 30
Lasagna Restaurant 12/20 Regrets 18
Shoes Shoeshop 13/20 Big regrets 65
Toothpaste Supermarket 13/20 Good 5

Debemos poner las filas de los encabezados dentro del elemento <thead>, la fila de la suma dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>. Verás que añadiendo el elemento <tfoot> provoca que la fila de la suma se coloque al final de la tabla. Y para acabar, añadiremos el atributo colspan para conseguir que la celda de la suma se expanda por las cuatro primeras columnas. De esta forma, el número aparece debajo de la columna de costes.

<table>
    <caption>How I chose to spend my money</caption>
    <thead>
        <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/20</td>
            <td>Great idea</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/20</td>
            <td>Regrets</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/20</td>
            <td>Big regrets</td>
            <td>65</td>
        </tr>
        <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/20</td>
            <td>Good</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

Ejercicio propuesto: Cómo gastar tu dinero

Crea una página web para especificar cómo gastarías tu dinero. Puedes usar el mismo código fuente que en el ejemplo anterior, pero debes realizar los siguientes cambios: agrega varias filas con cualquier cosa que te gustaría hacer (al menos diez filas), y finalmente en la columna «Ubicación» debes usar imágenes en lugar de texto.

Puedes acceder de nuevo a la página web «https://picsum.photos/images» para obtener imágenes de tus sitios preferidos.

Ejercicio propuesto: Títulos

Añade títulos a las tablas que has creado anteriormente y que aún no tienen ningún título. No olvides volver a validar tu código.

Ejercicio propuesto: Estructura de tabla

Añade secciones de encabezado, pie y cuerpo a todas las tablas que hayas creado en ejercicios anteriores y aún no tengan esas secciones. No olvides volver a validar tu código.

Test

Comprueba tus conocimientos con este test sobre tablas y otros conceptos relacionados con esta unidad.