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

    <col>

    Bedeutung

    Tabellenspalte


    Notation

    <col [Attribute]>[Elementinhalt]</col>

    Elternelemente

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

    zum <colgroup> Element<colgroup> und zum <table> Element<table>.


    Elementinhalt

    void-Element, darf keinen End-Tag haben und ist ohne Inhalt.


    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

    col {
       display: table-column;
    }


    Beispiel
    <table class="tabelle">
    <colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    </colgroup>
    <tr>
    <td class="td1">1. Zeile - 1. Spalte</td>
    <td class="td2">1. Zeile - 2. Spalte</td>
    <td class="td3">1. Zeile - 3. Spalte</td>
    </tr>
    <tr>
    <td class="td1">2. Zeile - 1. Spalte</td>
    <td class="td2">2. Zeile - 2. Spalte</td>
    <td class="td3">2. Zeile - 3. Spalte</td>
    </tr>
    <tr>
    <td class="td1">3. Zeile - 1. Spalte</td>
    <td class="td2">3. Zeile - 2. Spalte</td>
    <td class="td3">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; }
    .td1 { text-align:right; vertical-align: top; }
    .td2 { text-align:center; vertical-align: middle; }
    .td3 { text-align:left; vertical-align: bottom; }
    </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

    Für jede Spalte, über die sich die Spaltengruppe erstrecken soll, ist zwischen <colgroup> [...] </colgroup>, je ein <col /> Element zu notieren.

    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