PHP

Tabellenüberschriften optimal positionieren

Details

Veröffentlicht am Donnerstag, 18. Dezember 2008 16:03

Geschrieben von Jan Pionzewski

Mit Hilfe eines CSS-Attributs ist es möglich, Tabellenüberschriften 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. Die Überschrift wird dabei an der angegebenen Tabellenseite genau an der Tabelle positioniert.


Beispiel:

<table border="1">
<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: können Sie 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 dafür, dass die Überschrift an der obersten Zelle der Tabelle ausgerichtet wird.