Utilizar tablas es cosa del pasado. Es necesario migrar nuestros sitios a estándares XHTML y CSS. El primer reto será centrar nuestros contenidos correctamente
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:
| Code | Zip | Número |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
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.
Hola Luis, estoy trabajando en mi pagina web y lei tu articulo y me anime a hacerla como tu indicas, puedes ver el resultado en:
Direccion: es.geocities.com/jesusguevarautomotriz/
Mi preguntas son las siguientes:
1. ¿hasta que punto debo usar CCS para dar formato a una pagina?
Por ejemplo, el control de el ancho de los bloques div con estilos seria una locura, tendria que crear un estilo para cada bloque que quisiera colocar en el sitio, no solo en la pagina principal y ¿si debo hacerlo de esta manera es valido?.
Que opinas creo un estilo para cada cuadro que tenga un ancho diferente o se lo especifico dentro del codigo html de la pagina.
2. ¿Como puedo corregir el defecto que tienen las etiquetas DIV al seleccionar texto en una pagina web?
No soy experto, soy un aprendiz, si pudiras explicar en forma sencilla te lo agradezco, tampoco uses regionalismos de tu pais porque puede ser mas dificil entenderte. Gracias.
Jesus Guevara – [email protected]
Ojo!, no siempre es mejor utilizar etiquetas CCS para todo!, yo sé que es práctico y está de moda, pero no siempre es la mejor solucion.
Saludos!
Bueno aunque se puede hacer, en principio la idea de usar CSS no es para dar ancho a un bloque. La idea de trabajar con CSS es mas bien repensar los diseños en funcion de CSS no de trabajar como haciamos con tablas e imagenes de un pixel.
Si tengo un diseño muy exacto que me ha dado un diseñador cortado con HTML seria una locura hacerlo con CSS. Lo hago con
La solucion tiene que venir desde el diseño, no solo del webmaster. El articulo lo que pretende es mostrar que, con un diseño un tanto libre, usar tablas no es una absoluta necesidad.
Gracia por la respuesta Mickel y rodo; ahora diganme, ¿como se puede solucionar el problema de seleccion que tiene div?, yo quiero que los usuarios de mi pagina puedan copiar la informacion contenida en ella pero cuando voy a seleccionar, la seleccion se desordena.
Bueno en principio DIV no tiene un problema de seleccion, amigo Jesus, el problema puede estar en el navegador que usan. ¿Con que navegador y version has visto ese problema?
Bueno mickel, no se como explicarlo, es con IE en cualquier version de las mas vigentes la actual y la anterior, la verdad es que la seleccion se hace de forma extraña no tan uniforme como cuando centras con tablas, por cierto. Me dijeron que mi pagina se ve mal en Mozzila y es por el uso de la etiquetas DIV. ¿Que debo hacer para que se va bien en mozzila?
Mickel, hoy quise ver como se veia tu pagina “Centrada con CCSS” en Firefox porque la mia se ve mal y quiero arreglarla y no pude aparace una pagina en blanco con el siguiente mensaje; “Bandwidth Limit Exceeded. The server is temporarily unable to service your request due to the site owner reaching his/her bandwidth limit. Please try again later.”
Mickel me puedes decir porque mi pagina se ve mal en firefox? Por que si se ve bien en Internet explorer, firefox no?
Me he quedado sin ancho de banda hasta el 01.04(muchas visitas). Dame tu web para verla a ver que esta pasando…
Jesusguevarautomotriz: sin http, escribes en la direccion de tu navegador: “es. geocities.com / jesuguevarautomotriz” sin espacios, lo que pasa es que no todavia no tengo privilegios para postear direcciones.
http://es.geocities.com/jesuguevarautomotriz ?
correcto: jesusguevarautomotriz. le faltaba una “S”
voy a revisarlo. dejo la direccion actualizada por si alguien mas quiere verlo:
http://es.geocities.com/jesusguevarautomotriz
Bueno, espero tu evaluacion. gracias.
Hola he desistido de mi intendo por usar ccs, y cambie a uno con tablas mas adelante me estandarizare.
El ejemplo ha cambiado de direccion a:
http://es.geocities.com/jesusguevarautomotriz/centradoccs.html
Queria comentar que unas cositas q no se han dicho en los comentarios y creo q es interesante.
Comentar que “la moda” aparente de l uso de las css, no es una simple moda, sino q da un valor añadido,ya q programando de esta forma muchas mas personas podrán acceder a las web. Ya que la programación web q habia hasta ahora dejaba de lado a gente con minusvalias que no podian entrar en las páginas por ser liosas e incomprensibles para ellos.
Solo dejar esta puntualización ;P
Por lo demas,.. muy bueno Michael, he aprendidos muchos truquillos contigo ;),.. sigue asi y gracias por la ayuda q recibimos de ti 😀
Hola necesito ayuda con con una pagina web. lo que sucede es que la pagina la subo a un servidor pero no sale con el formato que yo le di y cuando hay palabras con acento me arroja basura, ya intente con y en lugar DE iso tambien provee con utf-8 pero aun asi no funciona sigue viendose la pagina mal. y ya no se que pueda tener intente ponerle los acentos con codigo ASCII pero paso lo mismo. si alguien sabe como se lo agradeceria muchisisisisimo. Mi correo es [email protected] GRACIAS…
me pasa lo mismo, no se ve bien con mozzila
est6a pagina es interesante, deberian incluir una zona de descargas….crdm 2007
somos los mejores del mundo, aunque les duela.
ola tengo dos problemas
numero uno mi web no acepta acentos ya intente modificando a varias opciones y nada!
me podrian ayudar y numero dos segun me dicen mi pagina se ve muy mal en fire fox que puedo hacer? soy nueva en esto snif
lo que modifico es text/html; charset=utf-8 pero sigue igual
Holas Chicos!
Sé que es demasiado tarde para responder.
A mí también me pasa el problema con los acentos que no se veían en mi web, pero usé este código: Con él me funcionó, leí que el ISO es para las palabras latinas y acentuadas.
Bueno! espero que sea algo de ayuda!
Si algo está malo, porfa háganmelo saber! porfis!!
Cuidense!
Desde Venezuela
necesito contactarte, podrias darme tu mail, gracias!!