Lección 4 / 4.3

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>

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

<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>.

<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>

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.

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>