Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

    <colgroup>

    Bedeutung

    Gruppe von Tabellenspalten


    Notation

    <colgroup [Attribute]>[Elementinhalt]</colgroup>

    Elternelemente

    Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:

    zum <table> Element<table>.


    Elementinhalt

    Kann keinen Text, jedoch folgende andere HTML-Elemente enthalten:
    zum <col> Element<col>.


    Attribute

    Kann folgende elementspezifische Attribute enthalten:
    zum HTML5 Attribut spanspan

    Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:
    zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle

    onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll


    Standard-Style-Formateigenschaften

    colgroup {
       display: table-column-group;
    }


    Beispiel
    <table class="tabelle" >
    <colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    </colgroup>
    <tr>
    <td>1. Zeile - 1. Spalte</td>
    <td>1. Zeile - 2. Spalte</td>
    <td>1. Zeile - 3. Spalte</td>
    </tr>
    <tr>
    <td>2. Zeile - 1. Spalte</td>
    <td>2. Zeile - 2. Spalte</td>
    <td>2. Zeile - 3. Spalte</td>
    </tr>
    <tr>
    <td>3. Zeile - 1. Spalte</td>
    <td>3. Zeile - 2. Spalte</td>
    <td>3. Zeile - 3. Spalte</td>
    </tr>
    <!-- weitere Zeilen der Tabelle -->
    </table>
    <style type="text/css">
    .tabelle { width: 100%; }
    .tabelle tr { height:55px; }
    .col1 { width:150px; background-color:#CCCCCC; }
    .col2 { width:200px; background-color:#DDDDDD; }
    .col3 { width:250px; background-color:#EEEEEE; }
    </style>
    Anzeigebeispiel
    1. Zeile - 1. Spalte1. Zeile - 2. Spalte1. Zeile - 3. Spalte
    2. Zeile - 1. Spalte2. Zeile - 2. Spalte2. Zeile - 3. Spalte
    3. Zeile - 1. Spalte3. Zeile - 2. Spalte3. Zeile - 3. Spalte

    Erläuterung

    Mit dem Element <colgroup> [...] </colgroup> wird eine Spaltengruppe definiert und strukturell gruppiert. Somit ist es beispielsweise möglich einer Spaltengruppe eine Hintergrundfarbe und/oder eine einheitliche Breite zuzuweisen.

    Mit den Elementen <colgroup> und <col> werden Spaltengruppen bzw. einzelne Spalten einer Tabelle für eine spätere Gestaltung oder für den Script-Zugriff vordefinieren. Diese Elemente müssen vor allen Elementen <thead>, <tfoot>, <tbody> oder <tr> notiert werden.

    Im obigen Beispiel werden 3 Spalten definiert, wobei die Darstellung ausschließlich per CSS zu realisieren ist, da innerhalb des <col> Elements sämtliche Styling-Attribute (align, width, char, charoff, valign) untersagt sind.


    W3C Logo & WHATWG Logo Spezifikation

    Tastaturkürzel