|
VOLVER
INDICE DE TUTORIALES
.
10. Tablas
Las tablas surgieron con la versión HTML 3.0. Las tablas
nos permiten representar y ordenar cualquier elemento de nuestra
presentación en diferentes filas y columnas de modo que podamos
resumir grandes cantidades de información de una manera que puede
representarse rápida y fácilmente.
El
contenido de una tabla lo debemos desarrollar entre las etiquetas
<table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando
desde la celda superior izquierda. Las columnas se calcularán automáticamente
según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las etiquetas <tr>.....</tr>. Las etiquetas <th> y <td> con sus correspondientes etiquetas de
cierre, indican para indicar las filas individuales dentro de cada
fila. Las etiquetas <th>.....</th> indican que se trata de celdas que sirven
como encabezado de tabla y suelen visualizarse en negrita. Las etiquetas
<td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabecera 1</TH>
<TH>Cabecera 2</TH>
<TH>Cabecera 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro
de cada celda. Así, dentro de cada etiqueta de celda podemos encontrar:
1. El atributo align= define horizontalmente
los datos al margen izquierdo (left), al derecho (right) o centrado (center).
2. El atributo valign= define verticalmente
los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho
de los bordes, el espaciado entre celdas y el ancho de las mismas.
1. width= Acompaña a <table> y especifica el ancho
de la tabla, tanto en número de pixeles
como en porcentaje respecto al ancho de la pantalla. También puede
acompañar a las etiquetas <th> o <td> para especificar el ancho de las columnas.
2. Border= Anteriormente, ya hemos hablado de este
atributo. Ahora le diremos que puede darle un valor que indicará
el ancho del borde en pixeles. Border="0" indicaría la ausencia
de borde.
3. Cellspacing= Suele acompañar a la
etiqueta <table>. Indica el número de
pixeles que separan cada celda. El valor predeterminado suele
ser 2.
4. Cellpadding= También acompaña a la
etiqueta <table>. Indica el espacio en
pixeles entre el borde de la celda y su contenido. El valor
predeterminado suele ser 1.
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1"
CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2"
ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato
3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato
5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|