Una tabla básica
Las tablas se usan con
profusión en las páginas Web, muchas veces debido a que son
el único instrumento con el que se cuenta, para asegurarse
que las cosas estarán en su sitio. Para definir una tabla se
usan las etiquetas:
<TABLE> y </TABLE>
son las etiquetas donde está contenida la tabla
<TR> y </TR>
son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si
es una fila de cabecera)
<TD> y </TD> señalan
una celda.
La tabla se va definiendo
declarando una fila y a continuación las celdas que contiene
esa fila, luego otra fila y sus celadas, etc. No es necesario
que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más
sencilla que podemos hacer es la siguiente
Escribimos: |
Visualizamos |
<TABLE >
<TR>
<TD>1
</TD> <TD> 2 </TD>
</TR> <TR>
<TD>3
</TD> <TD> 4</TD>
</TR>
</TABLE> |
|
El resultado no es muy brillante, pero vamos a ir viendo
las distintas posibilidades que tenemos para mejorarlo.
Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica
el tamaño del borde en píxels, en este caso 4. Si no se
indica nada carece de borde
WIDTH="5" o
WIDTH="50%". Es el
ancho de la tabla, puede especificarse en valor absoluto (5
píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto
es 2
CELLPADDING="5". Es el espacio entre el contenido de las
celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right",
"center". Alinea la
tabla a la izquierda , derecha o en el centro.
Otro ejemplo
Escribimos: |
Visualizamos |
<TABLE
BORDER="3" CELLSPACING="5"
WIDTH="150">
<TR>
<TD>1
</TD> <TD> 2 </TD>
</TR> <TR>
<TD>3
</TD> <TD> 4</TD>
</TR>
</TABLE> |
|
Atributos de las etiquetas de fila y
celda
Las etiquetas que soportan las filas
y las celdas son
WIDTH="30". Ancho de toda la fila o celda. También se
puede dar en %
ALIGN=" left",
"right", "center". Alinea el contenido a la izquierda, derecha o
centro
VALIGN="top" ,
"middle" o "bottom". Alinea el contenido verticalmente arriba, en
medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la
celda o fila
COLSPAN=3. Especifica el número de columnas que
abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca
la columna
Tercer ejemplo.
Fijate en la etiqueta TH, que sustituye a TR, resalta su
contenido con negrita, por eso se usa para los títulos
Escribimos: |
Visualizamos |
<TABLE
BORDER="3" CELLSPACING="5"
WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el
título</TH>
<TR align="center">
<TD>Esta es la celda de la 1ª fila y de la 1ª
columna</TD>
<TD> Esta es de la 1ª fila y de la 2ª
columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto está con un fondo azul</TD>
<TD align="right"
valign="bottom">Y esto
también</TD>
</TR>
</TABLE> |
Este es el
título |
Esta es la celda de la 1ª
fila y de la 1ª columna |
Esta es de la 1ª fila y
de la 2ª columna |
Esto está con un fondo
azul |
Y esto también |
|
Como ves, se pueden ir modificando los comandos básicos
para obtener la tabla que deseemos.
Es frecuente no escribir las
etiquetas de cierre de fila y celda, los navegadores
presentan la tabla igual y nos ahorramos unas cuantas
pulsaciones de teclas.
Otros usos de las tablas
Como dijimos, las tablas
son a veces la mejor manera de asegurarnos que cada cosa
esté en su sitio. En esos casos toda la página es una tabla
invisible y los distintos elementos aparecen colocados en el
sitio exacto mediante el uso de filas, columnas, sus
dimensiones y alineamientos, el espacio entre las mismas,
etc.
Normalmente el ancho de esas tablas es de alrededor de 600
píxels para que la presentación sea similar en todos los
monitores. Hay muchos ejemplos de este uso, sobretodo en las
páginas diseñadas por profesionales, observa sino la de El
Pais o la de Microsoft
Como inconvenientes señalar que las tablas impiden el
deslizamiento uniforme de la ventana, cuando se desplaza con
la barra y el tamaño de la página aumenta considerablemente.
|