Meldingen op tabel-elementen testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Visueel voorbeeld:

Tabelvoorbeeld meldingen:
Table header heading 1 Table header heading 2 Table header heading 3
Foutmelding op tabelrij Foutmelding op tabelrij Foutmelding op tabelrij
Waarschuwing op tabelrij Waarschuwing op tabelrij Waarschuwing op tabelrij
Bevestiging op tabelrij Bevestiging op tabelrij Bevestiging op tabelrij
Toelichting op tabelrij Toelichting op tabelrij Toelichting op tabelrij
Primair op tabelrij Primair op tabelrij Primair 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>