Introducción a XHTML

Tablas

Al igual que las listas, las tablas son componentes dedicados a mejorar la visualización de datos tabulados. En este apartado veremos sus principios básicos.

  1. Tablas básicas
  2. Título, cabecera y pie de tabla
  3. Dando formato a la tabla
  4. Uniones de celdas

1. Tablas básicas

Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc. La etiqueta que se utiliza para delimitar una tabla es <table>...</table>.

Para escribir el contenido de la tabla se crea un bloque <tbody>...</tbody> y, dentro de él, cada fila se especifica con la etiqueta <tr>...</tr> y, dentro de ella, cada celda se especifica con la etiqueta <td>...</td>. A su vez, la etiqueta <th>...</th> se usa para que la celda tenga formato de cabecera:

<table>
<tbody>
<tr><th>Nombre</th><th>Profesión</th><th>Edad</th></tr>
<tr><td>Pedro</td><td>arquitecto</td><td>34</td></tr>
<tr><td>Javier</td><td>albañil</td><td>30</td></tr>
<tr><td>Luis</td><td>fontanero</td><td>43</td></tr>
<tr><td>Mariano</td><td>chispas</td><td>39</td></tr>
</tbody>
</table>

El usuario verá:

NombreProfesiónEdad
Pedroarquitecto34
Javieralbañil30
Luisfontanero43
Marianochispas39

2. Título, cabecera y pie de tabla

Adicionalmente podemos poner un título de a la tabla. Para ello podemos usar la etiqueta <caption>...</caption>. Esta etiqueta (opcional), si se usa, debe preceder a cualquier otra dentro de la tabla.

Para facilitar al agente la tarea presentar las tablas en distintas páginas, disponemos de las etiquetas <thead>...</thead> y <tfoot>...</tfoot> para definir las filas que forman parte del encabezado y las que forman parte del pie de la tabla. Estas etiquetas deben preceder a <tbody>.

<table>
<caption>Cifra neta de negocio 2011 (&#8364;)</caption>
<thead>
<tr><th>Nombre</th><th>Ventas</th></tr>
</thead>
<tfoot>
<tr><td>Total</td><td>4.110.999</td></tr>
</tfoot>
<tbody>
<tr><td>Servicios directos</td><td>2.345.567</td></tr>
<tr><td>Servicios subcontratados</td><td>1.765.432</td></tr>
</tbody>
</table>

El usuario verá:

Cifra neta de negocio 2011 (€)
NombreVentas
Total4.110.999
Servicios directos2.345.567
Servicios subcontratados1.765.432

3. Dando formato a la tabla

El aspecto que presenta la tabla se puede indicar de diferentes en función de qué se quiera personalizar: la tabla en conjunto, una columna, una fila o una celda en concreto.

3.1. Borde de la tabla

La presencia de bordes en la tabla se especifica con el atributo border de la etiqueta <table>, donde debemos indicar el número de pixels que deseamos tenga el borde. Así que tendremos algo como:

<table border="1">...</table>

3.2. Alineando el contenido de las celdas

Las etiquetas tr, td y th admiten dos atributos de centrado: align para la horizontal y valign para la alineación vertical; donde los valores que pueden tomar son:

align
right (derecha), left (izquierda), center (centrado horizontal), justify (alineación completa -izquierda y derecha-) y char (entorno al carácter indicado mediante el atributo char).
valign
top (superior), bottom (inferior), middle (centrado vertical) y baseline (la línea base de todas las celdas de la misma fila a la misma altura).

Podemos utilizar todo esto para mejorar el aspecto general de la tabla anterior. Por ejemplo, para obtener esto:

Cifra neta de negocio 2011
(miles de €)
NombreVentas
Total3.111,0
Servicios directos2.345,6
Servicios subcontratados765,4

Debemos escribir:

<table border="1">
<caption>Cifra neta de negocio 2011<br />(miles de &#8364;)</caption>
<thead>
<tr><th>Nombre/th><th>Ventas</th></tr>
</thead>
<tfoot>
<tr><td>Total</td><td align="right">3.111,0</td></tr>
</tfoot>
<tbody>
<tr><td>Servicios directos</td><td align="right">2.345,6</td></tr>
<tr><td>Servicios subcontratados</td><td align="right">765,4</td></tr>
</tbody>
</table>

4. Uniones de celdas

En ocasiones podemos desear que una celda es extienda a otras, o lo que es lo mismo, se defina como la unión de varias posiciones de la tabla. Para ello se puede usar los atributos colspan y rowspan de las etiquetas <td> y <th>. Por ejemplo:

<table border="1">
<caption>Ejemplo de unión de celdas</caption>
<thead>
<tr><th rowspan="2"></th><th colspan="2">Valores</th><th rowspan="2">Precio</th></tr>
<tr><th>Peso</th><th>Potencia</th></tr>
</thead>
<tbody>
<tr align="center"><th>Modelo 1</th><td>890</td><td>70</td><td>995</td></tr>
<tr align="center"><th>Modelo 2</th><td>1200</td><td>110</td><td>2245</td></tr>
</tbody>
</table>

El usuario verá:

Ejemplo de unión de celdas
ValoresPrecio
PesoPotencia
Modelo 189070995
Modelo 212001102245
Copyright © 2011-2012 Mariano Martín Nevado. Términos de uso.