DIV vs. Tablas o CSS vs. Ser estúpido

Question

Sé que las tablas son para datos tabulares, pero es muy tentador usarlas para el diseño. Puedo manejar DIV para obtener un diseño de tres columnas, pero cuando tienes 4 DIV anidados, se vuelve complicado.

¿Hay algún tutorial/referencia para persuadirme de usar DIV's para el diseño?

Quiero usar DIV, pero me niego a pasar una hora para colocar mi DIV/SPAN donde lo desee.

@GaryF: Blueprint CSS tiene que ser el secreto mejor guardado de CSS.

Gran herramienta - Blueprint Grid CSS Generator.

Answer 1

Esto puede ser inútil, pero de alguna manera no entiendo todos estos problemas relacionados con CSS. Si un diseñador de periódicos intenta insertar una película en la página de anuncios, todos estarían de acuerdo en que está un poco loco. Pero aún esa misma gente se entusiasma con los diseños de tres columnas en HTML. HTML no es apto para manejar bien este tipo de diseño en este momento. Además, los diseños de múltiples columnas generalmente no son muy adecuados para leer en monitores de computadora. ¿No hay suficientes alternativas viables?

Y, por cierto, incluso las tablas no ofrecen una buena forma de implementar un diseño de columna fluido, por lo que no es motivo alguno para recurrir a dichos hacks. Asumiendo un navegador medio moderno (es decir,> MSIE 6), las tablas no ofrecen ninguna ventaja sobre HTML + CSS limpio que yo sepa.

Answer 2

Está el Yahoo Grid CSS que puede hacer todo tipo de cosas.

Pero recuerde: CSS NO ES UNA RELIGIÓN. Si ahorra horas usando tablas en lugar de css, hágalo.

Uno de los casos de esquina que nunca podría hacerme pensar es en formularios. Me encantaría hacerlo en CSS, pero es mucho más complicado que las tablas.

Incluso podría argumentar que los formularios son tablas, ya que tienen encabezados (etiquetas) y datos (campos de entrada).

Answer 3

Solo usaría la tabla.

En mi experiencia, usar una tabla para el diseño funcionará igual en todos los navegadores y el CSS no (especialmente si intentas soportar IE6). Simplemente no vale la pena horas y horas de codificación para que un diseño funcione en CSS cuando se puede hacer en 10 minutos con una tabla.

La otra ventaja del uso de tablas es que su diseño puede muy fácilmente dimensionarse dinámicamente para el contenido. Intentar hacer eso con CSS es una gran pesadilla.

Answer 4

Encuentro que hay muchas limitaciones para CSS que solo parecen indicar que los diseñadores de especificaciones no hacen sitios web para ganarse la vida.

Use tablas HTML si no puede hacerlo fácilmente en CSS.

Habiendo dicho eso, algunos de los marcos ayudan y siempre es mejor hacerlo en CSS si puede administrarlo.

Answer 5

En mi opinión, la tendencia debe ser a favor de la CSS sobre IE6 - es decir, a menos que haya una increíblemente buena razón (por ejemplo, su sitio web sólo está dirigidos a personas que utilizan IE6, lo que sería raro), que es mejor ' alienar a las personas que usan IE6 en lugar de personas con problemas de visión y/o agentes de usuario automatizados.El uso de IE6 está disminuyendo; el último grupo está aumentando en número. Incluso si su sitio no se ve perfecto en IE6, probablemente será más fácil para los usuarios leerlo que un diseño basado en tablas para aquellos que no lo puedan ver.

Esta es una pregunta muy general, por lo que es difícil responder con detalles. Los dos libros que son excelentes recursos son:

• Bulletproof Web Design, Dan Cederholm
• CSS Mastery, Andy Budd

Si sólo tiene que pasar una hora de diseñar su diseño general del sitio, que no está mal ir .

Answer 6

En el Reino Unido y en los EE. UU. Hay un requisito legal para favorecer los diseños de CSS sobre las tablas. Tanto la Sección 508 (EE. UU.) Como la Ley de Discriminación por Discapacidad (Reino Unido) cubren los estándares de accesibilidad para usuarios con visión limitada.

En el Reino Unido, la legislación se extiende hasta hacer ilegal la producción comercial de un sitio que impide la capacidad de un usuario con deficiencia visual de la misma manera que ahora es ilegal tener una tienda con un paso para ingresar y no hay forma de que ingrese un usuario de silla de ruedas; sin embargo, no ha habido procesamientos por el acceso al sitio web aún. Sin embargo, siempre iría con CSS, ya que significa que el diseño de su sitio es mucho más fácil de mantener a largo plazo.

Invertir tiempo en el aprendizaje de CSS (utilicé las escuelas W3C y .Net Magazine http://www.netmag.co.uk) valdrá la pena.

Answer 7

Usted puede ser capaz de encontrar algo de inspiración aquí: http://blog.html.it/layoutgala/

Answer 8

Why tables for layout is stupid: problems defined, solutions offered.

Answer 9

CSS puede no ser una religión, pero es la forma en que los navegadores interpretan HTML para el diseño. Nos guste o no, todos los navegadores modernos usan (algunas versiones) del modelo de caja W3C. Para continuar confiando en las tablas, siga confiando en una metodología que es simplemente incorrecta a los ojos de las personas que diseñan la tecnología de representación web.

Sé que CSS puede parecer terriblemente complicado a veces, pero creo que es una necesidad en este día y edad (créanme, sus clientes lo van a querer).

Si no se siente cómodo tomando el tiempo realmente aprender CSS (por lo que le toma segundos o minutos para colocar elementos ... no una hora), entonces debe pasar el trabajo de diseño a alguien que sabe realmente conoce el front-end.

Sí, hay un montón de problemas con las implementaciones de navegador actuales de CSS, pero nada tan drástico que deba sentir la necesidad de volver al diseño basado en tablas. Simplemente siéntese y tómese el tiempo para aprender, como lo haría con cualquier otro idioma o marco.

El mejor recurso de referencia en línea que he encontrado es ésta: http://reference.sitepoint.com/css

Pero es posible que no se pierde nada con mirar un libro como Designing With Web Standards la que va un largo camino para ayudar a entender por qué esto es importante .

Answer 10

También pensaba que Blueprint era excelente hasta que vi YAML (Otro diseño Multicolumna). Hay un online builder tool que es fantástico. Puedo obtener un diseño de múltiples columnas atractivo en 5 minutos.

Answer 11

A List Apart es una gran referencia para usar HTML semántico, el Holy Grail article es probablemente uno de los mejores ejemplos. Además, echa un vistazo al CSS Zen Garden para obtener inspiración sobre el tema o leer el excelente libro de Dave Shea "The Zen of CSS Design".

Answer 12

Utiliza CSS para el diseño porque no solo es semánticamente correcto sino porque las tablas tienen múltiples inconvenientes.

Las tablas son horribles para la accesibilidad porque rompen casi todos los lectores de pantalla, lo que a su vez proporciona a los invidentes información sin valor debido a la forma en que se leen las tablas.

También rinden mucho más lento que sus contrapartes de CSS. Las tablas deben dibujarse dos veces, una para el diseño y otra para el contenido. Esto puede significar que si tiene una imagen remota o dos en un servidor con una conexión lenta, no se renderizará TODO EL DISEÑO.

¿Utilizarías una matriz para almacenar un diccionario cuando tienes un hashmap? No. Y no deberías usar una mesa cuando hay algo que funciona mejor.

Answer 13

Después de un tiempo ni siquiera lo piensas. Usar divs con CSS parece ser la opción más fácil de imo. Además, tienes más libertad cuando usas frameworks como jQuery. No podía imaginar hacer algunas de las cosas geniales de jQuery sin usar css o divs. Si utilizas las tablas por estilo y diseño, siento que te pierdes muchas tecnologías nuevas y te quedas estancado en los años 90.