HTML & CSS für Einsteiger (Teil 07): Tabellen (01)

Tabellen sind recht komplexe Gebilde, die sich aus Reihen und Spalten zusammensetzen. Das äußere Grundgerüst von Tabellen bildet immer das table-Element.

<table>
…
</table>

Innerhalb dieses Elements erfolgt die eigentliche Tabellendefinition. Es empfiehlt sich übrigens, während der Umsetzung einer Tabelle in HTML dieser einen Rahmen zuzuweisen. So kann man besser nachvollziehen, wie Reihen und Spalten genau verlaufen. Dazu weist man dem einleitenden <table> die Attribut-Wert-Kombination border="1" zu. (Beachtet, dass das border-Attribut in HTML nicht verwendet werden sollte. Hier greift man stattdessen auf die entsprechenden CSS-Eigenschaften zu. Dazu aber später mehr).

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

Weiter geht es mit der Definition der Tabellenzeilen. Das geschieht über das Element tr.

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

Auch das führt aber noch nicht zur gewünschten Ausgabe. Als Nächstes muss man nämlich die Spalten definieren. Das geschieht wiederum über das td-Element.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Nun könnt ihr den ersten Tabelleninhalt definieren. Das definiert man zwischen <td> und </td>.

<table border="1">
   <tr>
      <td>Inhalt 1</td>
   </tr>
</table>

Erst jetzt lohnt ein Blick auf das Ergebnis im Browser.

Sonderlich spektakulär ist das sicherlich noch nicht, schließlich besteht die Tabelle momentan ja nur aus einer Tabellenzelle. Ihr könnt nun noch eine weitere Spalte einfügen. Das geschieht wieder über ein td-Element. Achtet darauf, dieses innerhalb des tr-Elements zu definieren.

<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
</table>

Auch hier wieder ein Blick auf das Ergebnis.

Um zusätzliche Zeilen in die Tabelle aufzunehmen, legt man einfach ein weiteres tr-Element an, in dem dann wiederum die gewünschten td-Elemente definiert werden.

Auch hierzu wieder ein Beispiel:

<table border="1">
   <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
   </tr>
   <tr>
      <td>Inhalt 3</td>
      <td>Inhalt 4</td>
   </tr>
</table>

Ein Blick auf das Ergebnis im Browser liefert folgendes Ergebnis:





Auf diese Weise könnt ihr also auch umfangreiche Tabellen erstellen.

Kopf, Körper und Fuß festlegen

Tabellen lassen sich in logische Bereiche einteilen. Dabei handelt es sich um einen Kopf-, einen oder mehrere Datenbereiche und einen Fußbereich. Das folgende Beispiel zeigt, wie so etwas aussehen kann:

<table border="1">
  <thead>
    <tr>
      <th>Abfahrt</th>
      <th>Ankunft</th>
      <th>Bahnsteig</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Und hier ein Blick auf das Ergebnis im Browser:





Einen optischen Effekt hat die Aufteilung in die genannten Bereiche offensichtlich nicht. Stellt sich natürlich eine Frage: Warum soll man sich dann die Mühe machen und diese Bereiche definieren? Dafür gibt es zwei gute Gründe:

• Mittels CSS lassen sich die Bereiche auf Wunsch unterschiedlich formatieren.

• Die Browser können beim Ausdrucken langer Tabellen den Tabellenkopf und den Tabellenfuß auf jeder Seite wiederholen.

Der Tabellenkopf wird mit thead eingeleitet. Daran schließen sich die Zeilen der Tabelle an, die zum Kopfbereich gehören. Vergesst nicht, den Kopfbereich </thead> wieder zu schließen.

Soll die Tabelle einen Tabellenfuß bekommen, muss dieser unbedingt vor dem Tabellenkörper definiert werden. Eingeleitet wird der Fuß über <tfoot>. Daran können sich wieder eine oder mehrere Zeilen anschließen, die zum Fußbereich gehören. Mit </tfoot> schließt man den Tabellenfuß.

Den eigentlichen Tabellenkörper definiert man innerhalb des tbody-Elements. Dieses tbody kann mehrfach vorkommen. Geschlossen wird ein Tabellenkörper jeweils über </tbody>.

Warum sollte man beispielsweise in einer Tabelle mehrere tbody-Elemente verwenden? Ein schönes Beispiel dafür könnte die Tabelle der Fußball-Bundesliga sein. In einer solchen Tabelle gibt es üblicherweise mehrere Bereiche.

• Meister

• Champions-League-Teilnehmer

• Champions-League-Qualifikant

• Europa-League-Teilnehmer

• Das graue Mittelfeld

• Relegationsplatz

• Absteiger

Jeden dieser Bereiche könnte man in ein eigenes tbody-Element packen und diese dann mittels CSS anders gestalten.

Spalten vordefinieren

Wie die Tabelle von den Browsern angezeigt wird, hängt natürlich in erster Linie von der vorhandenen Anzahl an Zeilen und Spalten ab. Der Prozess, eine Tabelle anzuzeigen, ist für den Browser allerdings nicht ganz einfach. Tatsächlich muss ein Browser nämlich immer erst die gesamte Tabelle einlesen, bevor er die Tabelle anzeigen kann. Gerade bei sehr umfangreichen Tabellen kann das natürlich eine gewisse Zeit in Anspruch nehmen. Dieses Problem lässt sich umgehen, indem man dem Browser direkt mitteilt, aus wie vielen Spalten die Tabelle tatsächlich besteht.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Über colgroup wird die Vorab-Definition der Spaltenangaben eingeleitet. Beachtet, dass die meisten der in früheren HTML-Versionen verfügbaren Attribute für colgroup in HTML5 nicht mehr zulässig sind. Gestattet ist von denen jetzt lediglich das span-Attribut. Als Wert erwartet dieses span die Anzahl der in der Tabelle enthaltenen Spalten.

Das colgroup-Element steht direkt hinter dem einleitenden <table>. Die Spalten selbst werden dann durch die einzelnen col-Elemente definiert.

Beim Einsatz von colgroup hat man prinzipiell zwei Möglichkeiten:

• Mit span-Attribut

• Ohne span-Attribut

Verwendet man kein span-Attribut, muss innerhalb des colgroup-Elements für jede Spalte, über die sich die Spaltengruppe erstrecken soll, jeweils ein col-Element definiert werden. Beachtet dabei, dass es sich bei col um ein Standalone-Element handelt.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titel</th>
     <th>Preis</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Eine kurze Geschichte von fast allem</td>
     <td>29,95 Euro</td>
   </tr>
 </table>

Es gibt übrigens auch noch eine Mischform.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Das ist immer dann praktisch, wenn eine Spalte separat vordefiniert werden soll, man die anderen aber in einer Gruppe zusammenfassen möchte.