Las tablas son utilizadas en HTML, no sólo para presentar información en forma de filas y columnas, sino también para maquetar páginas, ya que es posible conseguir diseños que hasta ahora eran difíciles de conseguir por otros medios.
Sin embargo, con los recursos de posicionamiento que proporcionan las hojas de estilo, este último uso de las tablas está desapareciendo poco a poco. De hecho, las últimas especificaciones de HTML recomiendan no usar las tablas para este cometido ya que pueden presentar problemas de accesibilidad (en navegadores para personas ciegas por ejemplo).
Crear una tabla en HTML
Los elementos básicos para construir una tabla en HTML son:
- table. Que sirve para englobar toda la tabla.
- tr. Que identifica una fila y actúa como un contenedor de celdas.
- th. Que sirve para definir una celda que contendrá una etiqueta de cabecera.
- td. Que sirve pare dafinir una celda donde se incluirán los datos.
Veamos un primer ejemplo:
| Columna 1 | Columna 2 |
|---|---|
| Fila 1. Dato 1 | Fila 1. Dato 2 |
| Fila 2. Dato 1 | Fila 2. Dato 2 |
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>Fila 1. Dato 1</td>
<td>Fila 1. Dato 2</td>
</tr>
<tr>
<td>Fila 2. Dato 1</td>
<td>Fila 2. Dato 2</td>
</tr>
</table>
El navegador ajustará automáticamente el ancho total de la tabla y el de cada una de las celdas.
Expandir celdas
Podemos expandir celdas para que ocupen varias columnas con el atributo ‘colspan‘, cuyo valor será un entero que indica el número de columnas que ocupará la celda. De igual forma, podemos conseguir que una celda ocupe varias filas utilizando el atributo ‘rowspan‘.
| F1.D1 | F1.D2 | F1.D3 |
| F2.D2 | ||
| F3.D2 | F3.D3 | |
<table>
<tr>
<td rowspan="3">F1.D1</td>
<td>F1.D2</td>
<td>F1.D3</td>
</tr>
<tr>
<td colspan="2">F2.D1</td>
</tr>
<tr>
<td>F3.D2</td>
<td>F3.D3</td>
</tr>
</table>
Bordes y márgenes
Disponemos de los tres atributos siguientes del elemento ‘table‘ que afectan a toda la tabla:
- ‘border‘. Indica el ancho en píxeles del borde de la tabla y de la rejilla interior. Si le ponemos valor 0, el borde no se muestra.
- ‘cellspacing‘. Indica el espacio (en píxeles también) que se mantendrá entre cada celda y entre los bordes de la tabla.
- ‘cellpadding‘. Indica el espacio entre el contenido y los bordes de cada celda.
| F1.D1 | F1.D2 |
| F3.D1 | F3.D2 |
<table border="5" cellpadding="6"
cellspacing="7">
<tr><td>F1.D1</td>
<td>F1.D2</td></tr>
<tr><td>F3.D1</td>
<td>F3.D2</td></tr>
</table>
Color de fondo
Disponemos del atributo ‘bgcolor‘, que podemos aplicar los elementos ‘table‘, ‘tr‘, ‘th‘ y ‘td‘ para modificar el color de fondo de toda la tabla, de toda una fila, o de celdas individuales, ya sean de cabecera o de datos. El valor del atributo ‘bgcolor‘ será el de un color en notación hexadecimal, precedido por el símbolo # (almohadilla).
| F1.D1 | F1.D2 |
| F2.D1 | F2.D2 |
<table bgcolor="#CC0000"> <tr bgcolor="#00AA00"><td>F1.D1</td><td>F1.D2</td></tr> <tr><td>F2.D1</td><td bgcolor="#0088FF">F2.D2</td></tr> </table>
Alineado de los datos
Por defecto, el contenido de todas las celdas de una tabla en HTML se alinea horizontalmente a la izquierda. Podemos cambiar la alineación horizontal utilizando el atributo ‘align‘ sobre los elementos ‘tr‘ (para aplicarlo a toda una fila) o ‘td‘ (para aplicarlo sólo a una celda) con los valores right, left o center.
Para modificar la alineación vertical, podemos utilizar el atributo ‘valign‘ también sobre los elementos ‘tr‘ o ‘td‘ y con los valores top, middle o bottom (arriba, centro ó abajo).
Ancho y alto
Podemos controlar el ancho de toda una tabla utilizando el atributo ‘width‘ e indicando un número fijo en píxeles o en términos relativos con un porcentaje (por ejemplo, el valor "100%" indica que se utilizará todo el ancho disponible). De esta forma, el navegador ajustará automáticamente el ancho de las columnas.
También podemos utilizar el anterior atributo de igual forma para modificar individualmente el ancho de las celdas y el atributo ‘height‘ (indicando su valor en píxeles) para modificar el alto.