Tablas Vs. Hojas de estilo

Comenzamos éste tópico viendo un tutorial para maquetar un sitio en Photoshop <a href="http://www.forocreativo.net/foro/viewtopic.php?t=1091&postdays=0&postorder=asc&start=0" target="_blank">aquí</a>
y ahora lo seguimos por estos lares.
Decía Arcard:

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->aun teniendo en cuenta el gran soporte que la mayoria de los navegadores tienen para con el css, es interesante recordar que efectivamente 'distintos navegadores interpretan' el codigo, pero no lo presentan de la misma forma. En cambio, la gran ventaja de las tablas, es que todos los navegadores los presentan con una similitud casi al 100%<!--QuoteEnd--></div><!--QuoteEEnd-->

Creo que está mal enfocado el asunto. De esa manera estás diseñando para un navegador y no para la web, en cambio, si tu diseño se rige por los estándares, con un mínimo esfuerzo puedes hacer que cualquiera pueda acceder y ver tu sitio de manera decente.
Maquetando con CSS ahorrarás muchos bytes de información innecesaria, la actualización del sitio o cualquier modificación por pequeña o grande que sea será mas sencilla, podrás separar el contenido de la forma, etc.
No hablemos de IE o Netscape, Mozilla (FireBird) es enormemente superior y Opera no se queda atrás.


<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->Si te molesta el que se use tablas en el web...habra que reclamarle primero a Microsoft... si ellos usan, porque nosotros no?... Otra cosita, si el uso de tablas en el acomodo del diseño no es factible... ¿Entonces porque el codigo HTML tiene todas las etiquetas para trabajarlo?<!--QuoteEnd--></div><!--QuoteEEnd-->

Bueno sería dejar de lado a Microsoft al hablar de estándares! No es precisamente un buen ejemplo ...
Las etiquetas del HTML fueron creadas para clasificar contenidos no para darle forma a éste. Pero no es el punto. La cuestión es que la maquetación con tablas es poco práctica, piensa en la cantidad de código que repites en un sitio armado con tablas y como se reduciría el peso y el tiempo de descarga si tuvieras el contenido por un lado y el formato de ese contenido dependiendo de una sola hoja de estilos.
La diferencia puede ser considerable dependiendo del tamaño del sitio.

Si alguien todavía duda de las cualidades para maquetar con CSS le recomiendo visitar: <a href="http://csszengarden.com/" target="_blank">CSS Garden</a>.
Allí hay una sola página html (el contenido) y una gran colección de formatos en CSS para ese html.

 

Yo tengo bien arraigadas mis preferencias al diseñar una web.

Pero siempre he estado dispuesto a evolucionar, asi que si tienes algunos links que resuelvan este rollo de tablas contra css, o que expliquen BIEN como usar css en lugar de tablas, te lo agradeceria.

 

Sé que es difícil conseguir buen material al respecto en español, pero lo hay.
Veamos si podemos reunir aquí un buen puñado de tutoriales y referencias.
Lo ideal sería mirar en <a href="http://www.w3.org/" target="_blank">W3C</a>, pero es muy extenso y está en inglés.

En español:

<a href="http://www.xiniom.com/html/indexd.php" target="_blank">Xiniom - Uno de los más completos. html + css</a>

<a href="http://www.kusor.net/traducciones/ala.es/alternate/" target="_blank">Kusor.net - Hojas de estilo alternativas</a>



En Inglés:
<a href="http://www.brainjar.com/css/positioning/default.asp" target="_blank">BoxModel - Muy buen tutorial!</a>

<a href="http://www.maxdesign.com.au/presentation/listamatic/index.htm" target="_blank">Listamatic - Todo tipo de listas CSS para utilizar en menúes verticales y horizontales</a>

<a href="http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml" target="_blank">Generador de layouts de 3 columnas</a>

<a href="http://www.simplebits.com/" target="_blank">SimpleBits - Mucho para aprender allí</a>

<a href="http://www.l-c-n.com/IE5tests/resources.shtml" target="_blank">Listado de recursos</a>

 

<!--QuoteBegin-ravenpix+--><div class='quotetop'>CITA(ravenpix)</div><div class='quotemain'><!--QuoteEBegin-->piensa en la cantidad de código que repites en un sitio armado con tablas y como se reduciría el peso y el tiempo de descarga si tuvieras el contenido por un lado y el formato de ese contenido dependiendo de una sola hoja de estilos. &nbsp;
La diferencia puede ser considerable dependiendo del tamaño del sitio. <!--QuoteEnd--></div><!--QuoteEEnd-->

Hola, bueno, aquí va mi opinión, llevo trabajando ya casi 4 años con html y algunas de sus variantes, y me he dado cuenta que el css es muy bueno, del mismo modo que las tablas, la gran ventaja del primero es que podemos hacer un include, reduciendo de este modo el peso del archivo que éste modoficará, en un sitio pequeño ni caso tiene hacerlo pues la diferencia será muy poca y casi imperceptible, en el caso de un gran sitio será más factible usarlo; el gran potencial que le he visto al css es en el caso de los sitios generados dinámicamente, como en el que estamos navegando en este momento, es decir, asp, php, xml, dhtml, etcétera, pues podemos dar formato de manera más sencilla al código que se generará solo haciendo una referencia.

Las tablas son demasiado prácticas siempre y cuando las sepamos usar, de lo contrario nos generarán más problemas de los que nos puedan solucionar, sobre todo si en el código no usamos los tab para discernir las etiquetas, y algunos comentarios para no perdernos; en lo personal, cuando diseño un sitio estático, (html) prefiero al 100% las tablas, puede que me pase como a Arcard, que ya lo traigo arraigado pero bueno, me ha funcionado bastante bien hasta ahora, la diferencia del peso en estos casos es, como ya mencioné, mínima, algunos bytes.

En fin, no creo que se deba decir "que es mejor" tenemos dos herramientas que nos sirvan para hacer un trabajo, a lo mejor nos gusta trabajar más con una, a lo mejor con la otra, pero que pasa si usamos ambas, y aprovechamos las virtudes de las dos, combinándolas. :wink:

Saludos. 8)

 

No quiero entrar en detalles tecnicos, porque es seguro que hay varios que saben mas que yo. Pero definitivamente el uso de css, en mi opinion, es indudablemente mejor que las tablas, el solo hecho de ahorrar tiempo en actualizaciones es una clara y rotunda ventaja. Soy bastante nuevo con lo que es diseño web y desde que empeze, siempre use las tablas (al rededor de un año) por supuesto siempre tube enormes problemas de maquetacion, a demas del duro problema de dejar algo donde queria que estubiese! , quizas fue falta de "conocimiento" o haber tenido mas afinidad con las tablas... en fin... De todas formas aun uso tablas, por supuesto que si, pero cada ves que puedo usar Css lo hago, porque a mi juicio es mucho mejor, y ademas que te acostumbras.

ravenpix, los links que diste estan muy buenos, gracias por compartir.

bye

 

intente maquetar una web con tablas y visto que daba muchisimos problemas que si ahora funciona en ie pero en mozilla no, esto que no se coloca bien,... Decidí por consejo usar css, y creedme se ahorra mucho tiempo. Yo mis webs las hago con notepad y tardo poco en maquetar. El css es el futuro, eso opino yo

 

<!--QuoteBegin-Sking0rZ+--><div class='quotetop'>CITA(Sking0rZ)</div><div class='quotemain'><!--QuoteEBegin-->intente maquetar una web con tablas y visto que daba muchisimos problemas que si ahora funciona en ie pero en mozilla no, esto que no se coloca bien,... Decidí por consejo usar css, y creedme se ahorra mucho tiempo. Yo mis webs las hago con notepad y tardo poco en maquetar. El css es el futuro, eso opino yo<!--QuoteEnd--></div><!--QuoteEEnd-->

Creo que es al reves, lo dificil es maquetar con CSS lo que no funciona en un navegador si y en otro no son los div´s no las tablas que como han dicho funcionan al 100% en todos los navegadores. El CSS distingue a un buen diseñador de un aficionado, si consigues que un diseño maquetado con CSS funcione en todos los navegadores es que podrias trabajar de eso, te lo aseguro. Si quereis mas links sobre el tema podeis visitar por ejemplo:

<a href="http://www.disenorama.com" target="_blank">www.disenorama.com</a>

 

pues las css me han resultado bastante comodas, aunque un tanto colgadas pa aprenderse todos los atributos, si me preguntan, yo tambien las recomendaria.

valla , este tema ya es un poco viejo, pero aun asi es de mucha utilidad.

saludos

 

Pues yo e intentado con tablas y me a costado algo de trabajo en lo personal recomiendo el css, aunque no descarto la buena utilidad de las tablas en una Web.




[attachmentid=376]

 

Aun hoy en dia cuesta convencer a aquellos que estan acostumbrados a solo diseñar en photoshop y cortar en image ready para luego montar en dreamweaver... desgraciadamente este metodo no da pie para aprender y entender el buen uso de un html y de como puede montarse todo a puras hojas de estilo.

Estoy tratando de poner mas de esto en marquetacion web aca en el foro, inclusive empeze ya con un par de tutoriales.

Si uds pueden aportar mas a esto seria genial

 

Bien, yo tengo una opinion formada en cuanto a esto que puede ser distinta a varios incluso a las tendencias.

Primero dos puntos:
1) tablas es mas intuitiva ya que es un paso mas cercano desde el dibujo hasta el html y esto dado a que los que solo saben diseñar arman su web sin meterse en html.
2) CSS realemente no es mas facil de entender para la mayoria, y el que diga que no que haga su ejercicio mental de recorrer los pasos metiendose claro en la cabeza de la mayoria no profesional.

En otro orden, otros dos puntos:
1) No hay hoy dia un sitema que sea facil como puede ser el maquetado desde Image Ready (que no me gusta) o el de FireWorks (que me gusta mas) para generar el html y que lo haga en base a CSS.
2) De los que hay no tiene verdadero WYSIWYG y hay que hacer varios pasos para ver el resultado.

Y por ultimo y mas importante y contrario a lo que quizas piensan, cuenten conmigo para esto del CSS y espero esos tutoriales 23sato

 

Los tutos ya estaban Quique

Fijate en tutoriales para el web

Si pienso hacer una tercera parte con operacionas mas complicadas de CSS