Tabellenloses Webdesign ist in - immer mehr Webmaster erstellen ihre Webseiten ohne Zuhilfenahme von Layout-Tabellen. Positiv ist es, wenn HTML-Elemente nur noch zur Strukturierung der Informationen gebraucht werden, und nicht mehr zur Formatierung, für letzteres gibt es schließlich CSS. Der Gebrauch des Wortes tabellenlos deutet allerdings an, dass hier zumindest von der Vorstellung her über das Ziel hinausgeschossen wird. Denn es gibt neben den zahlreich gebrauchten Layout-Tabellen auch noch die Tabellen, die ihrem eigentlichen Zweck nachkommen, Daten tabellarisch zu strukturieren. Diese durch divs oder andere HTML-Elemente zu ersetzen wäre sogar unsinnig. Gerade von Anfängern in CSS und "tabellenlosem" Design kommen aber auch immer wieder die Frage danach, wie man Tabellen, die tabellarische Daten enthalten, mit divs nachbilden kann.
Wie unterscheidet man aber nun genau die Layout-Tabellen von den "echten" Tabellen? Im letzteren Fall wird der Inhalt der Zellen durch die jeweilige Spalten und Zeilen bestimmt, wie z.B: in der folgenden Tabelle:
| Element | englisch | deutsch |
|---|---|---|
| table | table | Tabelle |
| th | table header | Tabellenkopf |
| tr | table row | Tabellenzeile |
| td | table data | Tabellenzelle |
Der Inhalt der Zellen kann nicht einfach verschoben werden in andere Zellen, ohne den Kontext zu verfälschen. So ist es in diesem Fall zweckmäßig, auch im HTML-Quelltext mit einer Tabelle zu arbeiten. Anders verhält es sich mit folgender Auflistung:
Hier ist die Anordnung willkürlich, die Elemente lassen sich untereinander verschieben, ohne dass ein Sinnzusammenhang verloren geht. Von daher handelt es sich hierbei nicht um eine originäre Tabelle, man kann dieses Gebilde folglich getrost auch mittels anderer HTML-Elemente erstellen; ein festes Raster kann dabei mithilfe der CSS-Eigenschaften float und clear sowie mit festen Breiten- und Höhenangaben erreicht werden.