Tabellen waren schon immer ein wichtiges Layoutelement in HTML-Seiten. Tabellen haben gegenüber anderen Blockelementen mehrere Vorteile:
Man kann damit die Seite in Zeilen und Spalten unterteilen, dabei auch aneinanderliegende Zellen (in beide Richtungen) zu einer zusammenfassen. In den einzelnen Zellen kann man dann quasi alles machen, wie sonst in der Datei an sich.
Tabellen belegen nicht automatisch die gesamte verfügbare Breite, wie die übrigen Blockelemente es tun. Feste Breiten kann man zwar bei allen vorgeben, aber nur Tabellen reduzieren ihre Breite automatisch auf das nötige Maß.
Nur in Tabellenzellen kann man den Inhalt (leicht und vernünftig) vertikal ausrichten.
Das Problem ist nun, dass (X)HTML-Elemente semantische Bedeutung haben. Das table-Tag markiert deshalb den Inhalt einer Tabelle. Es für Layoutzwecke zu verwenden, stellt gewissermaßen einen Missbrauch dar. Technisch gesehen macht es das maschinelle Verständnis von Webseiten schwieriger. Die sinnvolle Vorgehensweise ist, Formatierungsanweisungen nur mit CSS vorzunehmen (das formuliert der aktuelle Standard so: In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.
). Die nötigen Festlegungen dafür gibt es seit spätestens Mai 1998 als Teil von CSS 2.0 (nur eine saubere Implementierung von colspan und rowspan wird wohl erst mit CSS 3.0 kommen). Und das ist nur das Datum er offiziellen Verabschiedung. Klar war dies sicher schon eine Weile vorher. Im Oktober 2006 kam die englische Version von IE 7 heraus. Acht Jahre später. Bis dahin war IE nicht zu einer sachgerechten Tabellendarstellung in der Lage.
Eine dateiweise CSS-Definition für die Zellen:
<head>
<style type="text/css">
.cell { display:table-cell;padding-top:0.2em;padding-bottom:0.2em;padding-left:0.4em;padding-right:0.4em;border:1px solid #6d6d6d; }
</style>
</head>
Und der eigentliche Code:
<div style="display:table;border-collapse:collapse;"> <div style="display:table-row;"> <p class="cell">A1</p> <p class="cell" style="background-color:#e6e6e6;color:black;">A2</p> <p class="cell" style="background-color:#c4c4c4;color:black;">A3</p> </div> <div style="display:table-row;"> <p class="cell">B1</p> <p class="cell" style="background-color:#e6e6e6;color:black;">B2</p> <p class="cell" style="background-color:#c4c4c4;color:black;">B3</p> </div> </div>