Tabellen

Op deze pagina:

    Tabellen kunnen er zeer complex uitzien, de mogelijke basisstructuur:

    
    <table>
    <!-- caption --*gt;
    <caption>Titel voor de tabel over de volle breedte</caption>
    <!-- colgroup -->
    <colgroup>
    <col colspan="aantalKolommen" style="stijleigenschappen">
    </colgroup>
    <!-- table head -->
    <thead>
    <tr>
       <th>kolomkop1</th>
       <th>kolomkop2</th>
       <th>kolomkop3</th>
    </tr>
    </thead>
    <!-- table body -->
    <tbody>
    <tr>
       <td>tekstOfWaarde1</td>
       <td>tekstOfWaarde2</td>
       <td>tekstOfWaarde3</td>
    </tr>
    <tr>
       <td>tekstOfWaarde4</td>
       <td>tekstOfWaarde5</td>
       <td>tekstOfWaarde6</td>
    </tr>
    </tbody>
    <!-- table footer -->
    <tfoot>
    <tr>
       <td>tekst1</td>
       <td>tekst2</td>
       <td>tekst3</td>
    </tr>
    </tfoot>
    </table>
    

    Met colgroup kun je een aantal kolommen een specifieke opmaak geven.

    Met colspan bepaal je het aantal kolommen dat je wenst samen te nemen, maar je kan de colspan er ook weglaten en die pas later aan een "col-element" toevoegen.

    De colgroup-container moet ofwel meteen na de "caption" komen, ofwel meteen na de "table" wanneer je geen "caption" gebruikt. Bovendien moet de colgroup steeds voor de "thead" komen.

    Bij de lege tag col geef je met het "span-attribuut" aan hoeveel kolommen je uit een tabel wil groeperen.

    In style geef je de opmaak-kenmerken voor die kolommen weer. De volgorde van de kolommen in de tabel is dezelfde als de volgorde van de "col-elementen".

    Een voorbeeld met een tabel met 4 kolommen:

    
    <colgroup>
    <col colspan="2" style="...">
    <!-- Eerste twee kolommen -->
    <col style="...">
    <!-- Derde kolom -->
    </colgroup>
    

    De vierde kolom die hier niet apart vermeld wordt krijgt dan de standaard opmaak.

     

    Verwante artikelen