HTML <caption> Tag

Definitie en gebruik

<caption> De tag definieert de tabeltitel.

De caption-tag moet direct na de table-tag komen. Je kunt alleen een titel definiëren voor elke tabel.

Tip:Standaard zal de tabeltitel boven in het midden van de tabel worden uitgelijnd. Maar de CSS-eigenschappen text-align en caption-side kunnen worden gebruikt om de titel uit te lijnen en te plaatsen.

Zie ook:

HTML DOM referentiemanual:Caption object

Voorbeeld

Voorbeeld 1

Tabel met titel:

<table>
  <caption>Maandelijkse spaargeld</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3000</td>
  </tr>
</table>

Try it yourself

Voorbeeld 2

Titel van de locatietafel (gebruik CSS):

<table>
  <caption style="text-align:right">Mijn spaargeld</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3000</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3000</td>
  </tr>
</table>

Try it yourself

Global attributes

<caption> The tag also supports Global attributes in HTML.

event attributes

<caption> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <caption> Element:

caption {
  display: table-caption;
  text-align: center;
}

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support