Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Tabellenkopf und Tabellenfuß für HTML-Tabellen

Es kann bei HTML-Tabellen der Kopfbereich, sprich die Spaltenüberschriften und der Fußbereich (gerne Zusammenfassungen und Aufsummierungen) mit entsprechenden HTML-Befehlen angelegt werden.

Dazu gibt es für den Kopfbereich die Befehle <thead>, die den kompletten Kopfbereich umschließt und <th>, der jede einzelne Zelle umschließt anstelle von <td>.

<table>

  <thead>
    <tr>
      <th>Studiengang 1</th>
      <th>Studiengang 2</th>
      <th>Studiengang 3</th>
    </tr>
  </thead>

Der Fußbereich wird durch den HTML-Befehl <tfoot> umschlossen und der eigentliche Inhalt durch die HTML-Anweisung <tbody>. Ein vollständiges Code-Beispiel ist weiter unten aufgeführt.

Vorteil: Design

Durch diese HTML-Befehle kann das Design problemlos über CSS und die TYP-Selektoren thead bzw. th angewendet werden. Das ist ein großer Vorteil!

Vorteil: Ausdruck mit automatischen Tabellenkopf

Zusätzlich kommt beim Ausdruck ein weiterer Vorteil zum Tragen. Bei einem Ausdruck, der umfangreicher als eine Seite ist, wird dieser in HTML gekennzeichnete Kopf- und Fußbereich automatisch, auf jeder neuen ausgedruckten Seite, in der Tabelle am entsprechenden Platz integriert. Das ermöglicht erst eine sinnvolle Nutzung von Ausdrucken.

Soweit die Theorie – in der Praxis sieht es so aus, dass dies bei aktuellen Browserversionen funktioniert, allerdings beim IE in älteren Versionen nicht vollständig.

Ein Beispiel der Druckerausgabe von Tabellenkopf und Tabellenfuß in Form von PDFs:

Aufbau der Befehle

<table border="1">

  <thead>
    <tr>
      <th>Studiengang 1</th>
      <th>Studiengang 2</th>
      <th>Studiengang 3</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Stuttgart</td>
      <td>Tübingen</td>
      <td>Karlsruhe</td>
    </tr>
    <tr>
      <td>Stuttgart</td>
      <td>Tübingen</td>
      <td>Karlsruhe</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>8.6 Mio.</td>
      <td>12.3 Mio.</td>
      <td>3.2 Mio.</td>
    </tr>
  </tfoot>

</table>

Das Aussehen der Tabelle

Studiengang 1 Studiengang 2 Studiengang 3
8.6 Mio. 12.3 Mio. 3.2 Mio.
Stuttgart Tübingen Karlsruhe
Stuttgart Tübingen Karlsruhe
weitere eigene Projekte: