Tablas básicas
 |
La descripción del formato y los elementos de una tabla sigue el esquema habitual de HTML de englobar entre las marcas de inicio y final los elementos que tienen que verse afectados por la marca.
Así, una página básica con leyenda, dos columnas y tres filas, la primera de las cuales fueran títulos, tendría el siguiente formato:
|
Código HTML |
Función |
|
<TABLE> |
Inicio de la tabla |
|
<CAPTION> ... </CAPTION> |
Leyenda |
|
<TR> |
Inicio de la fila de títulos |
|
<TH>....</TH> |
Título de la primera columna |
|
<TH>....</TH> |
Título de la segunda columna |
|
</TR> |
Fin de la fila de títulos |
|
<TR> |
Inicio de la primera fila de celdas |
|
<TD>....</TD> |
Primera celda de la fila |
|
<TD>....</TD> |
Segunda celda de la fila |
|
</TR> |
Fin de la primera fila de celdas |
|
<TR> |
Inicio de la segunda fila de celdas |
|
<TD>....</TD> |
Primera celda de la fila |
|
<TD>....</TD> |
Segunda celda de la fila |
|
</TR> |
Fin de la segunda fila de celdas |
|
</TABLE> |
Fin de la tabla |
Una vez incluido el código de la tabla en el de una página web, obtendríamos:
<HTML><HEAD>
<TITLE>Primera tabla</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>
<CAPTION>PRIMERA TABLA</CAPTION>
<TR>
<TH>COLUMNA 1</TH>
<TH>COLUMNA 2</TH>
<TH>COLUMNA 3</TH>
</TR>
<TR>
<TD>Celda 1.1</TD>
<TD>Celda 1.2</TD>
<TD>Celda 1.3</TD>
</TR>
<TR>
<TD>Celda 2.1</TD>
<TD>Celda 2.2</TD>
<TD>Celda 2.3</TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
A pesar de que los textos se muestran en un formato tabulado, una de las cualidades que hace más atractivas las tablas es que los datos aparezcan englobados dentro de cajetines bien delimitados. Esto se consigue mediante el atributo BORDER=n de la marca <TABLE>, donde n es el grosor en píxeles que le atribuimos al borde.
<HTML><HEAD>
<TITLE>Primera tabla</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 BORDER=5>
<CAPTION>PRIMERA TABLA CON BORDES</CAPTION>
<TR>
<TH>COLUMNA 1</TH>
<TH>COLUMNA 2</TH>
<TH>COLUMNA 3</TH>
</TR>
<TR>
<TD>Celda 1.1</TD>
<TD>Celda 1.2</TD>
<TD>Celda 1.3</TD>
</TR>
<TR>
<TD>Celda 2.1</TD>
<TD>Celda 2.2</TD>
<TD>Celda 2.3</TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
