para - ¿Por qué el diseño de cuadrícula Bootstrap es preferible a una tabla HTML?

tablas en html5 (9)

Básicamente los DIV son DIVs y los elementos de tabla son simplemente elementos de tabla. El problema con las tablas a menudo es hacer un seguimiento de todas las columnas y las filas porque, en última instancia, es una construcción de datos estricta. Los DIV son mucho más flexibles y permisivos.

Por ejemplo, si quisiera tomar los cuatro DIV con la clase que equivale a "span4" y simplemente cambiarlos a un ancho de 2 columnas, todo lo que tendría que hacer es ajustar un poquito de CSS para la clase externa "fila" y tal vez la clase "span4". De hecho, al hacer DIV de esta manera evitaría llamar a DIV individuales "span4" o algún otro número.

Mi enfoque sería crear un contenedor DIV padre que se llama "rowspan" y los DIV internos tendrían una identificación genérica como quizás "cell".

<div class="rowspan"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>

Cada clase de "célula" podría tener un ancho de 100 píxeles, por ejemplo, y la matriz "rowspan" podría ser de 400 píxeles. Eso equivaldría a 4 columnas seguidas. ¿Quieres que sea de 2 columnas? ¡No hay problema! Simplemente cambie "rowspan" para que tenga 200 píxeles de ancho. En este punto, todo está en CSS, por lo que es fácil hacerlo sin re-estructurar la estructura de la página en el DOM.

Pero con las tablas? No es fácil. Tendría que volver a procesar la tabla básicamente con las etiquetas </tr><tr> para crear nuevas filas.

[Nota: para aquellos que pueden estar confundiendo esta pregunta con "por qué no usar tablas para el diseño HTML", no estoy haciendo esa pregunta. La pregunta que me hago es por qué el diseño de la cuadrícula es fundamentalmente diferente del diseño de una tabla.]

Estoy investigando las bibliotecas CSS (en particular, Bootstrap) para un proyecto. Soy un programador en lugar de un diseñador web y creo que podría beneficiarme de una biblioteca que encapsula un buen diseño.

Todos sabemos que es una mala práctica usar tablas HTML para lograr el diseño básico del sitio porque mezcla la presentación con el contenido. Uno de los beneficios proporcionados por las bibliotecas de CSS como Bootstrap es que ofrecen la capacidad de crear diseños de "cuadrícula" sin usar tablas. Sin embargo, estoy teniendo un pequeño problema al entender cómo sus diseños de cuadrícula difieren de manera significativa del diseño de tabla equivalente.

En otras palabras, ¿cuál es la diferencia fundamental entre estos dos ejemplos de HTML? ¿Me equivoco al pensar que el diseño de la cuadrícula es simplemente una tabla con otro nombre?

<div class="row"> <div class="span16"></div> </div> <div class="row"> <div class="span4"></div> <div class="span4"></div> <div class="span4"></div> <div class="span4"></div> </div>

<table> <tr> <td colspan=4></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>

Creo que el comentario de CBroe es la mejor opción, así que decidí aclararlo.

Evita los div . Un div debería ser su último recurso, no su primera opción. En su lugar, intente utilizar clases de Bootstrap en los elementos reales. Por ejemplo:

<form class="container"> <fieldset class="row"> <label class="span4" for"search">Type your search</label> <input class="span6" type="text" id="search" /> </fieldset> </form>

Es una pena usar fieldset para contener un solo campo, pero es semánticamente mejor que usar un div para la misma cosa. El estándar HTML5 define muchos elementos nuevos de contenedor, como article , section , header , footer y muchos más . En algunos casos, tendrá que usar div ''s, pero si minimiza su uso, su código será mucho más semántico.

La diferencia es que el primer ejemplo está semánticamente marcado , suponiendo que los datos marcados no son en realidad tabulares. <table> solo debe usarse para datos tabulares , no para ningún dato que se muestre en un diseño similar a una tabla.

Sin embargo, es correcto usar paquetes CSS como Bootstrap, que requieren que asignes clases a elementos HTML que no son semánticos sino de presentación, lo que reduce la separación de contenido y presentación, haciendo la diferencia un tanto discutible. Debería asignar clases semánticamente significativas a sus elementos y usar lesscss mixins (o tecnología similar) para asignar el comportamiento de presentación definido en el marco CSS a estas clases, en lugar de asignar las clases de presentación a los elementos directamente.

Decir:

<div class="products"> <div class="product"></div> </div> .products { .row; } .products > .product { .span16; }

Tenga en cuenta que digo que debería . En la práctica, esta no es necesariamente la opción más viable, pero debería ser el objetivo teórico.

La diferencia fundamental es que puede "volver a enfocar" el diseño con Bootstrap para diferentes tamaños de pantalla simplemente utilizando consultas de medios sin necesidad de cambiar su marcado. Por ejemplo, puedo decidir que en los escritorios, quiero que tus 4 divs estén en la misma fila porque el usuario tiene una pantalla ancha de alta resolución, pero en los teléfonos quiero 2 inmersiones en una fila y las siguientes divisiones en las siguientes filas. De esta forma, puedo adaptar el recuento de columnas en cada fila mediante consultas de medios. Si usa tablas HTML codificadas, es muy difícil hacer esto.

Habiendo dicho eso, realmente no me gusta la implementación de bootstrap por las siguientes razones:

Tiene puntos de interrupción codificados en píxeles. Esto significa que, a medida que los teléfonos y las mesas avancen en la resolución de la pantalla, su sitio web puede comenzar a mostrar diseños inesperados en esos dispositivos. El conteo de píxeles es un pobre proxy para el tamaño de la pantalla.
Limita el área de visualización máxima utilizada a 1170px, lo cual es una decepción para los usuarios con pantallas anchas que pueden usar para ver más contenido en su aplicación.
El diseño de Bootstrap no es independiente de la fuente, es decir, no puede cambiar el orden de las columnas establecido en HTML. Sin embargo, este es más un punto pedante.
El diseño predeterminado es para resolución muy pequeña y los diseños de mayor resolución se activan solo cuando las consultas de medios se activan, lo cual es una opción incorrecta ya que los teléfonos seguirán teniendo una mejor resolución y más pronto que tarde su sitio web tendrá un diseño predeterminado para dispositivos móviles obsoletos.
Los diseños de Bootstrap no son realmente "sin preocupaciones" en el sentido de que tiene que leer su letra pequeña para ver todos los errores y navegadores que no considera dignos de apoyar, pero que le pueden interesar. Si se dirige a usuarios en Corea del Sur o China, se sorprenderá, por ejemplo.

Por lo tanto, no todo es oro en bootstrap y su enfoque no necesariamente es siempre el mejor posible (como un lado, otra cosa que desprecio en bootstrap es su obsesión con los llamados "jumbotrones" - esos bienes inmuebles perdiendo inconveniente en su cara encabezados, que espero que la comunidad no empiece a tomar como "nuevo estándar"). Personalmente, utilizo el diseño de tablas CSS ( display:table ) en la actualidad, que tiene ventajas similares a bootstrap sin hardcoding <table> en mi marcado. Todavía puedo usar las consultas de medios para reorganizar las filas dependiendo de la orientación vertical u horizontal, por ejemplo. Sin embargo, el beneficio más importante es que mis diseños son verdaderamente de píxel o incluso de porcentaje independiente. Por ejemplo, en el diseño de 3 columnas, dejo que el contenido decida cuánto espacio deben ocupar la primera y la última columna. No hay pixel o incluso el ancho porcentual. La columna central capta todo el espacio restante (lo cual es bueno para mi aplicación, pero puede no serlo para otros). Además, uso ems en los puntos de interrupción de consulta de medios, lo que sorprendentemente no arranca.

La versión con tabla, tr, td depende de los algoritmos del navegador: ajuste, ancho dinámico, márgenes, centrado, etc. La versión con div puede ajustarse más fácilmente mediante css y scripts.

Si bien no hay necesariamente mucha diferencia semántica entre los dos conjuntos de marcado (ya que las clases utilizadas por el sistema de cuadrícula de Bootstrap son puramente de presentación), una distinción muy importante es que el sistema de cuadrícula es mucho más flexible.

Sería muy difícil, por ejemplo, hacer que su diseño basado en tablas responda a diferentes tamaños de pantalla. No hay forma de decirle al navegador que muestre un elemento td debajo de otra td en la misma fila. Mientras que con el ejemplo div , eso es fácil de hacer, y el mismo marcado se puede presentar de diferentes maneras incluso cuando las clases son "de presentación" en el sentido de que definen las proporciones relativas y el posicionamiento de los elementos en la página.

Si me es posible, me gustaría resumir lo que recolecté de los otros comentarios y la explosión del enlace que experimenté en esta página:

El problema con el uso de tablas no es el diseño de la cuadrícula, sino el intento de expresarlo con HTML en lugar de CSS.

Bootstrap permite diseños de cuadrícula a través de (principalmente) CSS puro, por lo que está bien. La parte ''principalmente'' viene porque su HTML aún estará contaminado por sus datos de diseño, pero de forma más sutil:

<nav class="span4"> ... </nav> <article class="span8"> ... </article>

Sin duda, esto es mucho más semántico y fácil de mantener que los viejos diseños tabulares, pero el ''span4'' y el ''span8'' siguen siendo datos de visualización incrustados en nuestro HTML. Sin embargo, dado que el diseño nunca se puede desacoplar verdaderamente de nuestros datos (por ejemplo, divs anidados), este es un precio razonable a pagar.

Dicho esto, incluso este acoplamiento puede romperse, si utiliza algunas características CSS más modernas proporcionadas por un lenguaje preprocesado como LESS . El mismo ejemplo:

<nav id="secondary-nav"> ... </nav> <article id="main-content"> ... </article>

Junto con el siguiente MENOS:

#secondary-nav{ .span4; // More styling (padding, etc) if needed } #main-content{ .span8; }

Esto crea HTML y Stylesheet totalmente desacoplados, lo cual es ideal, porque el HTML es más limpio y más legible, y se pueden rediseñar con menos modificaciones de HTML. Sin embargo, esto solo funciona si usa LESS o algún otro preprocesador CSS, porque CSS actualmente no es compatible con mixins (AFAIK).

Ya usamos LESS en mi lugar de trabajo, así que sé que estaré presionando para usar este tipo de solución. Soy un gran creyente en HTML semántico y desacoplamiento de diseño de datos. :)

Utilizo la cuadrícula Bootstrap para el diseño de página, tablas para datos tabulares.

Pienso en la grilla de Bootstrap, no como una grilla en el sentido de desarrollador, como un control de grilla, sino más bien en el sentido de diseño de página de diseño, como una grilla para contener los contenidos de la página. Y aunque la cuadrícula Bootstrap también podría usarse para crear una cuadrícula convencional que contenga datos tabulares, como señaló deceze, este tipo de cuadrícula es más adecuada para las tablas HTML, que todavía son aceptables de usar en este escenario.

si solo usa tablas, creo que se perderá mucha flexibilidad al redimensionar su documento para dispositivos móviles / tabletas sin tener que crear una página separada para cada dispositivo. una vez que se define la estructura de su mesa, todo lo que realmente puede hacer es acercar y alejar.