2010-04-01 10 views
11

Sé que hay varios buenos argumentos que prefieren el posicionamiento de CSS sobre los diseños basados ​​en tablas. Lo que me pregunto es si el modelo CSS está completo (asumiendo un navegador relativamente moderno) con respecto a TODAS las capacidades de las tablas. ¿Hay diseños que las tablas pueden lograr que son imposibles o poco prácticos con CSS?¿Qué pueden hacer las tablas que el posicionamiento CSS no puede?

Respuesta

5

Cambiaría a diseños basados ​​en css si pudiera. Los argumentos sematic son correctos, pero hay consideraciones prácticas.Las tablas:

  • impiden absolutamente 'envoltura flotar' en un div caerá a la siguiente línea, porque no hay suficiente espacio para ello
  • le dan columnas misma altura
  • permiten diseños dinámicos, donde las anchuras y las alturas no se conocen hasta el tiempo de ejecución
  • proporcionan colspans y rowspans
  • reducir el número de preguntas para preguntar cómo hacer las cosas sin tablas :)

Hay propiedades de visualización CSS (tabla-celda, etc.) que imitan algo de esto, pero no creo que el soporte esté lo suficientemente extendido como para usarlas (a menos que pueda controlar la selección de su navegador de usuario).

El sitio en el que trabajo requiere anchos de columnas dinámicos en los diseños. Múltiples clientes usan las mismas plantillas de sitio, y no tengo idea de lo que pondrán en el menú o en el encabezado de página o las celdas de contenido. (Y no tengo idea de lo que encontrarán atractivo, que es otro problema ...) Usar una sola tabla externa para diseñar las secciones principales del sitio permite la flexibilidad que necesito sin preocuparme de que un menú ligeramente demasiado ancho presione el cuadro de contenido principal hasta la siguiente fila, o que los colores de fondo no llenen la altura requerida.

En un mundo perfecto (para mí), tendríamos <table> s para datos tabulares, y otro conjunto de etiquetas casi idéntico para diseños: llámelo <layout> (junto con la fila correspondiente y las etiquetas de celda). O bien, agregue un atributo 'modo' a la etiqueta <table>; los valores serían 'datos' y 'diseño' para que los lectores de pantalla y los motores de búsqueda puedan saber qué hacer. Tal vez en html 6 ...

Editar: Debo añadir, en cuanto a la cosa 'flotante' - hay una pregunta actual sobre SO con una respuesta que funciona bastante bien here. No es perfecto, y yo también es demasiado complicado, pero resolvería el problema en muchos casos.

+0

+0 para el primero, -1 para el 2 ° y 3 °, +1 para el 4 ° y el 5 °. : D – ANeves

+1

@sr pt: Me alegro de que me haya dado +0 por la primera, en lugar de -0 ... En serio, he visto soluciones parciales para la mayoría de estas cosas, pero nunca para anchos verdaderamente dinámicos (mi 3er). ¿Tienes algo para mí? – Ray

4

Las tablas son válidas y deben utilizarse para datos tabulares, y no para estructura. Personalmente, veo que las tablas se utilizan como una salida fácil, y nunca me he encontrado con una situación que no se pueda resolver con CSS.

Las tablas son definitivamente más fáciles para el posicionamiento vertical y las columnas de altura completa, pero de nuevo esto se puede superar con CSS.

+0

yo no soy una persona que aboga por esquinas en la programación del corte, pero hay casos en que un "hack" es sólo mejor que hacer algo la forma "ideal". Las tablas Html funcionan. En cada navegador. Siempre. Son simples de entender y mantener. CSS es lo opuesto a esto cuando se trata de diseñar divs. – Nemi

+0

@Nemi - Boo! Entonces, ¿para qué sirven los estándares? –

+0

+ -0 Estoy respetuosamente en desacuerdo. Hay * situaciones * que no se pueden manejar sin tablas ni JavaScript. Los diseñadores del estándar CSS hicieron un mal trabajo al proporcionar alternativas a 'table' para su uso en diseños: por qué, no lo sé.En cuanto a "la salida más fácil", les puse que cuando se elige entre una construcción de cinco líneas '

', o 80 líneas de CSS más tres hacks específicos del navegador para IE6 y 7 y tal vez 8, más una bloque de JavaScript porque (Safari | Opera | xyz) no es compatible con esta y esa pseudo-clase, la "salida fácil" es de hecho la manera correcta. –

0

Terrible looking ones?

En serio, sin embargo. No.

Un buen ejemplo de las personas que usan tablas es que hacen que sea mucho más fácil presentar campos de formulario de una manera atractiva, pero se confunde completamente con la accesibilidad y el significado semántico de las páginas. Puede lograr lo mismo y mejor con un poco más de esfuerzo en CSS.

0

Puede hacer lo mismo con CSS, pero no suele ser tan elegante.

Las tablas son importantes para mostrar datos tabulares (es decir, NO DISPOSICIONES). Son construcciones semánticas lógicas y deben usarse como tales. Contienen conceptos como columnas y filas, que CSS solo no tiene.

+0

No estoy seguro de comprar el argumento "son para datos TABULARES". ¿Te das cuenta de que http/html es para contenido ESTÁTICO, verdad? Y que las aplicaciones web y el estado de ahorro en las sesiones es una perversión de eso, ¿verdad? Usar una herramienta para algo porque funciona bien, incluso cuando no se hizo originalmente para ese uso, no está mal. Es simplemente inteligente. – Nemi

+0

Con su lógica Nemi, aún deberíamos utilizar declaraciones FONT en línea y GIF espaciadores. No solo ha evolucionado la tecnología, sino que también tiene el PENSAMIENTO sobre cómo usar esta tecnología. Claro que PUEDE usar tablas para el diseño, y también puede golpear las uñas con una ROCA. –

-1

save you time

+0

¿a qué sacrificio? –

+0

me complace ver que está de acuerdo con mi respuesta – Anurag

1

tengo uno! Hay algo que me parece imposible con CSS, pero es posible con tablas. Ayer hice una pregunta sobre esto y obtuve una respuesta.

Si tiene dos elementos separados que desee en una línea, independientemente del ancho, debe utilizar una tabla. Es decir, si los dos elementos están en línea o flotando, si tienen un tamaño dinámico y se vuelven más anchos que el contenedor, pasarán a la siguiente línea en lugar de desbordarse. Si absolutamente requiere que permanezcan en la misma línea, incluso si la segunda sobrepasa el ancho del contenedor, entonces deben ser celdas en una fila de la tabla.

editar: un poco de prueba muestra que esto solo es cierto con los flotadores. Si sus elementos se muestran en línea o en línea, algo, puede configurar white-space:nowrap en el contenedor. Sin embargo, en este caso parece (en FF de todos modos) hay un espacio misterioso entre los elementos, que para mi propósito de ayer, habría sido un problema.

+0

No estoy seguro de que esto sea cierto. Hay formas de controlar el comportamiento de envolver en CSS. – jlew

+0

entonces alguien me mintió en mi pregunta de ayer. Eliminaré si puedo encontrarlo. – Tesserex

+0

Quizás estén correctos en algún tipo de escenario limitado. Como afirmación general, no creo que sea precisa. – jlew

6

CSS no tiene una buena manera de manejar los datos que es genuinamente tabular. Si sus datos están estructurados en filas y columnas, la etiqueta table sigue siendo la mejor manera de presentarla. Si bien puede "falsificarlo" en CSS, resulta en código complejo y difícil de mantener sin ninguna razón real.

Tenga en cuenta que los datos tabulares no siempre significan solo tablas de números. A veces, los formularios y otros tipos de contenido interactivo también pueden ser tabulares, si sus campos se agrupan lógicamente en columnas y filas. El punto clave es preguntarse, "¿pensaría en mis datos como filas y columnas si lo escribiera en una página y la computadora no tuviera nada que ver con eso?"

+0

+1 a pesar de "sin razón real" – ANeves

+0

@sr pt - No estoy de acuerdo. El resultado final es lo que el usuario ve. Si utilizar un diseño con todo el CSS te hace sentir bien por dentro, pero te lleva tres veces más tiempo hacerlo, no estás logrando nada más que el costo de tiempo y dinero para tu empresa. – Nemi

+0

Dan es correcto: una buena definición de 'tabular' es 'cosas que se alinean ordenadamente en filas y columnas'. Como la mayoría de los formularios de entrada de datos. Como columnas estilo periódico. Al igual que la estructura principal de la mayoría de los sitios web. – Ray

0

¿Qué pueden hacer las tablas que el posicionamiento CSS no puede?
En teoría, nada, ya que puede usar display: table;, display: table-cell; u otros valores similares para display.

< ArgumentOnSemanticsUsabilityAndAcessibility/>

+0

Bueno, sí. Pero eso lo convierte en una mesa, así que lo considero fuera del espíritu de la pregunta. – jlew

+0

Pero aparte de 'asegurar que los elementos [float'ed, etc.] no se derramen' y' los tramos de columnas/filas líquidas', no veo nada que puedan hacer que no se pueda lograr con CSS. La única carta jugable en este juego para la mayoría de las situaciones es 'ahorrar tiempo '. – ANeves

-2

Úsalos (Tablas) en el margen de beneficio y que no tiene que romper la cabeza sobre posicionamiento o sobre la compatibilidad del navegador cruz . Mesas de trabajo casi la misma manera en todos los navegadores

Cuestiones relacionadas