Tabel

Voor weergave van tabulaire data.

Voorbeelden

Basis

Visueel voorbeeld

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Basisvoorbeeld tabel:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
  </table>
</div>

Tabel met footer

Om de gebruiker te informeren over de inhoud van de tabel, is het aan te raden om een titel toe te voegen met daarin de omschrijving van de tabel. Voeg direct binnen de table een caption toe om de titel toe te voegen.

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-scroll">
  <table>
    <caption>Table with titlebar and title example:</caption>
    <thead>
      <tr>
        <th scope="col">Table header heading 1</th>
        <th scope="col">Table header heading 2</th>
        <th scope="col">Table header heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor set</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Table footer heading 1</th>
        <th>Table footer heading 2</th>
        <th>Table footer heading 3</th>
      </tr>
      <tr>
        <td>Table footer 1</td>
        <td>Table footer 2</td>
        <td>Table footer 3</td>
      </tr>
    </tfoot>
  </table>
</div>

Instelbare variabelen

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  /* Table */
  --table-font-size: ;
  --table-font-weight: ;
  --table-line-height: ;
  --table-text-color: ;
  --table-background-color: ;
  --table-border-width: ;
  --table-border-style: ;
  --table-border-color: ;
  --table-text-align: ;
  --table-font-weight: ;
  --table-cells-padding: ;

  /* Table head */
  --table-head-background-color: ;
  --table-head-text-color: ;
  --table-head-border-width: ;
  --table-head-border-style: ;
  --table-head-border-color: ;
  --table-head-text-align: ;

  /* Table head cell (th) */
  --table-head-cell-padding: ;
  --table-head-cell-font-weight: ;
  --table-head-cell-font-size: ;
  --table-head-cell-border-width: ;
  --table-head-cell-border-style: ;
  --table-head-cell-border-color: ;

  /* Table head cell (th) binnen tbody */
  --table-body-head-cell-padding: ;
  --table-body-head-cell-font-weight: ;
  --table-body-head-cell-background-color: ;
  --table-body-head-cell-text-color: ;
  --table-body-head-cell-font-size: ;
  --table-body-head-cell-border-width: ;
  --table-body-head-cell-border-style: ;
  --table-body-head-cell-border-color: ;

  /* Table row */
  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
  --table-row-background-color-striping: ;
  --table-row-border-width: ;
  --table-row-border-style: ;
  --table-row-border-color: ;

  /* Table cell (td) */
  --table-cell-padding: ;
  --table-cell-background-color: ;
  --table-cell-text-color: ;
  --table-cell-border-width: ;
  --table-cell-border-style: ;
  --table-cell-border-color: ;

  /* Table cells within the first row */
  --table-first-row-cell-border-width: ;
  --table-first-row-cell-border-style: ;
  --table-first-row-cell-border-color: ;

  /* Table cells within the last row */
  --table-last-row-cell-border-width: ;
  --table-last-row-cell-border-style: ;
  --table-last-row-cell-border-color: ;

  /* Table footer */
  --table-foot-background-color: ;
  --table-foot-padding: ;
  --table-foot-text-color: ;
  --table-foot-font-weight: ;
  --table-foot-font-size: ;
  --table-foot-border-width: ;
  --table-foot-border-style: ;
  --table-foot-border-color: ;

  /* Table footer head */
  --table-foot-header-background-color: ;
  --table-foot-header-padding: ;
  --table-foot-header-text-color: ;
  --table-foot-header-font-weight: ;
  --table-foot-header-font-size: ;
  --table-foot-header-border-width: ;
  --table-foot-header-border-style: ;
  --table-foot-header-border-color: ;

  /* Table footer cell styling */
  --table-foot-cell-background-color: ;
  --table-foot-cell-padding: ;
  --table-foot-cell-text-color: ;
  --table-foot-cell-font-weight: ;
  --table-foot-cell-font-size: ;
  --table-foot-cell-border-width: ;
  --table-foot-cell-border-style: ;
  --table-foot-cell-border-color: ;
}