© Jordi González Boada
Tablas
En este tema no se va a explicar todo lo referente a las tablas, sino sólo lo que he considerado más importante.
Una tabla de 1 x 1
La tabla más simple que se puede hacer es una tabla de una fila y una columna, su sintaxis es la siguiente:
<table>
<tr>
<td>
Contenido
</td>
</tr>
</table>
|
Inicio tabla
Inicio fila
Inicio columna
Contenido
Fin columna
Fin fila
Fin tabla
|
Como se puede observar el código que determina las columnas se encuentra dentro del que determina las filas por lo que resulta más fácil añadir nuevas filas que columnas.
Añadiendo casillas
Para añadir una nueva fila al ejemplo anterior vasta con añadir después de la etiqueta tr el código:
<tr>
<td>
Contenido
</td>
</tr>
Con lo que se obtiene:
<html>
<head>
<title>
fig07_01
</title>
</head>
<body>
<table border="1">
<tr>
<td>
Fila número 1
</td>
</tr>
<tr>
<td>
Fila número 2
</td>
</tr>
</table>
</body>
</html>
fig07_01 Una tabla con dos filas
Si al ejemplo inicial le queremos añadir una columna como sólo hay una fila bastaría con añadir después de la etiqueta td el código:
<td>
Contenido
</td>
En cambio en el ejemplo de la figura fig07_01 abría que añadir el código en ambas filas:
<html>
<head>
<title>
fig07_02
</title>
</head>
<body>
<table border="1">
<tr>
<td>
Fila número 1, columna número 1
</td>
<td>
Fila número 1, columna número 2
</td>
</tr>
<tr>
<td>
Fila número 2, columna número 1
</td>
<td>
Fila número 2, columna número 2
</td>
</tr>
</table>
</body>
</html>
fig07_02 Una tabla con dos filas y dos columnas
Después de lo visto hasta ahora se puede decir:
- La tabla queda definida entre la etiqueta <table>...</table>
- Las líneas de las tablas quedan definidas entre la etiqueta <tr>...</tr>
- Las columnas que hay en una fila de una tabla quedan definidas entre la etiqueta <td>...</td>
Las etiquetas <td>...</td> pueden sustituirse por las etiquetas <th>...</th> que devuelven el contenido de la celda en negrita y centrado; útil para filas o columnas que contienen títulos, celdas de cabecera.
Algunos atributos de las tablas
Los atributos más utilizados son:
- sumary: útil para navegadores no visuales (por ejemplo para invidentes). En este atributo se puede explicar el propósito y la estructura de la tabla.
- width: especifica la anchura de la tabla (en píxeles -anchura absoluta- o en porcentaje respecto a la anchura de la ventana del navegador -anchura relativa, depende de la resolución del monitor utilizado y del tamaño de la ventana del navegador cuando este no está maximizado-).
- border: especifica el ancho del borde de la tabla, en píxeles.
- cellspacing: espaciado, en píxeles, entre las celdas.
- cellpadding: distancia entre el borde de las celdas y el contenido de las mismas, en píxeles.
- align: alineación de la tabla dentro de la página. Valores posibles: left (izquierda), center (centrada) y right (derecha). Este atributo a sido desaprobado en favor de CSS.
- bgcolor: color del fondo de la tabla. Este atributo a sido desaprobado en favor de CSS. La definición de los colores se hace igual que en el atributo color del texto.
<html>
<head>
<title>
fig07_03
</title>
</head>
<body>
<table align="center" cellspacing="5" cellpadding="10"
border="5" width="60%" bgColor="#c4ffff"
borderColor="#a00000" sumary="Este es el sumario de la
tabla, en el se explicar el propósito y la estructura
de la misma.">
<tr>
<td bgcolor="#d9fed3" width="50%">
Fila número 1, columna número 1
</td>
<td bgcolor="#d9fed3">
Fila número 1, columna número 2
</td>
<td bgcolor="#d9fed3">
Fila número 1, columna número 3
</td>
</tr>
<tr>
<td bgcolor="#d9fed3">
Fila número 2, columna número 1
</td>
<td>
Fila número 2, columna número 2
</td>
<td>
Fila número 2, columna número 3
</td>
</tr>
</table>
</body>
</html>
fig07_03 Una tabla con algunos de los atributos más utilizados.
Como se puede observar en el ejemplo el atributo bgcolor puede afectar a una celda o a toda la tabla.
En el ejemplo también se ha incluido el atributo borderColor que determina el color del borde.
Otros atributos son:
- frame: borde exterior. Este atributo especifica cuales de los lados que rodean la tabla serán visibles. Posibles valores:
- void: ninguno. Valor por defecto.
- above: sólo el lado superior.
- below: sólo el lado inferior.
- hsides: sólo los lados superior e inferior.
- lhs: sólo el lado izquierdo.
- rhs: sólo el lado derecho.
- vsides: sólo los lados derecho e izquierdo.
- box: los cuatro lados.
- border: los cuatro lados.
- rules: bordes interiores. Este atributo especifica que reglas (líneas) aparecerán entre las celdas de la tabla. Que estas líneas aparezcan o no dependerá del navegador utilizado. Posibles valores:
- none: ninguna. Valor por defecto.
- groups: las reglas aparecerán sólo entre grupos de líneas de la tabla (thead, tfoot y tbody) y grupos de columnas de la tabla (colgroup y col).
- rows: las reglas aparecerán sólo entre las líneas de la tabla.
- cols: las reglas aparecerán sólo entre las columnas de la tabla.
- all: las reglas aparecerán entre todas las líneas y columnas de la tabla.
- height: especifica el alto mínimo de la tabla, aunque el contenido no ocupe toda esa altura.
- background: permite especificar una imagen como fondo de tabla o casilla, véase imágenes como fondos de página.
Unir celdas de una tabla
Las celdas pueden ocupar varias filas o columnas. El número de filas o columnas ocupadas por una celda está determinado por los atributos rowspan y colspan aplicados a las etiquetas th y td. Dos ejemplos:
El código:
<table border="1">
<tr><td> 1 <td rowspan="2"> 2 <td> 3
<tr><td> 4 <td> 6
<tr><td> 7 <td> 8 <td> 9
</table>
Da como resultado:
El código:
<table border="1">
<tr><td> 1 <td> 2 <td> 3
<tr><td colspan="2"> 4 <td> 6
<tr><td> 7 <td> 8 <td> 9
</table>
Da como resultado:
Además de ver como se pueden unir las celdas de una tabla con los dos ejemplo de arriba se ha visto otra cosa: no es necesario especificar el final de las etiquetas tr, td y th; el inicio de otra etiqueta indica el fin de estas. Por contra sí es obligado especificar el final de la etiqueta table.
Otro ejemplo:
<html>
<head>
<title>
fig07_04
</title>
</head>
<body>
<table border="1" summary="Esta tabla presenta
la altura media de los españoles
en función del sexo y su supuesto
peso ideal. Los porcentajes son
inventados.">
<caption>Altura media y peso óptimo promedio</caption>
<tr>
<th rowspan="2">
<th colspan="2">Promedio
<th rowspan="2">% población
<tr>
<th>Altura<br>(m)
<th>Peso<br>(kg)
<tr>
<th>Hombres
<td>1,73
<td>73,2
<td>2,3%
<tr>
<th>Mujeres
<td>1,64
<td>60,7
<td>2,4%
</table>
</body>
</html>
fig07_04 Una tabla con celdas unidas.
Como se puede observar en el ejemplo, como en otras ocasiones, hemos incluido una nueva etiqueta <caption>...</caption> con la que se puede incluir un título para la tabla.
Alineación horizontal y vertical del contenido
Los siguientes atributos se pueden utilizar en diferentes elementos de las tablas, como sucedía con los atributos vistos más arriba.
El texto se puede alinear horizontalmente mediante el atributo align, que puede tener los siguientes valores:
- left: alineación al la izquierda; es el valor por defecto.
- center: alineación al centro.
- right: alineación a la derecha.
- justify: alineación tanto a derecha como a izquierda.
- char: el texto se alinea alrededor de un carácter específico. No todos los navegadores lo soportan.
Algunos ejemplos de su uso se pueden ver en fig07_05.
Como se ha visto en el ejemplo anterior el texto por defecto se alinea verticalmente en el centro de la celda, así que si esto no es lo que se quiere se deberá alinear verticalmente mediante el atributo valign, que puede tener los siguientes valores:
- top: el contenido se sitúa pegado a la parte superior de la celda.
- middle: el contenido de la celda se sitúa centrado verticalmente; es el valor por defecto.
- bottom: el contenido se sitúa pegado a la parte inferior de la celda.
- baseline.
Algunos ejemplos de su uso se pueden ver en fig07_06.
