Kopfzeile für Tabellen

Wir wollen nun noch einen weiteren Bereich in der Tabelle kennen lernen – die Kopfzeile. Der Bereich für die Tabellenreihen mit dem Kopf wird durch den HTML-TAG <thead> und </thead> gekennzeichnet. Auch der Bereich für den Inhalt sollte mit dem entsprechenden HTML-TAG für Inhalt ausgezeichnet werden – mit <tbody> und </tbody>

Unsere ergänzte Tabelle sieht nun wie folgt aus:

<table border="1"> 
  <thead>
  </thead>

  <tbody>
    <tr>
      <td> HSA2843 </td>
      <td> 11:20 </td>
    </tr>
  </tbody>
</table>

Bisher wird kein Inhalt für den Kopfbereich angezeigt. Jetzt geben wir den Bereich für die Reihe vor, also mit dem bisher schon gewohnten <tr> für „table row“

<table border="1"> 
  <thead>
    <tr>

    </tr>
  </thead>

  <tbody>
    <tr>
      <td> HSA2843 </td>
      <td> 11:20 </td>
    </tr>
  </tbody>
</table>

Auch jetzt kann noch kein Inhalt für den Kopf angezeigt werden, es steht ja auch keiner drin. Jetzt werden die einzelnen Tabellen-Zellen in HTML ausgezeichnet. Allerdings gibt es hierfür einen anderen HTML-TAG anstelle von <td>: für den Kopfbereich und die einzelnen Kopfzellen wird als Anfangs-TAG <th> und End-TAG </th> verwendet. <th> steht für „table header“

<table border="1"> 
  <thead>
    <tr>
      <th> Flugnummer </th>
      <th> Abflugzeit </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td> HSA2843 </td>
      <td> 11:20 </td>
    </tr>
  </tbody>
</table>

Warum der Unterschied für Kopf und Inhalt bei Tabellen?

Dadurch ist eine logische Gliederung der Tabelle festgelegt. Das Design im Kopfbereich ist automatisch auch anders. Die Schrift wird hervorgehoben und zentriert dargestellt. Ein eigenes Design kann später mit CSS darübergestülpt werden.

Beim Ausdruck ist der Unterschied wichtig. Wenn Kopfzeilen verwendet werden, wird (wenn die Tabelle nicht auf eine DIN-A4-Seite passt) automatisch auf der zweiten Ausdrucksseite wieder die Spaltenüberschriften gedruckt. Am besten folgendes PDF mit den Flugzeiten über 2 Seiten ansehen.

Ausdruck einer Tabelle zum Vergleich von Firefox und Internetexplorer

In den PDF-Ausdrucken ist der Unterschied zwischen verschiedenen Browsern zu sehen. Bei Firefox wird sauber auf jeder Seite Kopf und Fuß-Bereich ausgedruckt - der IE machts nur einmal :(

Tabelle als Ausdrucken über Firefox (PDF)
Tabelle als Ausdrucken über IE (PDF)

Tabellen Fußzeile

HTML5-Video-Kurs:
hier klicken für
mehr Informationen

weitere eigene Projekte:

Programmiersprachen

Bildbearbeitung & Fotografieren

MS Office Kurs / Ernährung