![[Up]](up.gif){kind=small}
Indice![[Next]](next.gif){kind=small}
Colores y Fondos![[Prev]](prev.gif){kind=small}
ImágenesAl igual que las listas, las tablas son componentes dedicados a mejorar la visualización de datos tabulados:
Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc. La directiva que se utiliza para delimitar una tabla es <TABLE>...</TABLE>.
Cada fila se especifica con la directiva <TR>...</TR> y, dentro de ella, cada celda se especifica con la directiva <TD>...</TD>
<TABLE>
<TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR>
<TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR>
<TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR>
<TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD>
</TABLE>
El usuario verá:
| 100,3 | 1,8 | 313,1 |
| 22,7 | 200,8 | 23,1 |
| 8100,3 | 1300,5 | 4100,1 |
| 2,6 | 81,8 | 8,1 |
Las directivas TR, TD y TH (ver más adelante) admiten dos atributos de centrado: VALIGN para el centrado vertical y ALIGN para el horizontal; donde los valores que pueden tomar son, TOP (superior), BOTTOM (inferior), MIDDLE (centrado vertical), RIGHT (derecha), LEFT (izquierda) y CENTER (centrado horizontal).
La presencia de bordes en la tabla se especifica con el atributo border en la directiva <TABLE>. Con ello, se logrará un borde de dimensión la unidad; si deseamos hacer el borde más espeso deberemos dar un valor numérico al atributo: border=espesor
El título de la tabla es un literal delimitado por la directiva <CAPTION>...</CAPTION>.
Por último, cada cabecera de columna se especifica con la directiva <TH>...</TH>
Podemos ir mejorando la tabla del apartado anterior:
<TABLE border>El usuario verá:
| Primera columna | Segunda columna | Tercera columna |
|---|---|---|
| 100,3 | 1,8 | 313,1 |
| 22,7 | 200,8 | 23,1 |
| 8100,3 | 1300,5 | 4100,1 |
| 2,6 | 81,8 | 8,1 |
En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello utilizaremos el atributo colspan de la directiva <TH> o <TD>:
<TABLE border>El usuario verá:
| Dos columnas | ||
|---|---|---|
| Primera columna | Segunda columna | Tercera columna |
| 100,3 | 1,8 | 313,1 |
| 22,7 | 200,8 | 23,1 |
| 8100,3 | 1300,5 | 4100,1 |
| 2,6 | 81,8 | 8,1 |
Como vemos en el ejemplo anterior, cada una de las celdas ocupa únicamente una fila, si deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la directiva <TH> o <TD>.
Vamos ha especificar que la cabecera de la tercera columna se espanda a dos filas:
<TABLE border>El usuario verá:
| Dos columnas | Tercera columna | |
|---|---|---|
| Primera columna | Segunda columna | |
| 100,3 | 1,8 | 313,1 |
| 22,7 | 200,8 | 23,1 |
| 8100,3 | 1300,5 | 4100,1 |
| 2,6 | 81,8 | 8,1 |
Ejemplo de la utilización de celdas multicolumna y celdas multifila combinadas:
<TABLE border>
<CAPTION>Ejemplo
combinado</CAPTION>
<TR><TH rowspan=2></TH><TH
colspan=2>Valores</TH><TH
rowspan=2>Precio</TH></TR>
<TR><TH>Peso</TH><TH>Potencia</TH></TR>
<TR
ALIGN=CENTER><TH>Modelo
1</TH><TD>890</TD><TD>70</TD><TD>995</TD></TR>
<TR
ALIGN=CENTER><TH>Modelo
2</TH><TD>1200</TD><TD>110</TD><TD>2245</TD>
</TABLE>
El usuario verá:
| Valores | Precio | ||
|---|---|---|---|
| Peso | Potencia | ||
| Modelo 1 | 890 | 70 | 995 |
| Modelo 2 | 1200 | 110 | 2245 |