Tablas
Las tablas nos permiten representar cualquier elemento
de nuestra página (texto, listas, imagenes, etc...) en diferentes filas y columnas separadas entre si.
Es una herramienta muy util para "ordenar"
contenidos de distintas partes de nuestra página. La tabla se define mediante
la directiva <TABLE></TABLE>.
Los parámetros opcionales de esta directiva son :
border = num.
Indica el
ancho del borde de la tabla en puntos.
cellspacing = num
Indica el
espacio en puntos que separa las celdas que estan
dentro de la tabla.
cellpadding = num
Indica el
espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = num
ó %
Indica la
anchura de la tabla en puntos o en porcentaje en función del ancho de la
ventana del visor. Si no se indica este parámetro, el ancho se adecuará al
tamaño de los contenidos de las celdas.
height = num
ó %
Indica la
altura de la tabla en puntos o en porcentaje en función del alto de la ventana
del visor. Si no se indica este parámetro, la altura se adecuará a la altura de
los contenidos de las celdas.
bgcolor = codigo
de color
Especifica el
color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se
utilizan las directivas <TD>
y <TH>. <TD> indica una celda normal, y <TH> indica una celda de
"cabecera", es decir, el contenido será resaltado en negrita y en un
tamaño ligeramente superior al normal. Los parámetros opcionales de ambas
directivas son :
align = LEFT / CENTER / RIGHT /
JUSTIFY
Indica como se
debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha
(RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM
Indica la
alineación vertical del contenido de la celda, en la parte superior (TOP), en
la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num
Indica el
número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan = num
Indica el
número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
width = num
ó %
Indica la
anchura de la columna en puntos o en porcentaje en función del ancho de la
ventana del visor. Si no se indica este parámetro, el ancho se adecuará al
tamaño de los contenidos.
bgcolor = codigo
de color
Especifica el
color de fondo del elemento de la Tabla.
Para indicar
que acaba una fila de celdas se utiliza la directiva <TR>. A continuación mostraremos un ejemplo de una tabla
que contiene solo texto. Como se indicó anteriormente el contenido de las
celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...
Ejemplo :
<TABLE border = 4 cellspacing = 4 cellpadding = 4
width =80%>
<TH
align = center>Buscadores
<TH
align = center colspan =
2>Otros
Links
<TR>
<TD
align = LEFT>Yahoo
<TD
align = LEFT>Microsoft
<TD
align = LEFT>IBM
<TR>
<TD
align = LEFT>Infoseek
<TD
align = LEFT>Apple
<TD
align = LEFT>Digital
</TABLE>
Se vería como:
Buscadores
|
Otros Links
|
Yahoo
|
Microsoft
|
IBM
|
Infoseek
|
Apple
|
Digital
|
Las directivas <TD>
y <TH> son cerradas según el
estandar de HTML, es decir que un elemento de tabla <TD> deberia
cerrarse con un </TD> , sin embargo los visores
asumen que un elemento de la tabla, queda automaticamente
"cerrado" cuando se "abre" el siguiente.
|