Curso completo de HTML - Alineamiento de tablas

Hasta ahora las tablas que hemos visto no tenían ningún tipo de alineamiento especial. Se situaban en el margen izquierdo y se extendían hasta donde ocuparan por la derecha. Pero por supuesto el lenguaje HTML nos permite tener un mayor control sobre la disposición de las tablas con el uso de un nuevo atributo de la etiqueta TABLE: ALIGN. Este atributo nos permitirá alinear la tabla a la derecha, a la izquierda o centrada respecto a la ventana del navegador, para ello toma los siguientes valores:

• ALIGN="left": Alinea la tabla a la izquierda de la ventana del navegador. La manera de actuar del navegador cuando se encuentra con una tabla alineada a la izquierda es idéntica a su comportamiento con imágenes con este mismo tipo de alineamiento, y por tanto también podemos conseguir que un texto envuelva la tabla tal y como hacíamos con las figuras y como podemos ver en la figura 7.7.

  Figura 7.7. Con el atributo ALIGN podemos controlar el alineamiento de la tabla. Si elegimos ALIGN="left" el texto bordeará a la tabla al igual que ocurría con las imágenes.

  

  La forma de usar este tipo de alineamiento es:

  <TABLE ALIGN="left"> ...Código de la tabla... </TABLE>

  Para escribir texto al final de una tabla alineada a derecha o izquierda deberemos usar, al igual que hacíamos con las imágenes, la etiqueta BR con el atributo CLEAR. El siguiente ejemplo funcionaría en ambos casos de alineamiento:

  <BR CLEAR="all">

• ALIGN="right": En esta ocasión la tabla será alineada a la derecha. El texto también la envolverá como ocurría con las imágenes alineadas a este lado. En la figura 7.8:

  Figura 7.8. Usando alineamiento a la derecha (ALIGN="right") conseguimos un efecto muy similar al alineamiento a la izquierda.

  

  podemos ver el efecto de usar este modo de alineamiento:

  <TABLE ALIGN="right"> ...Código de la tabla... </TABLE>

• ALIGN="center": Usando este método de alineamiento obtendremos una tabla centrada respecto al ancho total de la ventana del navegador. El resultado de usar ALIGN="center" es idéntico al que obtendríamos si introdujéramos la tabla entre las instrucciones <CENTER> y </CENTER >. En este tipo de alineamiento

  <TABLE ALIGN="center"> ...Código de la tabla... </TABLE>

  el texto no envuelve a la tabla como podemos apreciar en la figura 7.9.

  Figura 7.9. Con ALIGN="right" la tabla se sitúa en el centro de la ventana del navegador y el texto ya no la envuelve.