Usando CSS en lugar de TABLE
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. Veamos por qué.
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 GIFs de un píxel para ajustar posiciones.
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 GIFs 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. Primero veamos lo que sería 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.
| Code | Zip | Phone |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
La primera solución consiste en implementar el uso de DIVs para posicionar los objetos. Esta página, por ejemplo, ha sido realizada de dicho modo. El 'truco' consiste en tomar los objetos, agruparlos en bloque luego contener cada bloque en un DIV. Usando CSS 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. Aquí puede descargarse la hoja de estilos usada en esta página, con lo cual se puede experimentar sobre el tema.
Como verán, en esta página hemos incluído SWF y una imagen. Debería verse bien en todos los navegadores(lo he probado en Firefox y en IE sin problemas), pero si no, háganmelo saber.
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" en cascada entre DIVs, basta con que yo defina algunos atributos "genéricos" como font-family, font-size, font-weight y color(por ejemplo) para que sean usados en los DIVs internos y con ello logramos ahorrarnos algo de texto. Si ven el código fuente de esta página verán que estoy tratando de usar el mínimo de HTML.
Pero, hago constar, esto todavía no es XHTML...
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 que podrán ver en mi blog.
¿Comentarios, sugerencias, quejas o contratos de trabajo? Pueden comunicarse con el autor, Mickel, mediante mi formulario de contacto.
Publicado originalmente el 11.11.2005
¿Comentarios, sugerencias, quejas o contratos de trabajo? Pueden comunicarse con el autor, Mickel, mediante mi formulario de contacto.
Publicado originalmente el 11.11.2005