Hauptmenü

Untermenü

HTML - Elemente - Tabellen

1. Wichtig

Früher wurden Tabellen vor allem als Layout- und Design-Element eingesetzt, um Internetseiten optisch ansprechend aufzubauen. Heutzutage sollte man allerdings darauf verzichten und Tabellen nur noch zur Darstellung tabellarischer Inhalte benutzen.

2. Aufbau

Eine Tabelle besteht prinzipiell aus folgenden Elementen: der eigentlichen Tabelle, den Zeilen, Kopfspalten und Datenspalten. Die Syntax sieht so aus:


<table>
  <!-- erste Zeile -->
  <tr>
    <th>Kopfspalte 1</th>
    <th>Kopfspalte 2</th>
    <th>Kopfspalte 3</th>
  </tr>
  <!-- zweite Zeile -->
  <tr>
    <td>1. Datenspalte Zeile 1</td>
    <td>2. Datenspalte Zeile 1</td>
    <td>3. Datenspalte Zeile 1</td>
  </tr>
  <!-- dritte Zeile -->
  ...
</table>

Das <tr> steht dabei für eine komplette Zeile, während man mit dem <td> einzelne Spalten kennzeichnet. Bitte achtet vor allem auf die Anzahl der Spalten in jeder Zeile. Das ist einer der beliebtesten Fehler, wenn es zu Darstellungsproblemen kommt. Das <th> steht übrigens für Spaltenüberschriften und muss nicht zwangsläufig verwendet werden.

3. Logische Unterteilung

Zusätzlich kann man Tabellen auch noch in logische Abschnitte unterteilen. Dem Kopf <thead>, dem Body- oder Hauptbereich <tbody> und dem Fuß <tfoot>. Wichtig dabei ist, dass <tfoot> vor dem eigentlichen <tbody> aufgeführt wird. Fragt mich jetzt bitte nicht weshalb. Ist einfach so.


<table>
  <thead>
    <tr>
      <th>Kopf 1</th>
      <th>Kopf 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Foot 1</td>
      <td>Foot 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1</td>
      <td>Body 2</td>
    </tr>
  </tbody>   
</table>

4. Tabellen-Attribute

... gibt es zuhauf. Nur sollte man die Meisten nicht mehr benutzen, da sie für die optische Darstellung zuständig sind. Ich verweise daher nur mal auf die, die man (fast) immer beim <table>-Tag findet.

cellpadding und cellspacing

... legen die Außenabstände fest. cellspacing dient für den Abstand des Zelleninhalts zur Spalte, während cellpadding für den Abstand der einzelnen Spalten zueinander zuständig ist. Und, braucht man das? Nein, nicht mehr, da weder der Internet Explorer 6 noch 7 eine Rolle mehr spielt. Gott sei Dank.

border

Hiermit kann man die Dicke eines Rahmens definieren. Braucht man heute eigentlich nicht mehr, da man das mit CSS machen kann.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt