Tabellenüberschrift optimal positionieren

Du kannst mit Hilfe von CSS an einer Tabelle dabei die Tabellenüberschrift optimal positionieren. Dies kannst du sowohl an der Ober-, als auch an der Unterseite der Tabelle machen. Der Einsatz von diesem CSS Attribut ist daher bei allen Tabellen sinnvoll, die eine Überschrift enthalten.

In diesem Artikel zeige ich dir dabei, wie das funktioniert.

 

Mit CSS eine Tabellenüberschrift optimal positionieren

Oftmals kann man, jedenfalls ohne zusätzliche Zellen, nur sehr schwierig eine Tabellenüberschrift optimal positionieren. Mit Hilfe des Attributs caption-side wird genau das jedoch möglich. Mit diesen CSS Angaben kannst du dabei die Überschrift an der angegebenen Seite der Tabelle genau positionieren.

Nachfolgend zeige ich dir dazu ein Beispiel.

 

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 dabei die Werte top oder bottom zuweisen, wobei top der Standard-Wert ist. Mit dem Attribut top positionierst du die Überschrift dabei selbstredend an der Oberseite der Tabelle. Mit bottom positionierst du dementsprechend die Überschrift hingegen an der Unterseite der Tabelle.

Du kannst dir dazu anhand der folgenden Bilder die Positionierung der Überschriften anschauen.

Tabellenüberschrift optimal positionieren (oben)
Optimal positionierte Überschrift (oben)

Tabellenüberschrift optimal positionieren (unten)
Optimal positionierte Überschrift (unten) 

Fazit

Mit dem Attribut caption-side kannst du folglich die Tabellenüberschrift optimal positionieren. Das solltest du nutzen, da du hierdurch für ein sauberes Layout sorgen kannst.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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