Eigenschap caption-side

De eigenschap caption-side bepaalt de positie van het tabelbijschrift, gemaakt met de tag <caption>. De eigenschap kan twee waarden hebben: top (boven de tabel, standaard) of bottom (onder de tabel).

Syntaxis

cssselector {
  caption-side: top | bottom;
}

Voorbeeld

Laten we het bijschrift boven de tabel plaatsen:

html<table border="1" width="300">
  <caption>Tabel</caption>
  <tr>
    <th>Kop</th>
    <th>Beschrijving</th>
  </tr>
  <tr>
    <td>tekst1</td>
    <td>tekst2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

Voorbeeld

En laten we nu het bijschrift onder de tabel plaatsen:

html<table border="1" width="300">
  <caption>Tabel</caption>
  <tr>
    <th>Kop</th>
    <th>Beschrijving</th>
  </tr>
  <tr>
    <td>tekst1</td>
    <td>tekst2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

Zie ook