TEMA 14

Creación de tablas con HTML5

La primera etiqueta que debemos conocer cuando nos enfrentamos a nuestra primera
tabla es <table> y </table>. Esta es la etiqueta que se utiliza para indicar el principio y el
final de una tabla.

<p> Este es un párrafo antes de la tabla. </p>

<table>

<!-- Aquí vamos a escribir el contenido de la tabla -->

</table>

<p> Este es un párrafo después de la tabla.</p>

Para reproducir el contenido de la tabla disponemos de un buen número de etiquetas. Para

empezar poco a poco, aquí tienes dos muy importantes nuevas etiquetas:

 <tr></tr>: indica el comienzo y el final de cada fila de la tabla;

 <td></td>: indica el inicio y al final del contenido de cada celda.

En HTML, una tabla se construye línea por línea. En cada línea (<tr>), que muestra el
contenido de las diferentes celdas (<<td>).

Así, vemos que hay una etiqueta de fila (<tr>) que abarca un grupo de celdas (<td>).

Por ejemplo, si quiero hacer una tabla con dos líneas, con tres celdas por línea (por lo
tanto, tres columnas), tendría que escribir esto:

Carmen 33 España

Luisa 26 Francia

Sin CSS, la tabla que acabamos de crear ni siquiera tiene las líneas de separación que
te mostramos en la imagen anterior. Vamos a aplicar un buen CSS a nuestra primera
creación.
td /* Todas las celdas de una tabla... */
{
border: 1px solid black;; /* tendrá un borde de 1px */
}

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 1

De esta forma, el borde se aplica a cada una de las celdas de la tabla.

Afortunadamente, hay una propiedad específica Tablas CSS border-collapse, que vendría
a significar algo así como "dibujar los bordes juntos."

Esta propiedad puede tener dos valores:

 collapse: los bordes se trazan juntos, es el efecto que estamos buscando aquí;
 separate: se separarán los bordes (por defecto).

table
{
border-collapse: collapse; /* Los bordes de la tabla de trazan juntos
}
td
{
border: 1px solid black;
}

El encabezado de la fila
Ahora que ya tenemos lo que queremos, vamos a añadir la línea de cabecera de la tabla.
En el siguiente ejemplo, las cabeceras son "Nombre", "Edad" y "País". La línea de
cabecera se crea con un <tr> como lo hemos hecho hasta ahora, pero las células que
contiene son, esta vez enmarcado por las etiquetas <th> no <td>.

<table>
<tbody><tr>
<th>Nombre</th>
<th>Edad</th>
<th>Pais</th>
</tr>

<tr>
<td>Carmen</td>
<td>33</td>
<td>España</td>
</tr>
<tr>
<td>Michelle</td>
<td>26</td>
<td>Francia</td>
</tr>
</tbody></table>

El encabezado de la fila es muy fácil de reconocer por dos razones:

 las celdas son <th> en lugar de <td> normal;

 esta es la primera línea de la tabla.

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 2

Como el nombre de las celdas es un poco diferente para el encabezado, es buena idea
actualizar el CSS para indicar que deseamos aplicar un borde a las células normales y
también a las del encabezado.

table
{
border-collapse: collapse;
}
td, th /* Poner un borde alrededor de las celdas td y th */
{
border: 1px solid black;
}

Evidentemente, con CSS también podemos cambiar el color de fondo de las celdas o de
los textos que contiene, como hemos visto anteriormente.

Título de la tabla
Normalmente, una tabla debe tener un título. El título sirve para informar rápidamente al
visitante sobre el contenido de la tabla. Nuestro ejemplo es una lista de personas.

Para realizar esta tarea tenemos la etiqueta <caption>. Esta etiqueta se coloca en el
principio de la tabla justo antes de la cabecera.

<table>
<caption>Lista de asistentes al Congreso</caption>

<tbody><tr>
<th>Nombre</th>
<th>Edad</th>
<th>Pais</th>
</tr>

<tr>
<td>Carmen</td>
<td>33</td>
<td>España</td>
</tr>
<tr>
<td>Michelle</td>
<td>26</td>
<td>Francia</td>
</tr>
</tbody></table>

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 3

Tablas estructuradas
Hasta ahora hemos aprendidos a construir pequeñas tablas simples. Estas pequeñas
tablas son suficientes en la mayoría de los casos, pero en ocasiones será necesario hacer
las tablas más complejas.

Vamos a descubrir dos técnicas específicas:

 Para tablas grandes, se puede dividir en tres partes:

o Encabezado;
o Cuerpo de la tabla;
o Pie de la tabla.
 Para algunas tablas, puede ser necesario fusionar varias celdas juntas.

Dividir una tabla grande

Si la tabla es muy grande, sería buena idea cortarla en piezas. Por esto, disponemos de
etiquetas HTML que definen las tres "zonas" de la tabla:

 el encabezado (arriba): se define con las etiquetas <thead> </thead>

 el cuerpo (en el centro): se define con las etiquetas <tbody> </tbody>
 el pie de la tabla (abajo): se define con las etiquetas <tfoot> </tfoot>

¿Qué se coloca en la parte inferior de la tabla? En general, si se trata de una larga

tabla, se copiará el encabezado de la tabla. Así podremos saber a lo que se refiere cada
columna si tener que desplazarnos arriba. Básicamente,

Es un poco confuso, pero es aconsejable escribir las etiquetas en el siguiente orden:

1. <Thead>
2. <Tfoot>
3. <Tbody>

En el código, aparecerá el encabezado al principio, luego la definición del pie, y,

finalmente, la parte principal (<tbody>). El navegador se encargará de mostrar cada
elemento en el lugar correcto.

Aquí está el código para escribir para construir la tabla en tres partes:

<table>
<caption> Lista de Asistentes al Congreso </caption>

<thead> <!-- Encabezado de la Tabla -->

<tr>
<th> Nombre </th>
<th> Edad </th>

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 4

 <th> País </th>
</tr>
</thead>

<tfoot> <!-- Pie de la Tabla -->

<tr>
<th> Nombre </th>
<th> Edad </th>
<th> País </th>
</tr>
</tfoot>

<tbody> <!-- Cuerpo de la tabla -->

<tr>
<td> Carmen </td>
<td> 33 </td>
<td> España </td>
</tr>
<tr>
<td> Michelle </td>
<td> 26 </td>
<td> EE.UU. </td>
</tr>
<tr>
<td> François </td>
<td> 43 </td>
<td> Francia </td>
</tr>
<tr>
<td> Martine </td>
<td> 34 </td>
<td> Francia </td>
</tr>
<tr>
<td> Jonathan </td>
<td> 13 </td>
<td> Australia </td>
</tr>
<tr>
<td> Xu </td>
<td> 19 </td>
<td> China </td>
</tr>
</tbody>
</table>

No es obligatorio el uso de estas tres etiquetas (<thead>, <tbody>, <tfoot>) en todas las
tablas. De hecho, se utiliza especialmente si la tabla es lo suficientemente grande, y hay
que organizarla de forma más clara.

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 5

Fusión de Celdas
En algunas tablas complejas, tendrás que "fusionar" diversas celdas. En el siguiente
ejemplo podrás ver un ejemplo de celdas fusionadas.

Nombre del Viaje Ciudad de Salida Ciudad de Destino

Secretos de Africa Ciudad del Cabo Rabat

Maravillas de Asia Pekin Hong Kong

Soleado Mediterraneo Barcelona

Para la última fila, las celdas se fusionaron y se convirtieron en una sola. Este es
exactamente el efecto que estamos tratando de lograr. Para llevar a cabo una fusión, se
añade un atributo a la etiqueta <td>. Ten en cuenta que hay dos tipos de fusión:

 La fusión de columnas: esto es lo que he hecho en este ejemplo. La fusión se

lleva a cabo horizontalmente. Vamos a utilizar el atributo colspan.
 La fusión de filas: en este caso dos filas se agruparán. La fusión se realizará en
sentido vertical. Vamos a utilizar el atributo rowspan.

Como puedes imaginar, daremos valor al atributo (colspan o rowspan) indicando el

número de celdas de fusionar. En nuestro ejemplo, fusionamos dos celdas: Ciudad de
Salida y Ciudad de Destino. Vamos a escribir:

<td colspan = "2">

Este es el código HTML que me permite fusionar correspondiente a la tabla anterior:

<table>
<tbody><tr>
<th> Nombre del Viaje </th>
<th> Ciudad de Salida </th>
<th> Ciudad de Destino </th>
</tr>
<tr>
<td> Secretos de Africa </td>
<td> Ciudad del Cabo </td>
<td> Rabat </td>
</tr>
<tr>
<td> Maravillas de Asia </td>
<td> Pekin </td>

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 6

 <td> Hong Kong </td>
</tr>
<tr>
<td> Soleado Mediterraneo </td>
<td colspan="2"> Barcelona </td>
</tr>
</tbody></table>

Y para la fusión vertical con rowspan, ¿cómo lo hacemos?

Esto se complica un poco. Para nuestro ejemplo, vamos modificar la tabla un poco tal y
como te mostramos en la ilustración.

Nombre del Viaje Ciudad de Salida Ciudad de Destino

Secretos de Africa Ciudad del Cabo Rabat

Maravillas de Asia Pekin

Barcelona
Soleado Mediterraneo Barcelona

En este caso, el colspan ya no es adecuado, deberemos aplicar la etiqueta rowspan de la

siguiente forma:
<table>
<tbody><tr>
<th> Nombre del Viaje </th>
<th> Ciudad de Salida </th>
<th> Ciudad de Destino </th>
</tr>
<tr>
<td> Secretos de Africa </td>
<td> Ciudad del Cabo </td>
<td> Rabat </td>
</tr>
<tr>
<td> Maravillas de Asia </td>
<td> Pekin </td>
<td rowspan="2"> Barcelona </td>

</tr>
<tr>
<td> Soleado Mediterraneo </td>
<td> Barcelona </td>
</tr>
</tbody></table>
Ten en cuenta que puedes cambiar la alineación vertical de las celdas de la tabla de texto
con la propiedad vertical-align descubrimos en el capítulo sobre el diseño.

CURSO PROGRAMADOR WEB HTML5 CSS3 | TEMA 14 | 7