Composición de una página web en código html
Tablas
Resalte de tablas
| Texto |
Enlaces |
Gráficos |
Otros recursos |
Tablas
Las tablas se indican mediante la etiqueta <table>
las filas se indican con la etiqueta <tr>
y
las columnas con la etiqueta <td>
el código básico de una tabla constituida, p. ej.: por una sola fila y tres columnas, por tanto con tres celdillas dispuestas horizontalmente, es:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
dentro de la etiqueta <td></td> se dispone el texto u otros elementos que queramos incluir en la celdilla correspondiente.
Reborde: se puede resaltar la tabla mediante un reborde:
border=n (n=0, 1, 2, etc.)
Enmarcado: las celdillas pueden tener un espacio libre entre ellas, que aparece
como un enmarcado:
cellspacing=n (n=0, 1, 2, etc.)
Tipo de celdilla: se puede controlar el espacio libre alrededor del texto u otro elemento
incluido en la celdilla:
cellpadding=n (n=0, 1, 2, etc.)
Ejemplo 1)
Tabla con tres celdillas horizontales, reborde 2, marco 3, tipo de
celdilla 1; la tabla ocupa el 40 % de la anchura de la ventana.
| a | b | c |
su código html
<table border=2 cellspacing=3 cellpadding=1
width="40%">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
Ejemplo 2)
Tabla con tres celdillas horizontales, reborde 2, marco 3, tipo de
celdilla 7, y alineada a la derecha; la tabla tiene una anchura de 210 puntos (hay control sobre la disposición del texto en las celdillas)
| a | b | c |
su código html
<table border=2 cellspacing=3 cellpadding=7
width=210 align="right">
<tr>
<td>a</td>
<td align="center">b</td>
<td align="right">c</td>
</tr>
</table>
Si no se dan las directrices correspondientes, la anchura de la tabla y la de las celdillas es variable, dependiendo del tamaño del texto, de los gráficos, de la ventana en pantalla, etc.
La altura de cada fila es variable en función de la máxima que tenga una de sus celdillas (que dependerá de los elementos incluidos en la misma). Esto hace que la visualización de las tablas pueda ser diferente de la esperada (ver Control de contenidos y Gráficos y texto en tablas)
Fusión de celdillas: Pueden hacerlo varias celdillas de una fila, mediante la orden colspan=n (n=2, 3, etc.; el valor indica el total de celdillas que se fusionarán, incluida la que tenga la orden y situadas a su derecha)
Ejemplo 3)
Tabla con 2 filas, de 4 celdillas en la primera fila y 3 en la segunda (con unión de la 3ª y 4ª); los textos están centrados en cada celdilla y la tabla ocupa el 40 % de la ventana y centrada.
| a | b | c | d |
| a | b | c + d | |
su código html
<center>
<table border=2 cellspacing=3 cellpadding=1
width="40%">
<tr>
<td align="center">a</td>
<td align="center">b</td>
<td align="center">c</td>
<td align="center">d</td>
</tr>
<tr>
<td align="center">a</td>
<td align="center">b</td>
<td colspan=2 align="center">c
+ d</td>
</tr>
</table>
</center>
Control de contenidos: el contenido de cada celdilla puede controlarse independientemente, p. ej.: para los textos utilizando las directrices vistas en Composición de textos (ver también ejemplos anteriores)
Ejemplo 4)
Tabla de seis celdillas, en una fila, reborde 0, marco 0 y tipo 0,
con distintos fondos de color, etc. Su anchura 800 puntos y anchura de cada celdilla de 1/6 del total.
| a | b | c | d | epsilon |
su código html
<table border=0 cellspacing=0 cellpadding=0
width=800>
<tr>
<td bgcolor="#FF0000" width=133><font
color="#FFFF00">a</font></td>
<td bgcolor="#FFFF00" align="right"
width=133><font color="#FF00FF"><i>b</i></font></td>
<td bgcolor="#00FF00" align="center"
width=134><b>c</b></td>
<td bgcolor="#00FFFF" width=134><u>d</u></td>
<td bgcolor="#0000FF" width=133> </td>
<td bgcolor="#FF00FF" width=133
align="center"><font face="symbol" color="#FFFFFF">epsilon</td>
</tr>
</table>
Tablas complejas: las tablas se pueden anidar, creando nuevas tablas dentro de una fila o dentro de una celdilla, un ejemplo es esta página en la que en una tabla con dos celdillas horizontales se le ha dado el color cyan de fondo a la celdilla izquierda, con un espacio en blanco, y en la derecha se ha incluido todo el contenido de la página (excepto lo que hay bajo este texto); eso hace que aparezca una línea de color cyan en el margen izquierdo hasta esta altura.
