Manual HTML Aversitenteras

16 pasos sencillos para construir tu propia web




15. TABLAS - Segunda parte



.

bullet  Más atributos para las tablas:

Una vez que tenemos unas nociones básicas sobre como construir tablas en HTML vamos a profundizar un poco más acerca de este tema continuando con nuevos atributos para la etiqueta TABLE.

d) Height y Width: Estos atributos ya los utilizamos anteriormente para dimensionar imágenes y en este caso los utilizaremos para dimensionar la tabla.

Ejercicio:  Vamos a dimensionar una tabla en este ejercicio:

<TABLE Height="200" Width="450" border="2">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

Guardamos como ejercicio10.htm y veamos como a quedado nuestra tabla redimensionada.

tablas2

En este caso hemos ampliado el tamaño de la tabla a un valor de 200 pixeles de altura por 400 pixeles de anchura. Estos atributos admiten también valores en porcentaje, por lo que por ejemplo, podría asignar un valor de width="90%" y la tabla ocuparía un 90% del ancho de la pantalla.


e) Align.  Con este atributo se puede alinear la tabla respecto de la página. Toma los valores Left (por defecto), Center y Right.

Ejercicio:  En el mismo ejercicio10.htm añadimos el atributo align para centrar la tabla:

<TABLE Height="200" Width="450" border="2" align="center">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

Comprobamos el resultado:

tablas2

Hemos centrado la tabla.


f) Bgcolor.  Se utiliza para cambiar el color de fondo de la tabla.

Ejercicio:  En esta ocasión cambiaremos el color de fondo de la tabla del ejercicio10.htm:

<TABLE Height="200" Width="450" border="2" bgcolor="#FFFFCC">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

Nuevamente comprobamos el resultado:

tablas2

g) Background.  También se puede colocar una imagen de fondo a la tabla.

Ejercicio:  Para realizar el ejercicio es necesario disponer de un archivo de imagen y sustituir el valor de background por el valor de vuestro fichero, respetando las rutas relativas tal y como vimos en el tema de Imágenes - Primera parte:

<TABLE Height="200" Width="450" border="2" background="imagen.jpg">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

El resultado con nuestra imagen de nubes:

tablas2



anterior     indice     siguiente