Accesorios
Título
Cuando queramos
titular una tabla, podemos escribirlo como texto normal o usando
las etiquetas <caption>.....</caption>. Las etiquetas
de título van dentro de las etiquetas de la tabla y son
opcionales, el título no es obligatorio. La etiqueta de
apertura puede llevar consigo el atributo align que indicará
si el título va encima o debajo de la tabla. align="top"
indicaría encima de la tabla y align="bottom"
indicaría en la parte de abajo.
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:
-
El atributo
align= define horizontalmente los datos al margen izquierdo
(left), al derecho (right) o centrado (center).
-
El atributo
valign= define verticalmente los datos en la parte superior
(top), en la parte inferior (bottom) o centrado (middle).
Celdas
extendidas
Para crear
una celda que abarque varias filas o columnas, debemos colocar
en las etiquetas <th> o <td> los atributos:
-
rowspan=
más un valor para indicar el número de filas
que se quiere abarcar.
-
colspan=
más un valor para indicar el número de columnas
que se quiere abarcar.
Si opta por
poner celdas extendidas en su presentación web, la cosa
se complica bastante. Nuestra recomendación: Coja lápiz
y papel y dibuje la tabla con todas las filas y columnas que se
quieren formar porque así tendrá mucho más
claro los valores que debe asignar a los atributos rowspan y colspan
y las etiquetas a las que hay que asignarlos.
Espaciado
Podemos modificar
el aspecto de la tabla cambiando el ancho de los bordes, el espaciado
entre celdas y el ancho de las mismas.
-
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.
-
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.
-
Cellspacing= Suele
acompañar a la etiqueta <table>. Indica el número
de pixeles que separan cada celda. El valor predeterminado
suele ser 2.
-
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.
Ejemplo
2:
<HTML>
<HEAD>
<TITLE>Ejemplo 2</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>
<<<Anterior
- Siguiente>>>
|
