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. The smallest container inside a table is a table cell, which is created by a <td> element (‘td’ stands for ‘table data’). We will put the contents of each cell inside these tags:
<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. As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row, and every cell we add makes the row grow longer. To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element (‘tr’ stands for ‘table row’). Let’s do this now (we will wrap each row in an additional <tr> element, with each cell contained in a <td>):
<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:

  • Having the first row’s «Name», «ID», and «Balance» heading cells span two rows using the rowspan attribute, making them each be two rows tall.
  • Having the first row’s «Membership Dates» heading cell span two columns using the colspan attribute, which causes this heading to actually be two columns wide.
  • Having a second row of <th> elements that contains only the «Joined» and «Canceled» headings. Because the other columns are already occupied by first-row cells that span into the second row, these wind up correctly positioned under the «Membership Dates» heading.

The HTML is similar to the previous example’s, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this:

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

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of rowspan to make the «Name», «ID», and «Balance» headers occupy two rows instead of just one, and the use of colspan to make the «Membership Dates» header cell span across two columns.

Ejercicio propuesto: Tu horario

Create a web page to display your school timetable. You should create a table similar to the one below.

Notice that you have to use <th> elements for the headers, and colspan attribute for the BREAKS. You can also use the <strong> element to enhance the subject name in each cell.
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>

Let’s put all these new elements into action with another table, where we will use all possible sections (<thead>, <tbody> and <tfoot>). Have a look at the following example:

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

We must put the obvious headers row inside a <thead> element, the «SUM» row inside a <tfoot> element, and the rest of the content inside a <tbody> element. You’ll see that adding the <tfoot> element has caused the «SUM» row to go down to the bottom of the table. And finally we will add a colspan attribute to make the «SUM» cell span across the first four columns, so the actual number appears at the bottom of the «Cost» column:

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