Verwendung von Divs zur Anzeige tabellenähnlicher Daten

Question

Ich möchte Daten wie die folgenden anzeigen:

 Title     Subject    Summary    Date

Also mein HTML sieht so aus:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

Das Problem ist, dass der gesamte Text nicht in einer einzigen Zeile erscheint. Ich habe versucht, hinzuzufügen display="block" aber das scheint nicht zu funktionieren.

Was mache ich hier falsch?

Das ist wichtig: In diesem Fall möchte ich nicht mit einem table Element, sondern bleiben bei div Tags.

Answer 1

Es sieht so aus, als wollten Sie eine Tabelle anzeigen, richtig? Verwenden Sie also den <table>-Tag.

Answer 2

Ich würde das folgende Markup verwenden:

<table>
  <tr>
    <th>Title</th>
    <th>Subject</th>
    <th>Summary</th>
    <th>Date</th>
  </tr>
  <!-- Data rows -->
</table>

Eine weitere Sache, die man bei all diesen div- und listenbasierten Layouts beachten muss, selbst bei denen, die feste Breiten vorgeben, ist, dass das Layout zusammenbricht, wenn ein Textteil breiter als die Breite ist (z. B. eine URL). Das Schöne an Tabellen für tabellarische Daten ist, dass sie tatsächlich den Begriff einer Spalte haben, was kein anderes HTML-Konstrukt hat.

Auch wenn auf dieser Website einige Dinge, wie die Startseite, mit Divs implementiert sind, würde ich argumentieren, dass tabellarische Daten (wie Stimmen, Antworten, Titel usw.) in einer Tabelle sein MÜSSEN. Leute, die Divs vorantreiben, tun dies in der Regel aus Gründen der semantischen Auszeichnung. Sie verfolgen das Gegenteil davon.

Answer 3

Ich möchte nicht herablassend klingen; wenn ich das tue, habe ich Sie missverstanden und es tut mir leid.

Die meisten Menschen lehnen Tische ab, weil sie sie aus dem falschen Grund verwenden. Oft verwenden die Leute riesige Tabellen, um Dinge auf ihrer Website zu positionieren. Diese ist das, wofür Divs verwendet werden sollten. Nicht für Tabellen!

Wenn Sie jedoch Folgendes anzeigen möchten tabellarische Daten wie z. B. eine Liste von Fußballmannschaften, Siegen, Niederlagen und Unentschieden, sollten Sie auf jeden Fall Tabellen verwenden. Es ist fast unbekannt (wenn auch nicht unmöglich), Divs für diese Zwecke zu verwenden.

Denken Sie daran: Wenn es um die Anzeige von Daten geht, können Sie durchaus eine Tabelle verwenden!

Answer 4

Wenn es einen legitimen Grund gibt, keine Tabelle zu verwenden, könnten Sie jedem Div eine Breite zuweisen und es dann schweben lassen, z.B.

div.title {
    width: 150 px;
    float: left;
}

Answer 5

Gibt es einen Grund, keine Tabellen zu verwenden? Wenn Sie tabellarische Daten anzeigen, ist es am besten, Tabellen zu verwenden - dafür sind sie ja gedacht.

Um Ihre Frage zu beantworten, ist es wahrscheinlich am besten, jedem Element eine feste Breite zuzuweisen und float:left einzustellen. Sie müssen entweder ein Dummy-Element am Ende haben, das clear:both hat, oder Sie müssen clear:both auf das erste Element in jeder Zeile setzen. Diese Methode ist immer noch nicht narrensicher, wenn der Inhalt einer Zelle das Div breiter macht, wird nicht die gesamte Spalte angepasst, sondern nur diese Zelle. Sie können die Größenänderung vielleicht vermeiden, indem Sie overflow:auto oder overflow:hidden verwenden, aber das funktioniert dann nicht wie bei normalen Tabellen.