|
Atributos de TH y TD
Las marcas <TH> y <TD> difieren del dato que contiene la celda en el significado lógico; en el primer caso, se trata de un título (y quedará resaltado en negrita de manera automática) y en el otro se trata de un dato "normal".
Por su similitud, ambas marcas pueden aceptar los mismos atributos, lo que nos permite realizar un estudio conjunto de éstas.
Atributo
|
Descripción
|
WIDTH= anchura
|
Por norma general se asigna el atributo de anchura exclusivamente a las celdas de la primera fila de la tabla. Si no se especifica este atributo, la anchura de la celda dependerá de su contenido, del contenido de las celdas vecinas, y de un complicado algoritmo que utiliza el navegador para mostrarlas. Si lo especificamos, el diseñador de las páginas puede optar por determinar la anchura absoluta en píxeles (WIDTH= "100") o bien relativa a la anchura de la tabla del navegador (WIDTH= "25%"), añadiendo el símbolo % al valor numérico. En caso de que le asignemos a la celda WIDTH= "*", el navegador da por entendido que aquella columna puede acomodar su anchura al requerimiento de las demás.
|
ALIGN= posición
|
Los valores de alineación horizontal permitidos para este atributo son: left, center y right. Por defecto, las tablas se alinean a la izquierda.
|
VALIGN= posición
|
Los valores top, center y bottom permiten alienar el texto dentro de la celda en referencia a la vertical. Evidentemente, su efecto sólo será apreciable cuando la celda sea más alta de lo que necesita su contenido.
|
NOWRAP
|
Impide que se corte la línea de texto si no cabe en la anchura definida para la columna. Tenemos que utilizar NOWRAP con mucho cuidado porque puede aumentar en exceso la anchura de las celdas.
|
COLSPAN= columnas
|
Permite "fusionar" celdas consecutivas de una misma fila; columnas indica cuántas columnas vecinas ocupará la celda.
|
ROWSPAN= filas
|
Permite "fusionar" celdas consecutivas de una misma columna. Su uso afecta a las filas posteriores y se tendrá que considerar al definir las celdas dentro del <TR> ... </TR>correspondiente; filas indica cuántas columnas vecinas ocupará la celda.
|
BGCOLOR= color
|
Determina un color de fondo de la celda con independencia del resto de la tabla.
|
BACKGROUND= imagen
|
Permite usar una imagen de fondo específica para la celda.
|
BORDERCOLOR= color
|
Determina el color del margen de la tabla mediante la codificación habitual. Su interpretación es distinta en función del navegador: IExplorer: el color se aplica al margen de la tabla y a las líneas que delimitan todas las celdas. Netscape: el color definido sirve para teñir únicamente el margen de la tabla y queda modificado por los valores de sombreado.
|
BORDERCOLORLIGHT= color
|
Exclusivo de IExplorer; permite definir el color del marco de la tabla y de las celdas que está "iluminado".
|
BORDERCOLORDARK= color
|
Exclusivo de IExplorer; permite definir el color del marco de la tabla y de las celdas que están "en la sombra".
|
Hemos podido comprobar que el conjunto de atributos con los que se trabaja es muy grande. Así pues, veamos ahora varios ejemplos de complejidad creciente.
Ejemplo de COLSPAN y ROWSPAN
<HTML>
<HEAD>
<TITLE>Tabla con atributos en <TD> 1</TITLE>
</HEAD>
<BODY BACKGROUND="punteado.gif" TEXT="#000020" LINK="#3A5FCD" VLINK="#7EC0EE" ALINK="#FF0000" TOPMARGIN="30">
<FONT SIZE=5><FONT COLOR="NAVY"><FONT FACE="Comic sans MS">
<TABLE WIDTH="500" BORDER=3 CELLSPACING="4" CELLPADDING="3" BORDERCOLOR="red" >
<CAPTION>TABLA CON ATRIBUTOS EN <B><TD></B> (1) <BR>
fusión de celdas </CAPTION>
<TR>
<TH COLSPAN="3" ALIGN="center" VALIGN="center">TÍTULOS</TH>
</TR>
<TR>
<TD ROWSPAN ="2" ALIGN="center" VALIGN="center" >Celda 1.1</TD>
<TD ALIGN="center" VALIGN="center">Celda 1.2</TD>
<TD ALIGN="center" VALIGN="center">Celda 1.3</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="center">Celda 2.2</TD>
<TD ALIGN="center" VALIGN="center">Celda 2.3</TD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="center" VALIGN="center">Celda 3.1 </TD>
<TD ALIGN="center" VALIGN="center">Celda 3.2 </TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
muestra49.html
Ejemplo de alineaciones, colores e imágenes de fondo y colores de borde
<HTML>
<HEAD>
<TITLE>Tabla con atributos en <TD> 2</TITLE>
</HEAD>
<BODY BACKGROUND="punteado.gif" TEXT="#000020" LINK="#3A5FCD" VLINK="#7EC0EE" ALINK="#FF0000" TOPMARGIN="30">
<FONT SIZE=5><FONT COLOR="NAVY"><FONT FACE="Comic sans MS">
<TABLE WIDTH="500" BORDER=5 BORDERCOLOR="red" BORDERCOLORLIGHT="#FFA0A0" BORDERCOLORDARK="red">
<CAPTION>Tabla con atributos en <B><TD></B> (2)</CAPTION>
<TR>
<TH COLSPAN=4 ALIGN="CENTER" BGCOLOR="teal"><FONT COLOR="yellow" SIZE= +2>EJEMPLO DE TABLA</TH>
</TR>
<TR>
<TD ROWSPAN=3 BACKGROUND="piedras.gif"><FONT COLOR="white" SIZE=+1><BR> <BR> Celda 1 <BR> <BR>
</FONT></TD>
<TD COLSPAN=2 ALIGN="center">Celda 2</TD>
<TD ROWSPAN=2 ALIGN="right">Celda 3</TD>
</TR>
<TR>
<TD ROWSPAN=4 BORDERCOLOR="teal" BGCOLOR="#CCCC00">
Celda 4</TD>
<TD ROWSPAN=3>Celda 5</TD>
</TR>
<TR>
<TD ROWSPAN=3 VALIGN="top">Celda 6</TD>
</TR>
<TR>
<TD ROWSPAN=2 VALIGN="bottom">Celda 7</TD>
</TR>
<TR>
<TD><B>Celda 8</B></TD>
</TR>
<TR ALIGN="center" BACKGROUND="cuadros.gif">
<TH><BR>Celda 9<BR> </TH>
<TH>Celda 10</></TH>
<TH>Celda 11</></TH>
<TH>Celda 12</></TH>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
muestra50.html
Ejemplo de tabla con todo tipo de marcas y parámetros
<HTML>
<HEAD>
<TITLE>Tabla final</TITLE>
</HEAD>
<BODY TEXT="#000020" LINK="#3A5FCD" VLINK="#7EC0EE" ALINK="#FF0000" BACKGROUND="punteado.gif" TOPMARGIN="30">
<P>
<TABLE WIDTH="500" BORDER="2" BORDERCOLOR="BLACK" CELLSPACING="0" CELLPADDING="6">
<TR>
<TH ALIGN=CENTER COLSPAN="4" BGCOLOR="#804677">
<BR><H2><FONT COLOR="white">EJEMPLO DE TABLA</FONT></H2>
<IMG SRC="gmmd_grande.gif" ></TH>
</TR>
<TR>
<TD ROWSPAN="3" WIDTH="20%" BGCOLOR="silver">
<FONT FACE="Arial" COLOR="#333333">
<B>
A cada celda se le puede atribuir un color de fondo propio.</B>
<P ALIGN="center"><IMG SRC="flecha.gif">
</TD>
<TD COLSPAN="2" BACKGROUND="noche.gif"><FONT FACE="Comic sans Ms" COLOR="yellow">
<B>En una celda puede caber el universo ... </B><BR> <BR>
<P ALIGN="right"><IMG SRC="mundo.gif"></P>
</TD>
<TD ROWSPAN="2" WIDTH="20%" BGCOLOR="#3F47B1">
<IMG SRC="fish04.gif">
<IMG SRC="fish02.gif"><BR>
<IMG SRC="fish01.gif"><BR>
<FONT FACE="Comic sans Ms" COLOR="#EEEEEE">
... o el fondo del mar</TD>
</TR>
<TR>
<TD ROWSPAN="4" BGCOLOR="#946666">
<FONT COLOR="#FFFFC0">
<B><I>Puede ocupar una o más columnas.<BR>
Puede ocupar una o más filas.</I></B>
</FONT>
</TD>
<TD ROWSPAN="3"BGCOLOR="white">
Puede tener contenido, pero no puede estar vacía.
</TD>
</TR>
<TR>
<TD ROWSPAN="3" BGCOLOR="#454D3D" ALIGN="center">
<FONT COLOR="white"><B>Rincón en obras</B><BR>
<IMG SRC="venancio.gif">
</TD>
</TR>
<TR>
<TD ROWSPAN="2" BGCOLOR="red">
<TT>También su propia tipografía</TT>
</TD>
</TR>
<TR>
<TD BGCOLOR="yellow"> </FONT></TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
muestra51.html
|