HTML Manual - ©2002-03 By Ing. Julio Baralt Clase
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. Este parametro solo funciona en los
navegadores modernos.
- 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>
|
|
| 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.