Crea tu web, tutor html, css

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.

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.

HTML 5 aconseja usar la tabla tan solo para datos y permite maquetar las páginas mediante bloques div y los estilos CSS

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.

Las tablas tienen un problema en el diseño responsive dado que las celdas ocupan posiciones fijas que no deben cambiarse. Los bloques DIV salvan este obstáculo

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 Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
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.

En el diseño respnsive una tabla puede ser más ancha que la pantalla, por loq ue es imprescindible el uso de un scroll horizontal

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>
Números
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.