Die HTML-Tabellenelemente sollte man grundsätzlich nur für die Darstellung von Daten verwenden und nicht für das Layout oder andere Sachen, die so dargestellt werden sollen wie Tabellen. Wenn man trotzdem bestimmte Elemente wie Tabellen darstellen lassen will, kann man das sauberer mit CSS machen. CSS bietet uns nämlich genau die Möglichkeiten, die die typischen Tabellenelemente auch können.
Wann verwendet man Tabellenelemente und wann CSS-Eigenschaften?
Wie schon gesagt, sollte man die richtigen Tabellenelemente <table>, <tr>, <td> etc. nur verwenden wenn es sich um die Darstellung von Daten handelt. Das könnte zum Beispiel eine Auflistung von Filmen mit den dazugehörigen Darstellern und dem Erscheinungsjahr sein. Wenn man aber zum Beispiel Formularfelder so darstellen lassen will wie eine Tabelle (also dass die Spalte der Labels den gleichen Abstand zu den Eingabefeldern haben), dann sollte man sich für die sauberere CSS-Methode entscheiden.
Die Tabellenelemente mit CSS ersetzen
Als Beispiel nehme ich nur die drei Tabellenelemente <table>, <tr> und <td>. Diese reichen in der Regel aus um eine einfache Tabelle mit Zeilen und Spalten zu erstellen. Dabei erstellen wir für jeden Tabellentag eine entsprechende CSS-Klasse, die dann genau das macht wie das Tabellenelement eigentlich auch. Die einzige CSS-Eigenschaft, die wir dafür brauchen, ist display. Mit dieser Eigenschaft kann man nämlich veranlassen, dass sich die Darstellung der Elemente, die diese Klasse nutzen, verändert.
/* .table ersetzt das <table>-Element */
.table { display:table; }
/* .tr ersetzt das <tr>-Element */
.tr { display:table-row; }
/* .td ersetzt das <td>-Element */
.td { display:table-cell; }Die CSS-Klassen auf den HTML-Code anweden
Die vorherigen Klassen sollten eigentlich selbsterklärend sein. Alle Elemente, die diese Klassen erben, werden anders dargestellt. Jeweils als Tabelle, als Tabellenspalte oder als Tabellenzeile. Und schon hat man ein sauberes CSS-Tabellenlayout. Allerdings sollte diese Methode nur bei Layouttabellen angewendet werden. Für normale Daten nimmt man dann wieder die normalen Tabellenelemente.
