Cambiando Tablas por XHTML + CSS (parte 1)
Hace unos minutos estaba hablando con un amigo por IM, que me preguntaba donde encontrar hojas de estilo (CSS) para agregar a un sitio y como podía solucionar unos problemas que tenía dándole formato a tablas.
Primero le conté que por lo general no uso repositorios de CSS y que prefiero hacerlo siempre 100% y desde cero, aunque algunas veces utilizo la excelente Librería de Layouts de Pablo Noel para ahorrar tiempo y trabajo.
Sobre las tablas mi primera reacción fue un rotundo NO USES TABLAS !
¿Por qué no usar Tablas?
- Las tablas fueron creadas para tabular datos y no para diseñar estructuras.
- Con tablas no se separa presentación de contenido. Los sitios son más pesados.
- El sitio pierde semántica.
- No todos los dispositivos y navegadores muestran tablas.
- El rediseño de sitios con tablas es más difícil, se gasta mucho tiempo y es más costoso.
¿Como reemplazar las tablas por XHTML + CSS?
Hace un tiempo atrás en un foro, un amigo posteó este código para crear una caja en HTML con tablas:
<table width="220" border="0" cellspacing="0" cellpadding="1">
<tr bgcolor="#990033" align="center">
<td><b><font color="#FFFFFF">Titular del cuadro</font></b></td>
</tr>
<tr bgcolor="#990033">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#FFFFFF">
<td>Ponga aqui el contenido del cuadro</td>
</tr>
</table>
</td>
</tr>
</table>
Este código tiene el formato incorporado, no es flexible, es pesado, usa tablas anidadas y otras cosas innecesarias, pero puede ser mejorado con XHTML.
Esto es lo que yo hice:
<div class="cuadro">
<p class="titulo">Titular del cuadro</p>
<p class="contenido">Ponga aqui el contenido del cuadro</p>
</div>
El CSS:
.cuadro {
width:220px;
border: 1px solid #903;
}
.titulo {
color:#fff;
text-align:center;
background-color:#903;
font-weight:bold;
padding:1px;
}
.contenido {
padding:4px;
}
Con esto hemos mejorado notablemente el primer código, eliminamos las tablas, separamos presentación de contenido y el código se ha hecho mucho más liviano y estandar.
Continuará…
Enlaces:
Porqué diseñar con tablas es estúpido
Diez Razones para Aprender y Usar Estándares Web
Guía de Referencia de CSS
Online CSS Optimizer / Optimiser
Jun 30th, 2006 > 11:42 pm
Como siempre un buen aporte
PS: Yo era de los que casi pregunto “ohh.. volviste al tema anterior” ^^
Jun 30th, 2006 > 11:56 pm
jaja…
Me mandé… EL CONDORO !!
Estaba editando un CSS por medio del editor de temas del mismo wordpress, subí el cambio y luego me dí cuenta que algo estaba fallando. Cuando volví a ver el CSS, solo había subido la mitad, el resto se había perdido.
Entonces opté por lo corto y sano. Puse el tema anterior (ahora que lo veo no estaba tan mal…) mientras corrijo el otro o termino el nuevo en el que estoy trabajando.
Jul 5th, 2006 > 5:21 pm
De hecho mi primera impresión fue: waaa… un nuevo diseño!!… y me diron ganas de ponerme las pilas también. Pero después pensaba “creo que esto ya lo había visto… y esto también..” y ahí fue cuando leí el “Live Edit” ^^
Jul 8th, 2006 > 4:54 am
Creo que en lugar de utilizar un P para el titulo sería mejor utilizar un h# (h2 o h3). Reducirías aún más el tamaño y ganarias en eso que llaman semántica.
Un saludo!
Jul 8th, 2006 > 1:34 pm
Ignatius claro, tienes razón, para los títulos es conveniente el uso de cabeceras
No lo hice con headers por un problema de accesibilidad y de secuencia de uso de los h1, h2, h3, h4, etc.
La regla según la WAI en resumen nos dice que se debe mantener una secuencia jerárquica con los headers
Entonces como no puedo anticiparme y poner un h3, ya que antes tal ves no existe h1 y h2, o solo existe el h1.
Muy enredado, pero minid lo explica mejor
http://www.minid.net/2005/11/15/hache-uno-hache-dos-hache-tres/
Sep 11th, 2007 > 2:18 pm
Muy buen dato, lo aplicare. Muchas gracias!
Sep 13th, 2007 > 10:10 pm
gracias por los consejos. los estaba necesitando!