Lección 4 / 4.2

Apéndices

4.2 Tablas Gráficas

El método de creación de tablas gráficas es más complejo que el estudiado en el epígrafe 4.1, pues implica varios procedimientos.

Una tabla está compuesta por filas (horizontales) y columnas (verticales) que al cruzarse forman celdas. HTML define la estructura de una tabla mediante el tag <TR> (que define una fila) y el tag <TD> (que define una celda).

Por ejemplo, el código fuente

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

<BODY>
<TABLE>
<TR>
<TD> CELDA 1</TD>
<TD> CELDA 2</TD>
</TR>
<TR>
<TD> CELDA 3</TD>
<TD> CELDA 4</TD>
</TR>
</TABLE>

</BODY>

</HTML>

produce la salida

Para crear como tabla gráfica la usada como ejemplo en el epígrafe 4.1 tendríamos que modificar el código fuente como se muestra a continuación:

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

<BODY>
<H2>PROGRAMACION I</H2>
<Table>
<TR>
<TD>Nombre</TD>
<TD>Matricula</TD>
<TD>Calificación</TD>
</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 elementos están apropiadamente alineados según filas y columnas, pero la tabla dista de ser visualmente satisfactoria. En los siguientes epígrafes estudiaremos como mejorar este resultado.

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