HTML: Spaltenformatierung mit Colgroup

von Christoph Hörl

Colgroup gehört zu den eher selten gesehenen HTML-Elementen. Damit lassen sich innerhalb einer Tabelle ganze Spalten auf einmal formatieren – ohne lästige Wiederholungen. Allerdings sind sich die Browser in der Interpretation nicht einig.

Mit Colgroup lassen sich mehrere Spalten, unabhängig ob TD oder TH, zu einer Gruppe zusammenfassen. Der Colgroup-Block muss zwischen Öffnungs-Tag der Tabelle und der ersten <tr>-Zeile platziert werden, es können aber auch mehrere Gruppen definiert werden.

Zwischen Anfangs- und End-Tag definiert man dann, ähnlich wie bei Frames, die einzelnen Spalten durch den Inline-Tag <col>. Diesem Tag wird mit dem Attribut “width” die Breite der Spalte zugewiesen.

 <table style="border:1px solid black;">
    <colgroup>
    <col width="200" style="background-color:#AAAAAA; font-color:#800000;
    font-weight:bold; font-family:Verdana" />
    <col width="100" style="background-color:#FE8924;"
    span="2"/>
    </colgroup>
    <tr>
    <th>&Uuml;berschrift 1</th>
    <th>&Uuml;berschrift 2-1</th>
    <th>&Uuml;berschrift 2-2</th>
    </tr>
    <tr>
    <td>Spalte 1</td>
    <td>Spalte 2-1</td>
    <td>Spalte 2-2</td>
    </tr>
    <tr>
    <td>Spalte 1</td>
    <td>Spalte 2-1</td>
    <td>Spalte 2-2</td>
    </tr>
</table>

Ein weiteres Attribut ist “span”, das es ermöglicht mehrere Col-Tags zu einer weiteren Gruppe zusammenzufassen. Beachtet werden muss dabei nur, dass die mit “width” angegebene Breite für alle Spalten der Gruppe gilt. “span” erwartet als Attribut einen numerischen Wert, der die Anzahl der zu gruppierenden Spalten wiedergibt.

Die Tabelle im Opera Browser

…in Mozilla

Bis hierhin gibt es in Sachen Browserkompatibilität noch keine Einschränkungen. Um die Tabelle zu verschönern, kann auch das Attribut “style” eingesetzt werden, das CSS-Code in die Tabellenspalten bringt. Hier werden nun erste Unterschiede zwischen den Browsern sichtbar. Mozilla Firefox 0.8 unterstützt keine CSS-Formatierung, wohingegen Opera 7 nur den Wert “background” kennt, der der Spalte die Hintergrundfarbe zuweist.

…und im Explorer

Der Microsoft Internet Explorer 6 erkennt jegliche Formatierung, ob Schrift, Farbe oder Abstand. Solange man jedoch keine Spalten formatieren, sondern nur Breiten festlegen will, ist es das Col-Element eine praktische Vereinfachung.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.