Tablas
La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página:<TABLE WIDTH=500>
</TABLE>
En este ejemplo de código, la anchura de la tabla está expresada en píxel (500). Si se elige esta opción, sea cual sea la resolución con la que venga vista la página, la medida de la tabla no sufrirá variaciones, es decir, en nuestro caso será siempre de 500 píxel.
No sucederá lo mismo, sin embargo, si decidimos expresar el tamaño mediante un porcentaje:
<TABLE WIDTH=50%>
</TABLE>
En este caso, la anchura de la tabla será distinta según sea la resolución del vídeo del usuario.
Así, por ejemplo, quien tenga un vídeo con resolución 640x480 verá una tabla de unos 320 píxel (porque hemos impostado un ancho de tabla equivalente al 50% de la página), mientras quien tenga un vídeo con resolución 800x600 verá una tabla de 400 píxel.
En nuestra opinión, es preferible mantener el control absoluto sobre la dimensión de la tabla utilizando, por tanto, la medición en píxel y no en tanto por ciento.
Ahora echemos un vistazo a la manera en que debe estructurarse una tabla. Para ello utilizaremos algunas imágenes:
Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:
<TABLE BORDER=1 WIDTH=300>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TABLE>
| prueba | prueba | prueba |
En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo:
Como podemos observar, hemos introducido una nueva marca <TR>, que es una especie de "salto" de fila dentro de la tabla. He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha:
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TR>
<TR>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
<TD WIDTH=100>
</TD>
</TR>
</TABLE>
| prueba | prueba | prueba |
| prueba | prueba | prueba |
El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel):
<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>
La colocación del texto y de las imágenes dentro de los distintos campos <TD> de la tabla puede ser modificada de varias maneras:
| <TABLE WIDTH=300 HEIGHT=200> <TD width=100VALIGN=TOP> prueba </TD> <TD WIDTH=100VALIGN=BOTTOM> prueba </TD> <TD WIDTH=100VALIGN=MIDDLE> prueba </TD> </TABLE> |
|
| <TABLE WIDTH=300 HEIGHT=200> <TD width=100 ALIGN=RIGHT> prueba </TD> <TD WIDTH=100 ALIGN=CENTER> prueba </TD> <TD WIDTH=100 ALIGN=LEFT> prueba </TD> </TABLE> |
|
Cada campo puede tener un color de fondo distinto de los otros e, incluso, un fondo como los de las páginas web normales (los fondos pueden ser sustituidos con GIF animadas):
| <TABLE WIDTH=300 HEIGHT=200> <TD width=100 BGCOLOR="red"> prueba </TD> <TD WIDTH=100BGCOLOR="yellow"> prueba </TD> <TD WIDTH=100BGCOLOR="gray"> prueba </TD> </TABLE> |
|
| <TABLE WIDTH=300 HEIGHT=230> <TD width=100 BACKGROUND="sfondo15.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo26.jpg"> prueba </TD> <TD WIDTH=100 BACKGROUND="sfondo61.jpg"> prueba </TD> </TABLE> |
|
TABLA 1 A UN LADO 2 AL OTRO e-e
<table style="width:100%">
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS):
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title> </head> <body> <table border="2px"> <!-- Lo cambiaremos por CSS --> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> </body> </html> |
<table style="width:100%">
<tbody>
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</tbody>
</table>
Gráficamente:
