3. Alineamiento de celdas y filas
Hasta ahora hemos estudiado el alineamiento de las tablas con respecto a la ventana del navegador. El siguiente paso será aprender los diferentes tipos de alineamiento de los elementos de las diferentes celdas con respecto a estas. Estos tipos de alineamiento se dividen en dos: alineamiento vertical y alineamiento horizontal. En la figura 7.10 podemos ver una tabla en la que se ilustran las posibilidades de tipos de alineamiento.
Figura 7.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas de una tabla.
Alineamiento horizontal: Para seleccionar el tipo de alineamiento horizontal de las celdas hay que usar el atributo ALIGN de las etiquetas TH o TD en función del tipo de celda. Este atributo permitirá seleccionar entre un alineamiento a la izquierda (ALIGN="left"), centrado (ALIGN="center") o a la derecha (ALIGN="right"), tal y como veíamos en la figura 7.10.
Alineamiento vertical: En este caso usaremos un nuevo atributo: VALIGN (Vertical Align, alineamiento vertical). Las diferentes opciones con este tipo de alineamiento son las que veíamos en la figura 7.10: Alineamiento con la parte superior de la celda (VALIGN="top"), alineamiento en medio de la celda (VALIGN="middle") y alineamiento con la parte inferior de la celda (VALIGN=" bottom").
Por defecto las celdas de encabezado (TH) están centradas tanto horizontal como verticalmente, mientras que las celdas normales (TD) están alineadas a la izquierda y verticalmente se sitúan en el centro de la celda. El punto azul de la figura 7.11 representa el alineamiento por defecto en ambos tipos de celdas.
Figura 7.11. El punto azul de esta figura nos permite observar el alineamiento por defecto de los encabezados de tabla (TH) y de las celdas normales (TD).
Este alineamiento por defecto puede ser cambiado para toda una fila usando los atributos ALIGN y VALIGN en la etiqueta TR. Por ejemplo si creamos una fila con el siguiente código:
<TR ALIGN="right"
VALIGN="bottom">
... Etiquetas para crear las celdas ...
</TR>
|
Todas las celdas de esa fila tendrán se alinearán por defecto a la derecha y abajo. Por supuesto si en alguna de las celdas (TD o TH) de esa fila se vuelven a usar ALIGN y VALIGN con unos valores distintos serán estos últimos los que determinarán el alineamiento de esa celda en concreto. Por ejemplo:
<TABLE BORDER="1">
<TR ALIGN="right"
VALIGN="bottom">
<TD>
Celda1
</TD>
<TD>
Celda2
</TD>
<TD ALIGN="left"
VALIGN="top">
Celda3
</TD>
</TR>
</TABLE>
|
El resultado de este código es que todas las celdas de esa fila tendrán como alineamiento por defecto ALIGN="right" y VALIGN="bottom", pero en la tercera celda especificamos ALIGN="left" VALIGN="top" y cambiamos el alineamiento de esa celda en concreto como podemos ver en la figura 7.12
Figura 7.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos el alineamiento por defecto de las celdas de esa fila, pero aún podemos modificar ese alineamiento usando los mismos atributos en cada celda.
 | Si el lector prueba este último ejemplo probablemente no pueda apreciar el efecto del cambio de alineamiento porque la tabla es demasiado pequeña. Para poder apreciar dicho efecto será necesario aumentar el tamaño de la tabla con los métodos que aprenderemos en el siguiente apartado. |