Manual HTML – Apunte sobre TABLAS

Creación de tablas en lenguaje HTML estándar
Con la etiqueta <TABLE> se pueden colocar tablas en una página web. La estructura general es:
<TABLE>...</TABLE>
Los parámetros que pueden configurase dentro de la etiqueta <TABLE> son:
ALIGN Alinea una tabla con respecto a la página
ALIGN=”center”
ALIGN=”left”
ALIGN=”right”
Centra una tabla
Alinea una tabla a la izquierda
Alinea una tabla a la derecha
<TABLE ALIGN=”center”>...</TABLE>
COLS Define la cantidad de columnas que tendrá la tabla
COLS=4
<TABLE COLS=5>...</TABLE>
HEIGHT, WIDTH Permite definir el ancho y el alto de la tabla
HEIGHT=100
HEIGHT=30%
WIDTH=320
WIDTH=85%
Aplica una altura de 100 píxeles
Aplica una altura de 30 %
Aplica un ancho en píxeles
Aplica un ancho en porcentaje
<TABLE HEIGHT=100 WIDTH=87%>...</TABLE>
BGCOLOR Permite colocar un color de fondo en la tabla
BGCOLOR=”#005544”
<TABLE BGCOLOR=”#CC0099”>...</TABLE>
BACKGROUND Permite colocar una imagen de fondo en la tabla
BACKGROUND=”imagen.jpg”
<TABLE BACKGROUND=”center”>...</TABLE>
BORDER Permite colocar un borde a la tabla
BORDER=2
<TABLE BORDER=3>...</TABLE>
BORDERCOLOR Permite colocar un color al borde de la tabla
BORDERCOLOR=”#CC0099”
<TABLE BORDERCOLOR=”#33FF77”>...</TABLE>
BORDERCOLORDARK Permite colocar un color al borde oscuro de la tabla
BORDERCOLORDARK=”#CC0099”
<TABLE BORDERCOLORDARK=”#33FF77”>...</TABLE>
BORDERCOLORLIGHT Permite colocar un color al borde iluminado de la tabla
BORDERCOLORLIGHT=”#CC0099”
<TABLE BORDERCOLORLIGHT=”#33FF77”>...</TABLE>
CELLPADDING Permite colocar un espacio adicional en cada celda de la tabla
CELLPADDING=3
<TABLE CELLPADDING=4>...</TABLE>
CELLSPACING Permite colocar un espacio adicional del borde exterior de la tabla
CELLSPACING=3
<TABLE CELLSPACING=4>...</TABLE>
FRAME Permite definir el tipo de borde de la tabla
FRAME=”above”
FRAME=”below”
FRAME=”lhs”
FRAME=”rhs”
FRAME=”hsides”
FRAME=”vsides”
FRAME=”void”
Solo coloca borde en la parte superior de la tabla
Solo en la parte inferior de la tabla
Solo a la izquierda
Solo a la derecha
Arriba y abajo
A la izquierda y a la derecha
Quita todos los bordes
<TABLE FRAME=”hsides”>...</TABLE>
RULES Permite elegir si se colocarán o no los bordes internos de la tabla
RULES=”all”
RULES=”cols”
RULES=”rows”
RULES=”none”
Traza todas las líneas internas
Solo traza las líneas internas verticales
Solo las horizontales
Ninguna línea interior
<TABLE RULES=”cols” >...</TABLE>
<TR>...</TR>
Es una etiqueta que permite la creación de una nueva fila dentro de la tabla (recordemos que una columna
se crea con el parámetro COLS).
Los parámetros que pueden configurase dentro de la etiqueta <TR> son:
ALIGN Alineación de la fila completa
ALIGN=”center”
ALIGN=”left”
ALIGN=”right”
<TR ALIGN=”center”>...</TR>
BGCOLOR Permite colocar un color de fondo en la fila
BGCOLOR=”#005544”
<TR BGCOLOR=”#CC0099”>...</TR>
BORDERCOLOR Permite colocar un color al borde de la fila
BORDERCOLOR=”#CC0099”
<TR BORDERCOLOR=”#33FF77”>...</TR>
BORDERCOLORDARK, BORDERCOLORLIGHT Colorear el borde oscuro o el iluminado de la fila
<TR BORDERCOLORDARK=”#33FF77”>...</TR>
<TR BORDERCOLORLIGHT=”#33001F”>...</TR>
VALIGN Permite configurar la alineación vertical de las celdas de esa fila
VALIGN=”top”
VALIGN=”middle”
VALIGN=”bottom”
<TR VALIGN=”top”>...</TR>
<TD>...</TD>
Es una etiqueta que permite la creación de celdas dentro de una fila en una tabla.
Los parámetros que pueden configurase dentro de la etiqueta <TR> son:
ALIGN Alineación de la fila completa
ALIGN=”center”
ALIGN=”left”
ALIGN=”right”
<TR ALIGN=”center”>...</TR>
BGCOLOR Permite colocar un color de fondo en la celda
BGCOLOR=”#005544”
<TD BGCOLOR=”#CC0099”>...</TD>
BACKGROUND Permite colocar una imagen de fondo en la celda
BACKGROUND=”imagen.jpg”
<TD BACKGROUND=”center”>...</TD>
BORDERCOLOR Permite colocar un color al borde de la celda
BORDERCOLOR=”#CC0099”
<TD BORDERCOLOR=”#33FF77”>...</TD>
BORDERCOLORDARK, BORDERCOLORLIGHT Color del borde oscuro o el iluminado de la celda
<TD BORDERCOLORDARK=”#33FF77”>...</TD>
<TD BORDERCOLORLIGHT=”#33001F”>...</TD>
VALIGN Permite configurar la alineación vertical de las celdas de esa celda
VALIGN=”top”
VALIGN=”middle”
VALIGN=”bottom”
<TD VALIGN=”top”>...</TD>