html - create - DIVs vs. TABLES una refutación por favor

div table responsive

Question

Hay muchas personas preguntando "¿por qué no deberíamos usar tablas para estructurar nuestro HTML?" Y, aunque reciben muchas respuestas, rara vez veo a alguien convirtiéndose al mundo de la semántica. Dicho esto, todavía no he visto ninguna refutación convincente para respaldar el razonamiento de por qué deberíamos (o podríamos) usar tablas.

¿Alguien se preocupa por ofrecer un razonamiento para cuando las tablas son marcas estructurales válidas?

7 de noviembre de 2008

Considerando que esta pregunta no desapareció como pensé que sucedería, supongo que será mejor que aclare mi pregunta y explique su existencia.

A través de la frustración de haber leído el argumento de "las tablas son más fáciles" una vez, muchas veces después de la pregunta "DIVs vs. TABLEs", quise exponer la pregunta un poco más y no permitir que los amantes de la mesa se liberen tan fácilmente.

Cada uno de ellos podría decir lo mismo, pero siempre me darán alguna aplicación para poner en nuestros sitios que ha sido creada por un desarrollador de "tablas son más fáciles" que vierte un pedazo de HTML horrible en mis páginas, y para ser honesto, Simplemente no veo lo suficiente de los amantes de la mesa escuchando los argumentos.

¿Alguien usa Mambo en el día? ¿Alguien tuvo que tomar una reprimenda para poner un diseño en la parte superior del Sharepoint de Microsoft? Tener que abrirse camino a través de toda esa mierda de mesa anidada fue un infierno, y teniendo en cuenta que fue escrito por algunos malditos codificadores, me molesta muchísimo. El marcado semántico razonable ha existido por el tiempo suficiente como para que no haya ninguna razón para que los desarrolladores sigan defendiendo que "las tablas son más fáciles". Las tablas no son más fáciles, ¡son flojas!

Mi pregunta merecía el representante negativo por la forma negativa en que se presentó, pero todavía estoy esperando que la gente acepte que la única razón por la que usan tablas es porque NO CONOCEN HTML. Porque si lo hicieran, entonces entenderían, como dice jjrv, que las tablas son para datos tabulares.

Answer 1

El uso de marcas semánticas modernas es mucho más fácil cuando agrega funciones o corrige errores o cambia el aspecto de un sitio web basado en datos. Agregar funciones AJAX o cualquier clase de scripting interactivo funcionará mucho mejor con DIVs y CSS que con TABLE.

Pasar a un administrador de contenido como Drupal, Joomla, WordPress o similar será mucho más fácil si ya está organizado con marcado semántico.

Las ediciones de navegador más nuevas también admitirán el marcado moderno de manera más eficiente y su sitio se mostrará más rápido. Reordenar todas esas tablas puede dar como resultado tiempos de visualización lentos.

Por otro lado, las tablas están aquí para quedarse. Algunas personas continuarán usándolas y los navegadores continuarán mostrándolas. No hay nada intrínsecamente incorrecto con el marcado no semántico si eso es lo que quieres. Un sitio completamente estático que nunca se cambiará puede ejecutarse tan bien con tablas como con el marcado moderno.

En cuanto al marcado estructural válido, hay esto: Las tablas son una excelente manera de mostrar datos tabulares, como tablas de bases de datos o hojas de cálculo. No son realmente marcas válidas para nada más.

Answer 2

Las tablas son compatibles incluso en crujientes navegadores HTML v1.0. Si su mercado objetivo incluye personas que utilizan navegadores integrados en teléfonos móviles de la década de 1990, esa podría ser una buena razón para ir con tablas.

Muchos de los HTML autogenerados existentes usan tablas. Si su código necesita interactuar o incluir esas tablas, sería mejor buscar consistencia.

Answer 3

Las tablas son válidas cuando tienes una tabla de datos. He visto widgets de grid interactivos en los que se desviven por utilizar un montón de div para evitar la temida etiqueta de la tabla. Cuando se trata de datos tabulares, conviértalo en una tabla.

Una visión más controvertida mía es que cuando tienes problemas para resolver problemas de diseño vertical en CSS, puedes usar una tabla y, a menudo, resolverla de inmediato. No tan bonito como debería ser quizás, mezclando contenido con presentación, pero hace el trabajo y evita los ataques de CSS para evitar el IE.

Answer 4

Use tablas para el html de denominador mínimo común o para datos tabulares donde tenga sentido abarcar columnas o filas. De lo contrario, los diseños de css son mucho menos prolijos y mucho más fáciles de mantener una vez que lo dominas.

Answer 5

Yo diría que jjrv tiene razón en que las tablas son excelentes para los datos tabulares, haciendo todo lo posible por hacer que algo "funcione" como una mesa en lugar de simplemente usar una tabla es un límite retardado.

Si le importan los estándares y avanza hacia una implementación sólida en todos los navegadores, la mayoría de sus marcas deberían estar en diseños líquidos sin tablas ... y sus datos tabulares están en ... ¡lo adivinó!

si necesita atender a navegadores realmente antiguos, eso es antes de la temida ie6, entonces tendrá muchos problemas en CSS, y dadas las estadísticas de uso actuales, es bastante seguro suponer que todos tendrán un navegador "moderno" que admita diseños CSS.

Dicho todo esto y sus momentos en que golpeas tu cabeza contra la pared en un diseño y quieres / lo dices f___ a través de él en una mesa y funciona. Espero que esta sea una práctica obsoleta, pero en un clinch esto da resultados predicables.

Answer 6

RE: ¿Por qué tablas?

Porque algunas personas (todavía, después de todos estos años) tienen miedo al cambio. Han escuchado que usar HTML semántico es algo bueno (y generalmente no captan completamente el concepto). Entonces intentan armar un diseño usando CSS que nunca antes lo había hecho. Se topan con algunos problemas (bien documentados y generalmente fáciles de resolver), levantan las manos y vuelven a las mesas.

Luego deciden que el CSS "consume demasiado tiempo" ("No estoy dispuesto a perder el tiempo para aprenderlo") o "no es práctico" ("No lo entiendo. Es demasiado difícil") y que las tablas son la única forma verdadera. A través de la terquedad y la ignorancia, creen en su propia mentira y convencen a sus clientes y compañeros.

Y su mundo se mantiene feliz y sin cambios, desvaneciéndose en el pasado y sumiéndose en la obsolescencia *

Y eso es "por qué tablas". El fin.

(* excepto que son adecuados para codificar correos electrónicos HTML)

Answer 7

Una nota interesante está relacionada con aplicaciones de JavaScript altamente complejas. Si seleccionas Gmail o Google Calendar con Firebug, verás que las tablas se usan ampliamente, incluso para el diseño. Por supuesto, estos suelen generarse dinámicamente, pero esto demuestra que, en casos excepcionales, algunas interfaces de usuario interactivas muy visualmente complejas son extremadamente difíciles de construir utilizando solo DIV.

Answer 8

Las tablas son para desarrolladores que no pueden molestarse en manipular durante horas con CSS para obtener dos divisiones adyacentes de columnas para expandir al 100% de alto y ancho sin importar el contenido, y luego hacer que el truco funcione en todos los navegadores sin agregar envoltorios div adicionales y luego, finalmente, con absoluta frustración recurren a la solución de 5 segundos:

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

La dura verdad es que a la mayoría de los usuarios (excluyendo aquellos que usan lectores de pantalla) realmente no les importa cómo se marca la página, siempre que se cargue rápidamente.

Los desarrolladores tienen limitaciones presupuestarias y de tiempo, y el "buen" CSS y marcado lleva tiempo.

El hecho de que hay una multitud de recursos en la web explicando en gran detalle cómo puedes alinear dos divs para reemplazar esa tabla simple, me dice claramente que este diseño es inherentemente tan defectuoso como las tablas. ¿Cuántos tutoriales se necesitan para explicar cómo agregar una tabla con dos columnas a una página ?

HTML5 debería brindarnos cierta cordura con las nuevas etiquetas de encabezado, pie de página, sección, navegación y aparte. Ejemplo tomado de Nettuts +:

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

y luego esto para el CSS:

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

Aquellos de ustedes que tengan buen ojo amarán el sentido de la ironía, cuando observen que el CSS tiene las propiedades: display: table; y display: table-cell; .

¡Las tablas han vuelto bebé! Fui a hurtadillas a través de la puerta trasera HTML5 ;-)

Answer 9

Los diseños basados ​​en DIV adolecen de limitaciones. Sin tablas, es esencialmente imposible implementar un diseño de dos columnas que crezca correctamente en función del alto del contenido.