CSS, HTML & Javascript mit {stil}

HTML colgroup und col – Tabellenspalten

colgroup fasst mehrere Spalten zusammen, z.B. um eine Gruppe von Spalten unter einem gemeinsamen Header nach außen zu kennzeichnen. col beschreibt einzelne Spalten: Breite, Rahmen und Hintergrundfarbe aller Zellen einer Spalten können mit CSS geändert werden. Das bringt der zeilenorientierten Tabelle eine zusätzliche Spaltenorientierung.

HTML colgroup Tabellenspalten

Breite von Tabellen und Zellen

HTML-Tabellen sind zeilenorientiert. Ohne colgroup- und col-Elemente können Eigenschaften wie Hintergrundfarben nur Zeilen oder einzelnen Tabellenzellen zugewiesen werden.

Ohne CSS nehmen Tabellenzellen immer den vollen Platz für ihren Inhalt ein. Erst wenn die Breite des umfassenden Blocks nicht reicht, bricht der Text in einer Tabellenzelle um und macht Platz für den Inhalt anderer Tabellenspalten.

Gleichzeitig nehmen Tabellen mit HTML table nur die Breite ein, die sie für ihren Inhalt brauchen. Andere Blockelemente wie div und p hingegen nehmen ohne CSS immer die volle Breite des umfassenden Blocks ein.

colgroup und col

colgroup und col weisen den Spalten einer Tabelle Attribute oder CSS-Eigenschaften zu. Anstelle eines col-Tags für jede Tabellenspalte zeigt span="2" an, dass diese Spalten gleich behandelt werden.

ArtikelBeschreibungVEPreis in €/VEPackshot
VC0800020 0,8 ml Braunglas 100 13,10€ 11,30€
VC0800050 0,7 ml Braunglas 150 15,10€ 13,50€
VC0801050 0,7 ml Braunglas
0,7 ml Klarglas		 120 15,90€ 14,50€
VC0800735 0,3 ml Klarglas 250 17,00€ 14,00€
VC0800730 0,3 ml Klarglas 70 16,60€ 13,80€ 
<table class="vials">
    <colgroup span="3" class="single"></colgroup>
    <colgroup span="2" class="cols2"></colgroup>
    <col class="single">
    <tr>
	 …
</table>

CSS

.cols2 {
    background: hsla(220,50%,80%,0.5);
}

colgroup sitzt nach einem evtl. caption-Tag (Über-/Unterschrift) und dann vor allen thead, tbody, tfood und tr-Tags und enthält col-Elemente für die Spalten der Tabelle.

Der Aufbau der Tabelle wird durch col und colgroup-Tags nicht geändert. Weiterhin sind Tabellenreihen mit tr aufgebaut und Tabellenzellen (th- und td-Elemente) müssen weiterhin in tr-Tags sitzen.

Innerhalb eines colgroup-Elements können nur col-Tags sitzen. Wenn allerdings das span-Attribut des colgroup-Tags benutzt wird, kann das col-Tag nicht verwendet werden.

<colgroup span="3" style="width: 40%">
</colgroup> 
<colgroup span="2" style="width: 60%">
</colgroup>

colgroup / col vs td:nth-child

HTML colgroup und col stammen aus einer Zeit, in der kaum ein Browser die Pseudo-Selektoren nth-child, :not und :empty unterstützte.

Was so aussieht, als könnte es das Rezept für responsive Tabellen sein, die Spalten auf kleinen Monitoren einfach kollabieren lassen, verkraftet nur wenige CSS-Eigenschaften:

  • border (nur wenn border-collapse:collapse für die Tabelle vereinbart ist)
  • background
  • width

Weitere CSS-Eigenschaften wie text-align und color haben keine Wirkung. Es gibt zwar noch die CSS-Eigenschaft visibility : collapse, die speziell für Tabellen gilt, aber visibility : collapse ist in vielen Browsern fehlerhaft und würde Tabellenspalten auch nicht kollabieren lassen, sondern nur einfach nicht anzeigen.

Die Pseudo-Selektoren td : nth-child sind vielleicht einen Tick langsamer, aber deutlich flexibler. Schon seit IE 8 ist ein einfaches nth-child() auf der sicheren Seite.

table.vials th:nth-child(1) { width: 10%; }
table.vials th:nth-child(2) { width: 45%; }
table.vials th:nth-child(5) { width: 15%; }

Attribute und CSS für col / colgroup

span
Zahl der folgenden Spalten, die mit den gleichen Werten dargestellt werden sollen.

Das width -Attribut ist im HTML5 nicht mehr vorhanden.

Suchen auf mediaevent.de