Make your own free website on Tripod.com
Prefacio L1 L2 L3 L4 L5 L6 L7 L8 Apéndices

4.3 Encabezamientos y Bordes

Normalmente, la primera celda de cada columna continúe el encabezamiento de dicha columna. Este encabezamiento suele destacarse en negritas y centrarse en relación a la celda. El tag <TH>, que sustituye al tag <TD> en estos casos, formatea el texto contenido en la celda para que cumpla con estos requerimientos.

Por ejemplo, modificando la tabla que estudiamos en el epígrafe 4.2 de la forma abajo ilustrada

<HTML>
<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>
<H2>PROGRAMACION I</H2>
<Table>
<TR>
<TH>Nombre</TH>
<TH>Matricula</TH>
<TH>Calificación</TH>

</TR>
<TR>
<TD>Fito Paez</TD>
<TD>00954567</TD>
<TD>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD>A</TD>
</TR> 
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD>C</TD>
</TR> 
</TABLE> 

</BODY>

</HTML>

obtenemos

Es posible también incluir un encabezamiento general centrado en relación a la tabla utilizando el tag <CAPTION>, cuya sintaxis general es:

<CAPTION ALIGN=value>texto del encabezamiento</CAPTION>

<HTML>
<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>
<H2>PROGRAMACION I</H2>
<Table>

<CAPTION ALIGN=TOP><B>Evaluación Final</B></CAPTION>
<TR>
<TH>Nombre</TH>
<TH>Matricula</TH>
<TH>Calificación</TH>
</TR>
<TR>
<TD>Fito Paez</TD>
<TD>00954567</TD>
<TD>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD>A</TD>
</TR> 
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD>C</TD>
</TR> 
</TABLE> 

</BODY>

</HTML>

La propiedad ALIGN puede tener dos valores diferentes para el tag <CAPTION>: TOP y BOTTOM. Note que si se desea que el texto del encabezamiento general quede formateado en negritas, se debe usar el tag <B>.

Para hacer la tabla más legible pueden insertarse bordes, utilizando para ello la propiedad BORDER del tag <TABLE>.

<TABLE BORDER=size>

donde size es el grueso de los bordes medidos en pixeles.

<HTML>
<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>
<H2>PROGRAMACION I</H2>
<Table BORDER=1>

<CAPTION ALIGN=TOP><B>Evaluación Final</B></CAPTION>
<TR>
<TH>Nombre</TH>
<TH>Matricula</TH>
<TH>Calificación</TH>
</TR>
<TR>
<TD>Fito Paez</TD>
<TD>00954567</TD>
<TD>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD>A</TD>
</TR> 
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD>C</TD>
</TR> 
</TABLE> 

</BODY>

</HTML>

Abajo se muestra la misma tabla con bordes de 5 pixeles.

Note que los bordes interiores no cambian. Solamente los bordes exteriores se modifican al cambiar el valor de la propiedad BORDER. 

Al incluir bordes la tabla aparece más legible, pero aún el resultado no es atractivo. La propiedad CELLPADDING del tag <TABLE> permite controlar el espacio entre el texto el el border de la celda.

<TABLE CELLPADDING=size>

donde size es la distancia del texto a los bordes de la celda en pixeles. Tenga en cuenta que esta distancia se refiere no solo a los bordes derecho e izquierdo, sino también a los bordes superior e inferior.

<HTML>
<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>
<H2>PROGRAMACION I</H2>
<Table BORDER=1 CELLPADDING=7>

<CAPTION ALIGN=TOP><B>Evaluación Final</B></CAPTION>
<TR>
<TH>Nombre</TH>
<TH>Matricula</TH>
<TH>Calificación</TH>
</TR>
<TR>
<TD>Fito Paez</TD>
<TD>00954567</TD>
<TD>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD>A</TD>
</TR> 
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD>C</TD>
</TR> 
</TABLE> 

</BODY>

</HTML>

| Lección 4 | 4.1 | 4.2 | 4.3 | 4.4 | 4.5 |