HTML Tutorial: Spaltenbreiten definieren

Ohne genauen Angaben zur Breite (und Höhe) einer jeden Spalte ermittelt der Browser den notwendigen Platzbedarf selbständig. Dies ist in einigen Fällen völlig ausreichend, oft aber optisch nicht zwingend optimal. Das folgende Beispiel zeigt, wie die Breite einer Tabelle festgelegt werden kann.

Neben dem bereits bekannten Standardteil des Tabellen-Code finden wir im Beispiel zwei neue Tags. Das <colgroup>-Tag muss hierbei unmittelbar hinter dem startenden <table>-Tag folgen und so viele <col>-Tags enthalten wie Spalten in der Tabelle erwünscht sind. In unserem Beispiel sollte es drei Spalten geben.

Während das <colgroup>-Tag normal geöffnet und geschlossen wird, sind die <col>-Tags alleinstehend. In XHTML müssen sie also am Ende ein Leerzeichen sowie den Schrägstrich erhalten - in regulärem HTML kann der Schrägstrich weggelassen werden.

Das width (Englisch für Breite) gibt die gewünschte Breite in Pixeln für die jeweilige Spalte an, wobei der Browser die Angaben immer von links an deutet. Der erste Wert definiert also die ganz links Spalte, der zweite Wert die zweite Spalte von links usw. Im Beispiel erhalten wir also eine Tabelle, deren linke Spalte 150 Pixel breit ist, einem Mittelteil mit 600 Pixeln sowie einem rechten Bereich mit 150 Pixeln.

Spaltenbreiten mit CSS definieren

Neben der oben genannten Möglichkeit der Definition von Spaltenbreiten über das <colgroup>-Tag kann eine Breite auch mit Hilfe von CSS bestimmt werden. Das folgende Beispiel zeigt, wie dies funktioniert.

Anstatt des <colgroup>-Tags finden wir hier innerhalb der <td>-Tags das bekannte style-Attribut, mit dem CSS-Befehle eingeleitet werden. Darin steht width sowie hinter einem Doppelpunkt die gewünschte Breite in einer gewünschten Maßeinheit (in CSS sind auch andere Maßeinheiten möglich wie z.B. width: 10 cm; oder width: 25 pt;.

Tabellen sind aus Layoutgründen in drei Bereiche aufgeteilt. Welche dies sind und wie diese angesprochen werden können, wird im nächsten Abschnitt erklärt.