Lección 4 / 4.4

El texto contenido en una celda puede alinearse en relación a los bordes de esta utilizando la propiedad ALIGN del tag <TABLE> (para establecer el mismo alineamiento para todas las celdas de la tabla) o del tag <TD> para una celda en particular. La propiedad ALIGN tiene en este caso tres valores posibles: LEFT, RIGHT y CENTER. La propiedad VALIGN alinea el texto verticalmente en relación a los bordes superior e inferior de la celda.

Abajo se muestra como aplicando esta propiedad se puede mejorar el aspecto de la tabla utilizada como ejemplo en el epígrafe 4.3.

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

<BODY>
<H2>PROGRAMACION I</H2>
<Table BORDER=5 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 ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD ALIGN=CENTER>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD ALIGN=CENTER>C</TD>
</TR>
</TABLE>

</BODY>

</HTML>

Note como las calificaciones de la última columna están centradas horizontalmente, mejorando el aspecto de la tabla.

Para centrar la tabla completa con relación a la ventana del navegador se utiliza el mismo recurso que para centrar una imagen, es decir: se encierra la tabla entre los tags <P ALIGN=CENTER> y </P>.

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

<BODY>
<H2>PROGRAMACION I</H2>
<P ALIGN=CENTER><Table BORDER=5 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 ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD ALIGN=CENTER>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD ALIGN=CENTER>C</TD>
</TR>
</TABLE></P>

</BODY>

</HTML>

Es posible controlar el color de fondo de la tabla completa, de una fila o de una celda utilizando la propiedad BGCOLOR con los tags <TABLE>, <TR> o <TD> respectivamente.

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

<BODY>
<H2>PROGRAMACION I</H2>
<P ALIGN=CENTER><Table BORDER=5 CELLPADDING=7>
<CAPTION ALIGN=TOP><b>Evaluación Final</b></CAPTION>
<TR BGCOLOR=TAN>
<TH>Nombre</TH>
<TH>Matricula</TH>
<TH>Calificación</TH>
</TR>
<TR>
<TD>Fito Paez</TD>
<TD>00954567</TD>
<TD ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juan Perez</TD>
<TD>00943333</TD>
<TD ALIGN=CENTER>B</TD>
</TR>
<TR>
<TD>Maria Andullo</TD>
<TD>00951212</TD>
<TD ALIGN=CENTER>A</TD>
</TR>
<TR>
<TD>Juana Bacallao</TD>
<TD>00934564</TD>
<TD ALIGN=CENTER>C</TD>
</TR>
</TABLE></P>

</BODY>

</HTML>