Manual HTML Aversitenteras

16 pasos sencillos para construir tu propia web




14. TABLAS - Primera parte



.

bullet  Organizando los contenidos:

Las tablas sirven para ordenar contenidos en un número determinado de celdas y de una manera estructurada en filas y columnas. El poder gestionar los espacios optimizando la organización de contenidos confiere a las tablas una elevada importancia en el diseño web.

Las tablas se construyen con utilizando las siguientes etiquetas:

La tabla viene delimitada por las etiquetas <TABLE> y </TABLE>. Para definir las filas utilizaremos las etiquetas <TR> y </TR>. Las columnas incluidas dentro de cada fila se definirán con las etiquetas <TD> y </TD>.

Antes de empezar a hacer ejercicios echemos un vistazo a los atributos que podemos asociar con la etiqueta TABLE:

a) Border: Este atributo nos permite indicarle un valor de grosor al marco de la tabla. En ocasiones será conveniente que no se vea ningún borde en la tabla ya que solo se utilizara la tabla con fines organizativos, en esos casos le daremos el valor 0 a este atributo.

Ejercicio:  Veamos un ejemplo de tabla en este ejercicio, donde podemos observar como definimos la tabla <TABLE> luego la fila <TR> y luego las celdas <TD> que contiene esa fila y también el uso del atributo border:

<TABLE border="2">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

Guardamos como ejercicio9.htm y comprobamos el resultado.

tablas

En el resultado podemos comprobar que hemos realizado una tabla sencilla de dos filas por dos columnas. Para poder estructurar contenidos debemos aprender más posibilidades de configuración que vienen dadas por atributos.


b) Bordercolor.  Con este atributo podemos modificar el color de los bordes de la tabla.

Ejercicio:  Modifiquemos el color de borde del ejercicio9.htm:

<TABLE border="2" bordercolor="Darkgoldenrod">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>


tablas

Si pinchamos sobre el último link veremos que nos lleva a la página de google.


c) Cellpadding y Cellspacing .  Modificando Cellpadding estableceremos la distancia desde la letra hasta el borde del marco de la tabla en pixeles y en cuanto al atributo Cellspacing nos permite poner un valor a la distancia entre los cantos del marco de la tabla también en pixeles.

Ejercicio:  Volvemos a modificar parámetros en ejercicio9.htm:

<TABLE border="2" cellpadding="15" cellspacing="6">
<TR>
<TD>FILA1COL1</TD>
<TD>FILA1COL2</TD>
</TR>
<TR>
<TD>FILA2COL1</TD>
<TD>FILA2COL2</TD>
</TR>
</TABLE>

Resultado:

tablas



anterior     indice     siguiente