CSS/Eigenschaften/Tabellenformatierung/caption-side

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das caption-Element lässt sich praktisch wie ein Blockelement formatieren. Beispielsweise lassen sich Außenabstände, Rahmen oder Innenabstände definieren.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Beispiel ansehen …
table {
  caption-side: bottom;
}
caption {
    background-color: #fdfcf3; 
    border: 1px solid #e7c157;    
	padding-top: 1em;
	margin-top: 1em;
}
Die Tabelle erhält mit caption-side eine CSS-Festlegung, dass die Tabellenunterschrift auch wirklich unterhalb der Tabelle platziert wird. Zur besonderen Kennzeichnung wurde die caption selbst mit einem farbigen Rand und Hintergrund und ein bisschen Abstand formatiert.
  <table>
    <caption>Verzeichnis der Teilnehmer</caption>
    <thead>
      <tr>
        <th>Nr.</th>
        <th>Name</th>
        <th>Vorname</th>
        <th>Wohnort</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Nr.</th>
        <th>Name</th>
        <th>Vorname</th>
        <th>Wohnort</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>1</th>  
        <td>Müller</td>  
        <td>Max</td>  
        <td>Minden</td>  
      </tr>
      <tr>
        <th>2</th>  
        <td>Siegert</td>  
        <td>Siegfried</td>  
        <td>Siegen</td>  
      </tr>
    </tbody>
  </table> 
  </body>
</html>

Mit der Eigenschaft caption-side können Sie den Ort der Tabellenbeschriftung festlegen. Erlaubt sind dabei folgende Werte:

  • top (Standardwert), die Beschriftung befindet sich oberhalb der Tabelle und bildet mit dieser ein gemeinsames Blockelement
  • bottom die Beschriftung befindet sich unterhalb der Tabelle und bildet mit dieser ein gemeinsames Blockelement
Beachten Sie: Die Deklarationen caption-side: left bzw. caption-side: right wurden in CSS3 aus dem Standard entfernt.