CSS, HTML und Javascript mit {stil}

HTML colgroup und col • Tabellenspalten

HTML col und colgroup

colgroup und col steuern die Breite und die Darstellung von Tabellenspalten und sind effizienter als CSS-Eigenschaften für jede Tabellenzelle in jeder Zeile.

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

Ohne CSS und ohne colgroup / col nehmen Tabellenzellen immer möglichst 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 nehmen ohne CSS immer die volle Breite des umfassenden Blocks ein.

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.

Art. Nr. Beschreibung VE Preis in €/VE
1 VE ab 10 VE
 
VC0800020 0,8ml Klarglas, flacher Boden, 30 x 8,2mm 100 13,10 € 11,30 €
VC0800050 0,7ml Klarglas, flacher Boden, 40 x 7mm 100 15,10 € 13,50 € Beispiel: HTML table mit col und colgroup
VC0801050 0,7ml Braunglas, flacher Boden, 40 x 7mm 100 15,90 € 14,50 €
VC0800735 0,3ml Klarglas, runder Boden, 31,5 x 5,5mm 100 17,00 € 14,00 € Beispiel: HTML table mit col und colgroup
VC0800730 0,3ml Klarglas, konisch, 31,5 x 5,5mm 100 16,60 € 13,80 €

Die Codesequenz ist

<table>
    <colgroup>
        <col style="width:10%">
        <col style="width:45%">
        <col style="width:5%">
        <col span="2" style="width:15%; background: ivory">
        <col style="width:10%">
    </colgroup>
<tr> … </tr>

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> 

I.d.R. ist das span-Attribut aber im col-Tag sinnvoller und sparsamer, da meist das col-Tag die Breite von Spalten bestimmt.

<colgroup>
	<col style="width: 10%">
	<col style="width: 20%">
	<col style="width: 10%">
	<col span="2" style="width: 30%">
</colgroup> 

colgroup / col vs td:nth-child

Bei col / colgroup wirken nur die 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.

Die Pseudo-Selektoren td:nth-child() sind vielleicht einen Tick langsamer, aber deutlich flexibler. HTML colgroup und col stammen aus einer Zeit, in der kaum ein Browser die Pseudo-Selektoren nth-child, :not und :empty unterstützte. Ab 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(3) { width:  5%; }
table.vials th:nth-child(4) { width: 15%; }
table.vials th:nth-child(5) { width: 15%; }
table.vials th:nth-child(6) { width: 10%; }

Attribute und CSS für col / colgroup

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

Die HTML-Attribute align, char , charoff und width werden in HTML5 nicht mehr verwendet.