HTML Tabelle mit Colgroup und Col

Spalten einer Tabelle vordefinieren

Eine Möglichkeit, mit Tabellen und deren Spalten in HTML umzugehen, besteht darin, die Spalten gleich zu Beginn festzulegen. Das beschleunigt die Darstellung im Browser, ist aber trotz des großen Vorteils eine wenig bekannte Variante und findet sich auch nicht sehr häufig im Internet.

Möglich wird die Vordefinition durch den HTML-Tag colgroup und zielt auf die Idee ab, dass man verschiedene Spalten hat, die aber auch unterschiedlich groß sein sollen. Spalten können sich in der Breite anpassen, abhängig vom Inhalt und abhängig von der vorhandenen Breite beim Besuch einer Internetseite.

Breite der Spalte mit dem colgroup-Tag vorgeben

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

In diesem Beispiel wurde eine Tabelle mit einer Zeile und drei Spalten angelegt. Die Tabelle wird durch das table-Tag gewohnheitsgemäß gestartet und beendet, tr ist für die Zeile zuständig und jede Zelle ergo Spalte wird durch den td-tag generiert.

Neu und weniger bekannt ist die Möglichkeit, die durch colgroup eingesetzt wurde. Dabei wurde jede der danach verwendeten Spalten als col-tag mit einer Breite ausgestattet und diese cols werden zur colgroup zusammengefasst.

Der Sinn dieser Methode ist folgender: der Browser erkennt am table-Tag, dass jetzt eine Tabelle kommt und erhält als nächsten die Information, dass drei Spalten mit der angeführten Breite angezeigt werden sollen. Er kann sich sofort darauf einrichten und muss nicht erst nachschauen, wie breit der breiteste Eintrag in den jeweiligen Spalten ist. Daher kann die Tabelle schneller angezeigt werden, als mit der normalen Technik, bei der der breiteste Eintrag die Darstellung der Spalten beeinflusst.

Alternative: Breite mit CSS festlegen

Diese Lösung ist eine gute Idee und kann oftmals auch Sinn machen, aber es gibt das Problem, dass es mittlerweile die unterschiedlichsten Breiten beim Aufruf einer Seite gibt - vom alten Handy bis zum Desktop mit 1.900 Pixel Breite. Daher sind Prozentangaben wichtig und meist werden die Spalten über CSS definiert und zwar in der Regel, dass die Tabelle als Ganzes einen Wert zugewiesen bekommt und davon holt sich jede Spalte so viel Breite als zur Verfügung steht.

Lesen Sie auch

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Die Bilder kommen eigentlich mit dem img-Tag alleine aus, sind aber enorm wichtig für den Gesamteindruck, wobei das auch vom Thema abhängt. Der img-Tag lässt sich verschieden ergänzen wie mit dem wichtigen ALT-Zusatz als Textinformation zum Bild und dann gibt es auch noch die Image-Map als Navigationsvariante auf Basis eines Hintergrundbildes.

Themenseiten

Startseite HTML-Grundlagen

HTML Tabelle mit Colgroup und Col

Spalten einer Tabelle vordefinieren

Breite der Spalte mit dem colgroup-Tag vorgeben

Alternative: Breite mit CSS festlegen

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich