Tabellenüberschriften optimal positionieren

Mit Hilfe eines CSS-Attributs ist es möglich, Überschriften von Tabellen optimal an der Tabelle zu positionieren. Dies kann an allen vier Seiten einer Tabelle geschehen. Sinnvoll ist dieser Einsatz bei allen Tabellen, die eine Überschrift enthalten sollen.

Oftmals gestaltet es sich schwierig, ohne eine zusätzliche Zelle die Überschrift genau zu positionieren. Mit Hilfe des CSS-Attributs caption-side: wird genau das jedoch möglich. Mit diesen Stylesheet-Angaben kannst du die Überschrift an der angegebenen Tabellenseite genau an der Tabelle positionieren.

 

Code-Beispiel:

<table>
 <caption style="caption-side:top">Tabellenüberschrift</caption>
   <tr>
     <th>Aufgabe</th>
     <th>Uhrzeit</th>
   </tr>
   <tr>
     <td>Meeting</td>
     <td>08:00</td>
   </tr>
   <tr>
     <td>Mittagessen mit Chef</td>
     <td>12:00</td>
   </tr>
   <tr>
     <td>Frau von der Arbeit abholen</td>
     <td>16:00</td>
   </tr>
</table>

 

Erklärung:

Dem Attribut caption-side: kannst du folgende Werte zuweisen: top, right, bottom oder left. Mit den Werten top und bottom wird die Tabellenüberschrift mittig oben oder unten an der Tabelle positioniert. Die Werte left und right sorgen für die Ausrichtung der Überschrift an der obersten Zelle der Tabelle.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.