Table

Title	Text	Price ($)	Link
Title value 1	Text value 1	57	Link 1
Title value 2	Text value 2	12.50	Link 2
Title value 3	Text value 3	90	Link 3
Title value 4	Text value 4	1.50	Link 4

Voorbeeld HTML

<div class="rvo-table--responsive">
  <table class="rvo-table">
    <thead class="rvo-table-head">
      <tr class="rvo-table-row">
        <th
          scope="col"
          class="rvo-table-header rvo-table-header--sortable"
          style="cursor:pointer"
        >
          <div class="rvo-table-header__sortable-container">Title</div>
        </th>
        <th
          scope="col"
          class="rvo-table-header rvo-table-header--sortable"
          style="cursor:pointer"
        >
          <div class="rvo-table-header__sortable-container">
            Text
            <svg
              width="39"
              height="48"
              viewBox="0 0 39 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="rvo--table-header__sorting-icon"
            >
              <path
                d="M12.7728 0.837455C12.4072 0.325207 11.8411 0.0171769 11.2348 0.000703278C10.6287 -0.0158624 10.0484 0.260969 9.65853 0.752418L0.879879 11.8005C0.252827 12.5881 0.253521 13.7403 0.881355 14.5279C1.50901 15.313 2.57945 15.5091 3.41717 14.984L7.90141 12.1819L7.92233 45.8789C7.92233 47.6365 9.26541 48 10.9231 48C12.5809 48 13.924 47.6365 13.924 45.8789L13.9173 12.3081L18.316 15.3901C19.1286 15.9587 20.2057 15.8213 20.8707 15.0728C21.5357 14.3205 21.5922 13.1701 21.0042 12.3492L12.7728 0.837455Z"
                fill="var(--rvo-color-hemelblauw)"
              ></path>
              <path
                d="M29.5795 47.3719C29.8406 47.7561 30.245 47.9871 30.6781 47.9995C31.111 48.0119 31.5255 47.8043 31.804 47.4357L38.0744 39.1496C38.5223 38.5589 38.5218 37.6948 38.0734 37.1041C37.625 36.5152 36.8605 36.3682 36.2621 36.762L33.0591 38.8636L33.0441 13.5908C33.0441 12.2726 32.0848 12 30.9007 12C29.7166 12 28.7572 12.2726 28.7572 13.5908L28.762 38.7689L25.6201 36.4574C25.0397 36.031 24.2703 36.134 23.7953 36.6954C23.3203 37.2597 23.2799 38.1224 23.6999 38.7381L29.5795 47.3719Z"
                fill="var(--rvo-color-grijs-800)"
              ></path>
            </svg>
          </div>
        </th>
        <th
          scope="col"
          class="rvo-table-header rvo-table-header--sortable rvo-table-header--numeric"
          style="cursor:pointer"
        >
          <div class="rvo-table-header__sortable-container">Price ($)</div>
        </th>
        <th
          scope="col"
          class="rvo-table-header rvo-table-header--sortable"
          style="cursor:pointer"
        >
          <div class="rvo-table-header__sortable-container">Link</div>
        </th>
      </tr>
    </thead>
    <tbody class="rvo-table-body">
      <tr class="rvo-table-row">
        <td class="rvo-table-cell">Title value 1</td>
        <td class="rvo-table-cell">Text value 1</td>
        <td class="rvo-table-cell rvo-table-cell--numeric">57</td>
        <td class="rvo-table-cell">
          <a href="#" class="rvo-link">
            Link 1
          </a>
        </td>
      </tr>
      <tr class="rvo-table-row">
        <td class="rvo-table-cell">Title value 2</td>
        <td class="rvo-table-cell">Text value 2</td>
        <td class="rvo-table-cell rvo-table-cell--numeric">12.50</td>
        <td class="rvo-table-cell">
          <a href="#" class="rvo-link">
            Link 2
          </a>
        </td>
      </tr>
      <tr class="rvo-table-row">
        <td class="rvo-table-cell">Title value 3</td>
        <td class="rvo-table-cell">Text value 3</td>
        <td class="rvo-table-cell rvo-table-cell--numeric">90</td>
        <td class="rvo-table-cell">
          <a href="#" class="rvo-link">
            Link 3
          </a>
        </td>
      </tr>
      <tr class="rvo-table-row">
        <td class="rvo-table-cell">Title value 4</td>
        <td class="rvo-table-cell">Text value 4</td>
        <td class="rvo-table-cell rvo-table-cell--numeric">1.50</td>
        <td class="rvo-table-cell">
          <a href="#" class="rvo-link">
            Link 4
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Open in nieuwe tab

Met tabellen toon en organiseer je data in rijen en kolommen.

Wanneer gebruik je een tabel?

Je gebruikt een tabel wanneer er data getoond wordt die vergeleken met elkaar moet kunnen worden.

Anatomie

Een tabel bestaat uit:

1. Caption: deze beschrijft de inhoud van de tabel.
2. Table header: deze bevat de titel van de kolom.
3. Table cell: bevat data.
4. Table column: bevat een verticale representatie van tabel cellen.
5. Table row: bevat een horizontale representatie van tabel cellen.

Richtlijnen

• Een tabel toont altijd een collectie tonen van gestructureerde data.
• Plaats een duidelijke en logische header boven een kolom.
• Gebruik een caption om de tabel te beschrijven.
• Kolommen worden getoond op volgorde van belangrijkheid waarbij de belangrijkste kolom als eerst geplaatst wordt.
• Zorg ervoor dat de context altijd bewaard blijft door gebruik te maken van headers die vast geplakt blijven wanneer de gebruiker naar beneden scrolt.
• Spreek menselijke taal: laat alleen relevante kolommen zien die waarde hebben. Dus geen nietszeggende referentienummers.
• Maak de tabel horizontaal scrolbaar wanneer er onvoldoende ruimte is op het scherm om de tabel volledig te tonen.
• Lijn data in tabelcellen aan de bovenkant uit om de scanbaarheid te vergroten.
• Verander de layout niet wanneer tabellen op een kleiner scherm getoond moet worden. Hierdoor verdwijnt de onderliggende semantiek van de tabel.
• Lijn tekst altijd links uit.
• Lijn getallen die een grootte vertegenwoordigen (bijvoorbeeld een geldbedrag of aantal inwoners) altijd rechts uit zodat deze beter te vergelijken zijn met andere data in dezelfde rij.
• Gebruik een monospaced font voor getallen zodat elk cijfers dezelfde ruimte innemen. Hierdoor zijn getallen die onder elkaar staan makkelijker te vergelijken.
• Lijn de header van de kolom hetzelfde uit als de data die eronder staat. Als de data rechts uitgelijnd staat, zorg er dan voor dat de header ook rechts uitgelijnd staat.
• Hou als richtlijn aan dat een rij maximaal 3 regels hoog mag zijn.
• Kader data af met een ellipsis wanneer deze te groot is om op 2 regels te passen.
• Headers starten met een hoofdletter en eindigen niet met een komma, puntkomma of punt.
• Neem meeteenheden (zoals € or m2) op in de table header. Dan hoeft dat niet telkens in de kolom. Prijs (€)
• Tekst in een cell begint met een hoofdletter
• Data in een cell bevat geen meeteenheid. Die zet je in de header.
• Wees consistent in het gebruik van decimalen.
• De sortering wordt toegepast op alle items en over alle pagina’s als er paginering is
• Kolommen die gesorteerd kunnen worden hebben een sorteer icoon.

Rijkshuisstijl

De Rijkshuisstijl kent geen specifieke voorschriften wat betreft tabellen.

Bronnen

• Data Tables
• Designing Mobile Tables - Steven Hoober