Beschrijving: Met CSS, Cascading Stylesheets zijn fraaie effecten te bereiken. Deze serie pagina's die horen bij de sectie Webontwerp, geeft een aantal voorbeelden daarvan. Specifiek betreft deze pagina het correct structureren van tabellen met hyper text markup language (geheel niet eenvoudig) en deze vervolgens van opmaak te voorzien met cascadign style sheets. Trefwoorden: HTML, CSS, Cascading Stylesheets, tabellen, correcte structuur, semantische markup.

Tabelstructuren

voorbeelden
[Alt]+ gaat naar
Accesskeys
S Sla sectienavigatie over
0 CSS voorbeelden
1 twee kolommen
2 centreren content
3 verticaal centreren
4 menu's met effecten
5 frames simuleren
6 tabellen
7 news alert
8 pop-up's
9 testpagina's

Over tabellen

Tabellen zijn een beproefde manier van datapresentatie. In één oogopslag ziet de lezer welke gegevens worden gepresenteerd en hoe die gegevens gelezen moeten worden.
In deze pagina's staat een aantal tabellen opgenomen, in volgorde van toenemende complexiteit, waarbij wordt toegewerkt naar de volgende (basis)structuur:

    <table
      summary="samenvatting van de tabel">

      <caption
        align="top|right|bottom|left">
        het bijschrift bij de tabel
      </caption>

      <colgroup
        span="cols"
        width="px|%|*"
        align="left|right|center"
        valign="top|bottom|baseline">
        <col
           width
           align
           valign>
        <col>
        <col>
      </colgroup>

      <thead>
        <tr>
          <th
            colspan="cols"
            scope="colgroup|col">tabeltitel</th>
        </tr>
        <tr>
          <th
            scope="colgroup|col">kolomkop</th>
          <th scope>kolomkop</th>
          <th scope>kolomkop</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <th
            colspan="cols">voettekst bij de tabel</th>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <th
            scope="row">rijkop</th>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <th
            scope="row">rijkop</th>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <th
            scope="row">rijkop</th>
          <td>data</td>
          <td>data</td>
        </tr>
      </tbody>

    </table>

De tabellen zijn opgebouwd in HTML. Het uiterlijk wordt verder verzorgd door gebruik te maken van CSS

De voorbeelden

Als een voorbeeld je toont wat jij zoekt om je data te presenteren, kun je in de broncode van de pagina zien hoe de structuur aan de tabel is gegeven en in de CSS nagaan hoe die structuur vervolgens is vormgegeven.

Voorbeeld van een simpele tabel, drie kolommen, waarbij de kolombreedte voor alledrie op 120px is gezet:

kolom 1 kolom 2 kolom 3
data data data
data data data
data data data

Voorbeeld van een tabel met overkoepelende kop en wat variatie in kolombreedte en plaatsing van de data:

tabeltitel
kolom 1 kolom 2 kolom 3
data data data
data data data
data data data

Voorbeeld van een tabel met datacel van meer dan één rij hoog:

kolom 1 kolom 2 kolom 3
data data data
data data data
data data

Voorbeeld van een weer wat complexere tabel: tabeltitel, kolom- èn rijkoppen, één datacel van twee rijen hoog:

tabeltitel
kolom 1 kolom 2 kolom 3 kolom 4
rijkop data data data
rijkop data data data
rijkop data data

Voorbeeld van een complex model tabel: tabeltitel, meerdere cellen over meerdere rijen of kolommen verdeeld:

tabeltitel
kolom 1 kolom 2 kolom 3 kolom 4
rijkop data data
rijkop data data
rijkop data data
data data

Voorbeeld van een idem complex model tabel met dan ook nog eens lange content van de datacells (hier wordt voor het eerst duidelijk waarom je de breedte van de individuele kolommen zou willen bepalen met <colgroup> en <col>); toegevoegd zijn nog <tfoot> en <caption> om een zo compleet mogelijke tabel te laten zien:

<caption>: gecombineerd gebruik van allerlei opties voor tabellen in HTML-pagina's
tabeltitel
kolom 1 kolom 2 kolom 3 kolom 4
<tfoot>: voettekst van de tabel
rijkop data data
rijkop data datadedata data datata de datada data data datatata de datada data
rijkop data data
data data

Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina.

Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,