¿Cuál es el beneficio de tableless de diseño si usted necesita despejar bloques en todas partes?

Question

Entiendo que el objetivo de avanzar hacia <div> etiquetas de <table> tiene sentido, ya que es más semántica.Sin embargo, no entiendo el beneficio obtenido si usted todavía necesita un bloque de compensación para hacer de columna basado en los diseños de trabajo.Por ejemplo:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

Los extraños <br> la etiqueta se utiliza estrictamente para describir el estilo, y es necesario para hacer el trabajo de diseño.No esta ruina de todos los beneficios que se obtienen a partir de la eliminación de las tablas?

Answer 1

Lo que si he dicho usted no necesidad un bloque de compensación?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

Answer 2

Si usted es mostrar datos tabulares, todavía tiene más sentido utilizar tablas, a continuación, muchos flotando divs.El uso de las herramientas que han sabiamente - no ciegamente uso de CSS donde las mesas son la mejor opción.

Answer 3

Entiendo que el objetivo de avanzar hacia <div> etiquetas de <table> tiene sentido, ya que es más semántica.

En realidad, es exactamente lo contrario:movimiento de <table> a <div> hace que tu HTML menos semántica.De hecho, la todo el punto de la <div> (y <span>) elementos a tener no la semántica!

Siempre las garrapatas que me fuera, cuando veo un bosque de <div>s descrito como "HTML semántico".No, no lo es!Que *onu-*HTML semántico!Especialmente si contiene una gran cantidad de <div class='float-left'>, <div id='bottom'> y mis favoritos personales <div class='paragraph'> y <span class='emphasis'>.

No me malinterpreten, el uso de onu-semántico <div>s es sin duda mejor que el uso de mal-semántica <table>s, pero aún mejor sería utilizar el semánticamente correcto elementos – aunque en muchos casos el problema es que el HTML no ofrece ningún tipo.En el fragmento por ejemplo, utilizar el <address> elemento, pero de acuerdo a la especificación, este elemento no significaba para marcar direcciones!Es sólo para marcar la dirección de el autor de la página – IOW es absolutamente inútil.

El ejemplo que has publicado se encuentra una gran cantidad de contexto, por lo que es difícil de decir, pero en realidad se ve como es posible que desee mostrar, ya sea tabular o jerárquica de los datos, en cuyo caso <table>s o <ul>s podría ser una mejor opción.

---

Totalmente ajenos a su pregunta:es posible que desee echar un vistazo a la hCard y XOXO los microformatos.

Answer 4

No en todos.Hay un MONTÓN de otros beneficios para evitar el uso de tablas.

• Tablas en lugar de DIVs
• DIVs vsLas tablas de una refutación por favor
• DIV versusTablas o CSS vsSer Estúpido

Answer 5

Yo personalmente uso el clearfix hack para mis necesidades de compensación.

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

Aviso yo sólo separados por comas de los selectores en lugar de agregar el clearfix clase a todo.Funciona realmente bien.El único problema es que el zoom la propiedad se IE específicos y no valida, pero no hay efectos secundarios, como no puede ser, a veces, con otras propiedades, como overflow: auto.

He estado usando esto en los sitios web profesionales para 5 años sin problemas.

Answer 6

Como annakata la respuesta de la muestra, usted no necesita los bloques de compensación.Pero aparte de esto, una ventaja para evitar las tablas es que la página se puede representar de forma progresiva.Una tabla sólo puede estar representado cuando el todo la tabla, incluyendo todo su contenido, ha sido analizado, que puede tomar un tiempo si usted tiene una gran página y una conexión lenta.divs puede procesarse de inmediato, lo que significa que usted podría ser capaz de presentar algo usable para el usuario mucho antes que con las tablas.

Por supuesto, esto es sólo un pequeño y agradable bono de ventaja, no lo es, y no debería ser el la razón para evitar las tablas (para los datos no tabulados)