Het element <caption>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet worden gebruikt. Ze worden hieronder gedocumenteerd ter referentie bij het bijwerken van bestaande code en alleen vanwege het historische belang.

Gebruiksopmerkingen

• Indien aanwezig, moet het <caption>-element het eerste kind zijn van het bovenliggende <table>-element.
• Wanneer een <table> is genest binnen een <figure> als enige inhoud van de figure, moet deze worden voorzien van een onderschrift via een <figcaption> voor de <figure>, in plaats van een <caption> genest binnen de <table>.
• Elke background-color die op een tabel wordt toegepast, wordt niet toegepast op het bijbehorende onderschrift. Voeg ook een background-color toe aan het <caption>-element als u wilt dat dezelfde kleur achter beide staat.

Voorbeeld

Zie <table> voor een compleet tabelvoorbeeld met een introductie tot algemene standaarden en best practices.

Tabel met onderschrift

Dit voorbeeld demonstreert een eenvoudige tabel met een onderschrift dat de gepresenteerde gegevens beschrijft.

Zo'n "titel" is nuttig voor gebruikers die de pagina snel scannen, en is vooral gunstig voor slechtziende gebruikers, omdat het hen in staat stelt de relevantie van de tabel snel te bepalen zonder dat een schermlezer de inhoud van veel cellen moet voorlezen om erachter te komen waar de tabel over gaat.

HTML

Een <caption>-element wordt gebruikt als eerste kind van de <table>, met tekstinhoud die vergelijkbaar is met een titel om de tabelgegevens te beschrijven. Er worden drie rijen aangemaakt, waarvan de eerste een header-rij is, met twee kolommen, met behulp van de elementen <tr>, <th> en <td> na de <caption>.

<table>
  <caption>
    User login email addresses
  </caption>
  <thead>
    <tr>
      <th>Login</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>user1</td>
      <td>user1@example.com</td>
    </tr>
    <tr>
      <td>user2</td>
      <td>user2@example.com</td>
    </tr>
  </tbody>
</table>

CSS

Er wordt wat basis-CSS gebruikt om de <caption> uit te lijnen en te markeren.

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

Resultaat

Technische samenvatting

Zie ook

• <col>
• <colgroup>
• <table>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>
• <tr>
• <table>