Was ist der Vorteil von tableless Design, wenn Sie Blöcke überall brauchen Clearing?

Question

Ich verstehe, dass das Ziel in Richtung <div> Tags aus <table> bewegten macht Sinn, da es mehr semantische ist. Allerdings verstehe ich nicht den Vorteil gewonnen, wenn Sie noch eine Lichtung Block benötigen spaltenbasierten Layouts Arbeit zu machen. Zum Beispiel:

<!-- 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>

Der Fremd <br> Tag verwendet wird streng Stil zu beschreiben, und es ist erforderlich, um das Layout der Arbeit zu machen. Ist nicht diese Ruine alle aus dem Entfernen Tabellen gewonnen Vorteile?

Answer 1

Was passiert, wenn ich Ihnen sagte, Sie nicht benötigen eine Lichtung Block ?

.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

Wenn Sie tabellarische Daten anzeigt, macht es noch mehr Sinn Tabellen verwenden dann viele gefloatete divs. Verwenden Sie die Werkzeuge, die Sie mit Bedacht haben -. Nicht blind CSS verwenden, in denen Tabellen sind die beste Option

Answer 3

  

Ich verstehe, dass das Ziel in Richtung <div> Tags aus <table> bewegten macht Sinn, da es mehr semantische ist.

Eigentlich ist es genau das Gegenteil: von <table> zu <div> bewegen macht Ihre HTML weniger semantische. In der Tat, die ganze Punkt der <div> (und <span> ) Elemente haben nicht Semantik!

Es tickt mich immer aus, wenn ich einen Wald von <div>s als „semantische HTML“ zu sehen. Nein, ist es nicht! Das ist * un- * semantische HTML! Vor allem, wenn es enthält viel <div class='float-left'>, <div id='bottom'> und meine persönlichen Favoriten <div class='paragraph'> und <span class='emphasis'>.

Sie mich nicht falsch, mit un-semantischen <div>s ist sicherlich besser als die Verwendung von falsch -semantic <table>s, aber noch besser wäre es, die semantisch zu verwenden richtig -Elemente - obwohl in vielen Fällen das Problem ist, dass HTML bietet keine. In Ihrem Snippet zum Beispiel verwenden Sie das <address> Element, sondern nach die Spezifikation ist dieses Element nicht gemeint Adressen zur Markierung aufgestiegen! Es ist nur für die Adresse Markieren von des Autors der Seite -. IOW es ist völlig nutzlos

Das Beispiel, das Sie auf dem Laufenden ist viel Kontext fehlt, so ist es schwer zu sagen, aber es sieht wirklich wie Sie vielleicht entweder tabellarisch oder hierarchische Daten anzuzeigen, wobei in diesem Fall <table>s oder <ul>s könnte eine bessere Wahl sein.

---

völlig unabhängig auf Ihre Frage: Sie vielleicht einen Blick auf die hCard und XOXO Mikroformate.

Answer 4

nicht. Es gibt viele andere Vorteile zu vermeiden Tabellen.

• Tabellen statt DIVs
• DIVs vs. TABLEs eine Widerlegung bitte
• divs vs. Tabellen oder CSS vs. dumm

Answer 5

Ich persönlich benutze die clearfix für meine Clearing Bedürfnisse hacken.

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

Hinweis I Komma nur die Wähler trennen, anstatt die clearfix Klasse alles hinzufügen. Es funktioniert wirklich gut. Das einzige Problem ist, dass die zoom Eigenschaft IE spezifisch ist, und überprüft nicht, aber es gibt keine Nebenwirkungen, wie es manchmal mit anderen Eigenschaften, wie overflow: auto sein kann.

Ich habe dies ohne Probleme seit 5 Jahren in professionellen Websites im Einsatz.

Answer 6

Wie annakata Antwort zeigt, müssen Sie diese Clearing-Blöcke nicht benötigen. Aber abgesehen davon, ein Vorteil Tabelle zu vermeiden, besteht darin, dass die Seite schrittweise wiedergegeben werden kann. Eine Tabelle kann nur gemacht werden, wenn die gesamte Tabelle, einschließlich aller Inhalte, hat analysiert worden, was eine Weile dauern kann, wenn Sie eine große Seite und eine langsame Verbindung haben. divs sofort wiedergegeben werden kann, was bedeutet, dass Sie etwas vielleicht in der Lage verwendbar für den Benutzer viel früher als mit Tabellen.

präsentieren

Natürlich ist dies nur ein netter Drein Vorteil, es ist nicht und soll nicht die Grund Tabellen zu vermeiden (für Nicht-Tabellendaten)