Tabellen

Früher wurde das Layout mit Hilfe von Tabellen gestaltet. Heute erfüllt css alle Aufgaben der Gestaltung. Dennoch sind Tabellen sehr nützlich. Um eine Tabelle zu eröffnen braucht es den Tag <table>. Danach werden die Zeilen mit <tr> (table row) angelegt, in denen mit dem Tag <td> (table data cell) die Zeilen geschrieben werden. Diese Tabelle würde dann so aussehen, allerdings ist sie zur Anschauung mit css "sichtbar" gemacht.

Zellen verbinden

Mit dem Attribut <colspan> (Spalte überspannen) ist es möglich Zellen nach rechts miteinander zu verbinden. Die zu überspringende Zelle muss auch beim Code ausgelassen werden.

Mit dem Attribut <rowspan> (Zeile überspannen) ist es möglich Zellen nach unten miteinander zu verbinden. Die zu überspringende Zelle muss auch beim Code ausgelassen werden.

Tabellen Überschrift

Um einer Tabelle eine Überschrift zu verpassen gibt es den Tag <caption>. Dieser muss direkt nach dem table-Tag kommen. Auch einzelne Spalten können beschriftet werden, mit dem Tag <th> (table header). Diese Überschriften kommen in eine eigene tr-Tag Zeile, statt dem td-Tag benutzt man dann den th-Tag

Tabellen strukturieren

Tabellen können in drei Bereiche aufgeteilt werden: Kopf, Körper und Fuß. Die dazu passenden Tags lauten <thead>, <tbody>, <tfoot> Optisch haben diese Tags keinen Einfluss, ist die Tabelle jedoch sehr groß wird nur im Body-Bereich gescrollt. Kopf und Fuß bleiben sichtbar und erleichtern so das lesen der Tabelle.

Dieses Beispiel hat keine Fußzeile, aber das Prinzieb ist das selbe. Kopf und Fuß haben meist nur eine Zeile, währen der Körper über alle anderen Zeilen geht.