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 …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Tabellenbeschriftung mit caption {caption-side}</title> <style> table { caption-side: bottom; } table, th, td { border: 1px solid; border-collapse: collapse; } </style> </head> <body> <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.