Como es conocido, una parte importante del proceso de adaptación a los estándares XHTML consiste en el uso de los elementos HTML con propiedad. Aunque esta afirmación parece simple y razonable en teoría, quizás sea una de las más difíciles de aceptar en la práctica, sobre todo desde el momento en que consideramos que representa el abandono de lo que es la tradicional forma de ‘maquetación’: el uso del elemento TABLE para posicionamiento. No, no el "posicionamiento" en los motores de búsqueda, si no la forma en la que se colocan los elementos en la página.

No es fácil "des-acostumbrarse" a trabajar con TABLE cuando durante mucho tiempo se ha hecho.

La vieja escuela

El procedimiento habitual para muchos desarrolladores(y me incluyo) ha sido siempre trabajar sobre el archivo PSD que un diseñador trabajó hasta tener el visto bueno del cliente. En el PSD se solían poner varios elementos gráficos y luego se ‘cortaba’ mediante líneas guía y layers. El resultado final era: Una página en HTML donde todo se encontraba dividido en una TABLE con múltiples celdas ( TR y TD) y, además, el uso de varios G IFs de un píxel para ajustar posiciones.

Por otra parte, la recomendación habitual en los estándares XHTML es que el uso de TABLE se realice solamente para la presentación de datos ordenados, no para posicionar la información.

Un ejemplo correcto de lo que es uso de TABLE de acuerdo a dicha definición:

en el que se usa TABLE para mostrar información en forma consistente, no para posicionar objetos.

Migrando hacia estándares

Ya que nos ha quedado claro que no debemos utilizar tablas para darle formato a nuestra página, viene ajustarnos a los estándares y al uso de hojas de estilo.

La primera solución consiste en implementar el uso de DIVs para posicionar los objetos.El ‘truco’ consiste en tomar los objetos, agruparlos en bloque y luego contener cada bloque en un DIV. Usando C SS se puede definir el posicionamiento de un bloque y señalar el lugar que tomarán en la página usando los elementos de CSS.

Ver ejemplo de página centrada con CSS. Ver la hoja de estilo CSS utilizada en dicha página para experimentar sobre el tema

En este caso usamos width para darle un ancho a un bloque DIV. Para que no nos quede el texto muy pegado, usamos margin. Si quiero que el texto vaya a la izquierda, uso float: left o float: right para enviarlo a la derecha.

Si ven el código fuente de esta página se darán cuenta de lo intuitivo y simple que es posicionar objetos de ese modo. Como hay una especie de "herencia" entre DIVs, basta con que yo defina algunos atributos "genéricos" como font-family, font-size, font-weight y color para que sean usados en los DIVs internos y con ello nos ahorramos algo de texto. Si ven el código fuente de esa página verán que estoy tratando de usar el mínimo de HTML. Pero, hago constar, esto todavía no es XHTML…

Eso es todo por ahora. Una vez que tengamos claro este concepto de CSS y cómo no usar TABLE estaremos listos para continuar con otros temas relacionados a la estandarización.