HTML 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

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

So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel