Tabellen erlaubt in RWD?

[molily]

Hallo,

Sollte ich für diese Darstellung eine Tabelle nehmen?

Erbsenzählerei: HTML zeichnet den Text passend aus, für die Darstellung ist CSS zuständig. Insofern ist die erste Frage, das das geeignete Markup für den Inhalt ist, die zweite, ob und wie damit die gewünschte Darstellung erreicht werden kann.

Nun bringen Tabellen gleich ein Standard-Layout mit sich, drücken aber in erster Line eine inhaltliche Verbindung aus, sodass alternative Präsentationen möglich sind (z.B. eine verbesserte Navigation in Screenreadern).

Und wie verhält sich dieses wenn ich eine Seite kleiner mache?

Dann serialisierst du die Tabelle mit einer Media-Query, die die display-Eigenschaften der Tabellenelemente überschreibt.

table, thead/tbody, tr, td haben standardmäßig spezielle display-Werte, nämlich table, table-header-group/table-row-group, table-row, table-cell. Siehe:

http://css-tricks.com/almanac/properties/d/display/
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
http://www.w3.org/TR/CSS2/sample.html

Wenn du diese auf block, inline oder inline-block setzt (je nachdem, wie die serialisierte Tabelle aussehen soll), dann fällt das Layout in sich zusammen und die Elemente werden untereinander oder direkt nebeneinander positioniert.

Das schließt nicht aus, dass du Elemente nicht noch anders layoutest, damit sie den schmalen Viewport effektiv nutzen. Beispiel:

http://codepen.io/molily/pen/nGCxA?editors=110

Grüße
Mathias