Actualizado el 14-01-2007
versión para imprimir
Tablas ( I )
Una tabla no es sino un sistema de distribución de información en celdas, que a su vez se organizan en filas y columnas. Mediante tablas podemos mostrar ordenadamente datos de todo tipo. Pero en html su utilidad no solamente es esa.
Las etiquetas html para tablas son muy flexibles, permitiendo diseñar tablas
complejas, de cualquier tamaño y con cualquier contenido. Diseñando una tabla del mismo tamaño que nuestra página, y metiendo dentro de ella todos los elementos de la misma (cabeceras, gráficos, texto) hemos podido acceder a unas posibilidades de maquetación impensables con las etiquetas html usuales, posibilidades que solo en un futuro podrán ser sustituidas por normas de estilo.
estructura de una tabla en html
Básicamente necesitamos una pareja de etiquetas que muestren donde comienza y donde acaba la tabla; una pareja de etiquetas que indiquen el comienzo y fin de cada fila de datos, y una pareja de etiquetas que identifiquen cada celda de datos en esa fila. En html las tablas se construyen indicando el número de filas, y las celdas dentro de cada fila. siendo innecesario especificar las columnas:
<table></table>
indica el comienzo y fin de la tabla
<tr></tr>
indica el comienzo y fin de una fila
<td></td>
indica el comienzo y fin de una celda
en una fila
| columna 1 |
columna 2 |
columna 3 |
| fila 1 |
| celda(1,1) |
celda(1,2) |
celda(1,2) |
| celda(2,1) |
celda(2,2) |
celda(2,3) |
| celda(3,1) |
celda(3,2) |
celda(3,3) | |
| fila 2 |
| fila 3 |
O lo que es lo mismo, con las
etiquetas que hemos visto:
| <table> | | <tr> | | <td>...</td> | <td>...</td> | <td>...</td> | | <td>...</td> | <td>...</td> | <td>...</td> | | <td>...</td> | <td>...</td> | <td>...</td> |
| </tr> | | <tr> | </tr> | | <tr> | </tr> | | </table> |
| |
Vamos a desarrollar nuestra tabla poco a poco. Supongamos que queremos hacer una tabla con numeros de teléfonos ... comenzaremos creando la tabla y abriendo una casilla para el primer nombre. Fijate que el atributo border, en desuso para otros elementos html, puede usarse con table:
<table border="1"><tr><td> pepe pérez </td></tr></table>
y aqui el resultado:
donde podemos destacar varias
cosas: la tabla que hemos diseñado tiene una sola fila horizontal, y solo una celda en esa fila. Observa el anidamiento de las etiquetas (tabla-fila-celda).
Fíjate tambien que no ha hecho falta indicar el tamaño de la tabla: se ajusta automaticamente a su contenido. Las etiquetas
<table> </table> son formateadoras, es decir, incluyen
un salto de linea antes y despues; en este caso hemos añadido a la etiqueta
el atributo border= asignandole un valor "1",
con el fin de que puedas ver los bordes de la tabla y comprender su diseño. Pero
es posible eliminar el borde, simplemente quitando el atributo
border o asignandole valor "0"
Insertemos ahora una
segunda celda, donde escribiremos el número de teléfono:
<table border="1">
<tr>
<td>pepe perez</td>
<td>91 - 400 00 00</td>
</tr>
</table>
| pepe perez |
91 - 400 00 00 |
Atributos generales: anchura
Acabamos de ver que la tabla automaticamente se dimensiona segun el tamaño
del elemento que contenga. Pero tambien podemos especificar la anchura con el
atributo width. Veamoslo:
<table border="1" width="100%">
<tr>
<td>pepe perez</td><td>91 400 00 00</td>
</tr>
</table>
y obtenemos el siguiente resultado:
y a continuación la misma tabla con anchura (width) de 80%, 60% y
40%:
Tambien podemos asignar anchura a cada una de las celdas:
<table border="1">
<tr>
<td width="30%">pepe perez</td>
<td width="70%">91 400 00 00</td>
</tr>
</table>
<table border="1">
<tr>
<td width="50%">pepe perez</td>
<td width="50%">91 400 00 00</td>
</tr>
</table>
y naturalmente, combinar especificación de anchura de la tabla, y de cada una
de las celdas:
<table border="1" width="80%">
<tr>
<td width="50%">pepe perez</td>
<td width="50%">91 400 00 00</td>
</tr>
</table>
Hasta ahora la anchura la hemos especificado en porcentaje sobre la anchura
de la tabla. Tambien podemos especificarla en pixels
<table border="1" width="350">
<tr>
<td width="100">pepe perez</td>
<td width="250">91 400 00 00</td>
</tr>
</table>
Atributos generales: bordes de la tabla
Tambien podemos especificar el borde de la tabla asignando diversos valores
al atributo border="". Vemos ahora la ultima tabla con
bordes valor 10, 5, 1 y 0 (cero es el valor por defecto si no se especifica
nada:
Muy bien, y ahora antes de seguir con los atributos generales de la etiqueta
<table>incluyamos otra fila:
<table border="1" width="350">
<tr>
<td width="100">pepe perez</td>
<td width="250">91 400 00 00</td>
</tr>
<tr><td>paco lopez</td>
<td>91 411 11 11</td></tr>
</table>
es decir, abrimos otra fila con una pareja de etiquetas
<tr></tr> y dentro de ellas dos celdas, con las
etiquetas <td></td>. El resultado:
| pepe perez |
91 400 00 00 |
| paco lopez |
91 411 11 11 |
observa que no hemos especificado longitud ni para la segunda fila ni para
sus celdas, tomando las medidas de arriba.
Atributos generales: alineando la tabla
Podemos alinear la tabla con el atributo ya conocido align= y
sus valores left, right, center y justify [En desuso]. En lugar de align podemos usar reglas de estilo, teniendo en cuenta que si las aplicamos en la etiqueta table lo que alineamos es el contenido de la tabla. Si queremos alinear la propia tabla en el conjunto de la tabla, aplicamos el estilo a la etiqueta contenedora de la tabla:
tabla alineada a la izquierda
usando float:left |
tabla alineada a la derecha
usando float:right |
tabla alineada al centro
usando margin-left:auto; margin-right:auto; |
Nota que hasta aqui hemos hablado de alinear la tabla en relación con la página. Si lo que queremos es alinear el contenido de la tabla dentro de esta (es decir, a izquierda o derecha de cada celda, arriba abajo o centrado, aun podemos usar los atributos align para la alineacion horizontal (valores left, center, right, justify) o valign para el centrado vertical (valores top, middle, bottom)
Atributos generales: cellpadding y cellspacing
CELLPADDING es la cantidad de espacio en blanco entre los datos de
cada celda y el borde de la tabla. Por defecto, y si no se especifica, tiene un
valor de 1.
CELLSPACING es la cantidad de espacio en blanco inserto
entre cada una de las celdas de datos. De no especificarse, adopta por defecto
un valor 2.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>cellpading</td>
<td>espacio entre datos y borde</td>
</tr>
<tr>
<td>cellspacing</td>
<td>espacio entre celdas</td>
</tr>
</table>
| cellpading |
espacio entre datos y borde |
| cellspacing |
espacio entre celdas |
<table border="1" cellpadding="25" cellspacing="15">
<tr>
<td>cellpading</td>
<td>espacio entre datos y borde</td>
</tr>
<tr>
<td>cellspacing</td>
<td>espacio entre celdas</td>
</tr>
</table>
| cellpading |
espacio entre datos y borde |
| cellspacing |
espacio entre celdas |
Y la misma tabla con los valores cellpadding y cellspacing sin especificar
(valores por defecto:
| cellpading |
espacio entre datos y borde |
| cellspacing |
espacio entre celdas |
Atributos de table: altura
mediante el atributo height= podemos especificar la altura
exacta de cada celda, bien en pixels, bien en porcentaje. [en desuso]. Alternativa CSS: style="height:nnpx";
<table border="1" >
<tr>
<td height="38">heigth=""</td>
<td>altura de la tabla</td>
</tr>
</table>
| style="height:40px" |
altura de la celda |
atributos de tabla: color
otra vez en terreno pantanoso. Estos atributos también estan en desuso, por lo que se recomienda acudir a las reglas de estilo, mucho mas flexibles
Con la propiedad background-color especificamos el fondo de la tabla. Con caracter general, siempre que se indica un color de fondo es mejor indicar también un color de primer plano. Hagamos una tabla azul, con texto amarillo:
| el color de | fondo: azul |
| texto color: | amarillo |
Podemos añadir un borde rojo de 3 px con la propiedad de estilo borde, y incluso combinarla con el atributo html borde:
| el color de | fondo: azul |
| texto color: | amarillo |
| el color de | fondo: azul |
| texto color: | amarillo |
Podemos dar un poco de amplitud con cellpadding y cellspacing
| el color de | fondo: azul |
| texto color: | amarillo |
| el color de | fondo: azul |
| texto color: | amarillo |
Podemos asignar fondos o colores a celdas individuales:
| el color de | fondo: azul |
| texto color: | amarillo |
O a toda la fila:
| el color de | fondo: azul |
| texto color: | amarillo |
O establecer border para celdas individuales (o lados de ellas):
| el color de | fondo: azul |
| texto color: | amarillo |
títulos y cabeceras de la tabla
Mediante las etiquetas <caption></caption>
podemos especificar el título de la tabla. Admite un atributo,
align="", con dos valores, "top" y "bottom",
segun queramos que el título se visualice como una linea de texto encima o
debajo de la tabla:
Caption align left
| a |
b |
c |
| d |
e |
f | |
Caption align right
| a |
b |
c |
| d |
e |
f | |
Caption align top
| a |
b |
c |
| d |
e |
f | |
Caption align bottom
| a |
b |
c |
| d |
e |
f | |
<th></th>:
ya hemos visto que las celdas o unidades de la tabla se definen con etiquetas
<td></td>. La etiqueta <th> (table
header) sirve para especificar que se trata de una celda "cabecera". Su texto se
visualizará tipicamente centrado y en negrita:
<table width="40%" align="center" border="1">
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th></tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td></tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td></tr></table>
| head1 |
head2 |
head3 |
| a |
b |
c |
| d |
e |
f |
Su uso es igual que el de cualquier otra
celda td, asi que no hay problema en tener cabeceras laterales:
| head1 |
1 |
2 |
3 |
| head2 |
4 |
5 |
6 |
| head3 |
7 |
8 |
9 |