Meldingen op tabel-elementen testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Visueel voorbeeld:

Tabelvoorbeeld meldingen:
Table header heading 1Table header heading 2Table header heading 3
Foutmelding op tabelrijFoutmelding op tabelrijFoutmelding op tabelrij
Waarschuwing op tabelrijWaarschuwing op tabelrijWaarschuwing op tabelrij
Bevestiging op tabelrijBevestiging op tabelrijBevestiging op tabelrij
Toelichting op tabelrijToelichting op tabelrijToelichting op tabelrij
Primair op tabelrijPrimair op tabelrijPrimair op tabelrij

HTML-voorbeeld:

class op individuele knoppen

<div class="horizontal-scroll">
  <table>
    <caption>Tabelvoorbeeld meldingen:</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 class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
        <td class="error">Foutmelding op tabelrij</td>
      </tr>
      <tr>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
        <td class="warning">Waarschuwing op tabelrij</td>
      </tr>
      <tr>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
        <td class="confirmation">Bevestiging op tabelrij</td>
      </tr>
      <tr>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
        <td class="explanation">Toelichting op tabelrij</td>
      </tr>
      <tr>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</td>
        <td class="primary">Primair op tabelrij</td>
      </tr>
    </tbody>
  </table>
</div>