Las tablas
Tablas
Las tablas son una forma de presentación de datos en cualquier documento. Pero dada su versatilidad y ante la falta de otro elemento más utiliable, es habitual utilizarlas para maquetar una página, y de esta manera distribuir texto y elmentos por toda ella.
Muchas páginas web son como páginas de revistas, y la forma más simple de emular las funciones de maquetación son las tablas.
Es aconsejable consultar como se manejan las tablas en la última versión de HTML (HTML 5), hay cambios profundos para este elemento
Una tabla no es más que una colección de filas (horizontales) y columnas (verticales) a cuyas interseccinoes le vamos a llamar celdas.
En las celdas podemos colocar textos o imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prácticamente similares a las que se podrían conseguir en páginas de revistas gracias a los programas de maquetación.
Definición
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <tr></tr>) y 3 columnas (3 pares <td></td> en cada fila) así:
<table>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
Este código se vería como esta tabla, en la que cada celda hemos escrito el numero de fila y de columna a la que pertenece.
| 1,1 | 1,2 | 1,3 |
| 2,1 | 2,2 | 2,3 |
Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:
| Parámetro | Uso |
|---|---|
width |
Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible. |
align |
Alinea la tabla a izquierda (left), derecha (right) o centro (center). |
border |
Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas. |
bordercolor |
Define el color de los bordes de la tabla |
cellspacing |
Espacio entre celdas, en pixels. |
cellpadding |
Borde interior de las celdas, en pixels. |
Si ahora, por ejemplo definimos la tabla anterior como <table border=1 width="50%" align="center"> veremos lo siguiente:
| 1,1 | 1,2 | 1,3 |
| 2,1 | 2,2 | 2,3 |
El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2.
Definir las filas
La definición de cada fila se inicia con la etiqueta <tr> y finaliza con </tr>, entre ellas colocaremos las celdas. Cada etiqueta tr tiene los siguientes atributos:
align |
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (left), derecha (right) o centro (center). |
valign |
Alinea el contenido de las celdas de la fila verticalmente arriba (top), abajo (bottom) o centro (middle). |
Definir las celdas
Ya sólo nos queda definir cada celda para lo que disponemos de las etiquetas <td> y <th>. Esta última es una celda especial que se verá destacada, como un título para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:
align |
Alinea el contenido de la celda horizontalmente a izquierda (left), derecha (right) o centro (center). |
valign |
Alinea el contenido de la celda verticalmente arriba (top), abajo (bottom) o centro (middle). |
width |
Anchura de la celda. Se puede expresar en pixels o en porcentaje,del ancho total de la tabla. |
nowrap |
Impide que, en el interior de la celda, se rompa la línea en varias lineas. |
colspan |
Número de celdas de una fila agrupadas. |
rowspan |
Número de celdas de la columna agrupadas. |
Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
<table border=1>
<tr>
<td colspan="2">1,1 y 1,2</td>
<td>1,3</td>
</tr>
<tr>
<td rowspan="2">2,1 y 3,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>
Este código corresponde con la tabla
| 1,1 y 1,2 | 1,3 | |
| 2,1 y 3,1 | 2,2 | 2,3 |
| 3,2 | 3,3 | |
Si te fijas cuando una celda con un colspan = "2" equivale a dos celdas a la hora de calcular el número de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical.
Encabezados
Ya hemos dicho que hay un tipo de celdas utilizable como encabezado o titular, pero la tabla al completo puede llevar un título, que irá en una zona fuera de cualquier celda o fila. Esta es la etiqueta caption. Su uso es muy simple como puedes ver en este ejemplo:
<table border=1>
<caption>
Números</caption>
...
</table>
| 1,1 y 1,2 | 1,3 | |
| 2,1 y 3,1 | 2,2 | 2,3 |
| 3,2 | 3,3 | |
Con el parámetro align, podemos controlar que el título aparezca arriba (por defecto top) o abajo de la tabla , con el valor bottom.