Eigenschaft caption-side

Die Eigenschaft caption-side legt die Position der Tabellenüberschrift fest, die mit dem Tag <caption> erstellt wurde. Die Eigenschaft kann zwei Werte haben: top (oben über der Tabelle, Standard) oder bottom (unter der Tabelle).

Syntax

cssSelektor {
  caption-side: top | bottom;
}

Beispiel

Lassen Sie uns die Überschrift über der Tabelle platzieren:

html<table border="1" width="300">
  <caption>Table</caption>
  <tr>
    <th>Head</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>text1</td>
    <td>text2</td>
  </tr>
</table>

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

Результат:

Beispiel

Und jetzt lassen Sie uns die Überschrift unter die Tabelle verschieben:

html<table border="1" width="300">
  <caption>Table</caption>
  <tr>
    <th>Head</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>text1</td>
    <td>text2</td>
  </tr>
</table>

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

Результат:

Siehe auch