Manual HTML - Aprende a hacer tus páginas web

Ya hemos visto atributos para la etiqueta TABLE, enumeremos ahora atributos que se aplican a las filas y/o columnas.

a) Height y Width: Atributos de sobra conocidos para dimensionar en este caso las filas <tr> o las columnas <td>.

b) Align y Valign: Estos atributos aplicados en etiquetas de filas o columnas sirven para alinear el contenido de las celdas. En el caso de Align alineación horizontal con los valores left, center y right y en el caso de Valign alineación vertical con los valores top, middle y bottom.

c) Colspan y Rowspan: Los atributos Colspan y Rowspan toman un valor numérico e indican el número de celdas que se va a expandir horizontalmente en el caso de Colspan y verticalmente en el caso de RowSpan.

Ejercicio:  Vamos a utilizar los atributos que hemos visto en este ejercicio:

<TABLE Height="200" Width="450" border="2">
<TR height="25">
<TD colspan="2" align="center">FILA1COL1COL2</TD>
<TD>FILA1COL3</TD>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
<TD rowspan="2">FILA2FILA3COL3</TD>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
</TABLE>

Guardamos el código en el editor como ejercicio11.htm nuestra nueva tabla queda:

Obsérvese en el código que cuando se expande una celda a otra, el valor de esta última no se codifica.

Por último y para acabar con este tema vamos a aprender el uso de otras etiquetas que nos ayudarán a darle formato a nuestras tablas.

a) <TH>: Estas etiquetas sustituyen a las <TD> para poner un formato encabezado.

Ejercicio:  En el mismo ejercicio11.htm sustituimos las <TD> de la primera fila por las celdas de encabezado <TH>.

<TABLE Height="200" Width="450" border="2">
<TR height="25">
<TH colspan="2">FILA1COL1COL2</TH>
<TH>FILA1COL3</TH>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
<TD rowspan="2">FILA2FILA3COL3</TD>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
</TABLE>

Los encabezados quedarían de la siguiente manera:

Se puede observar en el resultado, que el contenido de las celdas de encabezado va en negrita y centrado.

b) <CAPTION>:  Etiqueta de título de la tabla.

Ejercicio:  Vamos a ponerle un título a la tabla del ejercicio anterior:

<TABLE Height="200" Width="450" border="2">
<CAPTION>Título de la tabla</CAPTION>
<TR height="25">
<TH colspan="2">FILA1COL1COL2</TH>
<TH>FILA1COL3</TH>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
<TD rowspan="2">FILA2FILA3COL3</TD>
</TR>
<TR>
<TD valign="bottom">FILA2COL1</TD>
<TD valign="bottom">FILA2COL2</TD>
</TABLE>

El resultado con el título:

• Descargate los contenidos en PDF