Stil mit {stil}

Nov 2008

HTML-Tag table – Tabellen auf Webseiten darstellen

Das table-Tag bildet den Rahmen für Tabellen in Webseiten mit HTML. Eine Tabelle stellt Daten strukturiert in Zeilen und Spalten dar.

Die HTML-Tabelle unterbricht den normalen Fluss von Texten und Bildern und wird in der nächsten Zeile eingefügt. Am Ende des TABLE-Elements wird der Fluss der Texte und Bilder in der nächsten Zeile wieder aufgenommen.

                <table>    <-------------------------------+
                    <tr>      <--------------+             |
Kopfzelle +----->       <th> … </th>         |             |
Kopfzelle +----->       <th> … </th>         +---- Zeile   |
Kopfzelle +----->       <th> … </th>         |             |
                    </tr>     <--------------+             |
                    <tr>      <--------------+             +--- Tabelle
    Zelle +----->       <td> … </td>         |             |
    Zelle +----->       <td> … </td>         +---- Zeile   |
    Zelle +----->       <td> … </td>         |             |
                    </tr>     <--------------+             |
                </table>   <-------------------------------+

Tabellenzeilen und -spalten organisieren

HTML-Tabellen sind zeilenorientiert – d.h. sie werden Zeile für Zeile aufgebaut. Das Innenleben einer Tabelle besteht aus Tabellenzeilen (<tr>), in denen die einzelnen Zellen liegen, aus Kopfzeilen (<th>) mit Zellen und dem <caption>-Tag.

Das rowspan- und das colspan-Attribut fassen nebeneinander liegende Zellen einer Tabelle zeilen- oder spaltenweise zusammen – so verschmelzen Zellen über mehrere Spalten oder Zeilen.

Die Spalten einer Tabelle werden durch colgroup-Tags in Gruppen zusammengefasst und über das col-Tag formatiert.

Tabellenkopf und Tabellenfuß

Zudem gibt es seit HTML 4.0 drei weitere Tags für Tabellen: – <tbody>, <tfoot> und <thead>.

Direkt innerhalb eines table-Elements dürfen nur die folgenden HTML-Tags stehen:

CSS-Eigenschaften für table-Elemente

Obwohl die Attribute border, cellpadding und cellspacing hier noch aufgeführt sind, haben sie kaum noch eine Bedeutung. Der Rahmen um Tabellenzellen, der vom border-Attribut erzeugt wird, läßt keine Spezifikation einer Farbe zu und wird besser durch die border-Eigenschaft in CSS ersetzt.

Die CSS-Regel border-collapse: collapse für das table-Element verhindert den doppelten Rahmen zwischen nebeneinander liegenden Tabellenzellen. cellpadding und cellspacing lassen sich durch die Eigenschaften padding und margin steuern.

Attribute für table

border

legt einen Rahmen rund um die Tabelle. Die Linien des Rahmens werden schattiert dargestellt, um ihnen eine dreidimensionale Erscheinung zu verleihen. Die Breite des Rahmens wird als ganze Zahl von Pixeln angegeben. Die Voreinstellung ist »kein Rahmen« (0 Pixel).

cellpadding

setzt den Weißraum zwischen den Zellwänden und dem Inhalt der Zelle und wird als ganze Zahl von Pixeln eingegeben. Die Vorgabe ist ein Pixel.

cellspacing

setzt den Weißraum zwischen nebeneinander liegenden Zellen und zwischen den Zellen und dem äußeren Rand der Tabelle und wird als ganze Zahl von Pixeln angegeben. Die Vorgabe ist zwei Pixel.

frame

legt fest, welche der vier Linien, aus denen der Rahmen der Tabelle besteht, sichtbar sein soll. Die möglichen Werte sind above, below, border, box, hsides, lhs, rhs, void und vsides.
frame="above" zeigt den oberen Rand der Tabelle, frame="below" den unteren Rahmen, frame="box" zeigt alle Linien rund um die Tabelle, frame="hsides" zeigt den Rand ober- und unterhalb der Tabelle an, frame="vsides" zeigt die Linien rechts und links, frames="lhs" zeigt den linken und frames="rhs" den rechten Rahmen. Alle Einstellungen werden nur wirksam, wenn border="" als Attribut der Tabelle notiert ist.

rules

legt fest, welche Rahmenlinien rund um die Zelle innerhalb der Tabelle sichtbar sein sollen. Durch die Angabe von rows werden nur die Linien zwischen den Reihen sichtbar, durch die Angabe von cols werden nur die Linien zwischen den Spalten sichtbar, durch die Angabe groups werden Linien zwischen thead, tfoot und tbody angezeigt und die Angabe von none zeigt keine innenliegenden Rahmen. rules="all" ist die Voreinstellung und zeigt alle Linien rund um die Tabellenzellen einer Tabelle an.

summary

wird für nicht visuelle Medien wie Braillezeile oder Sprachsynthesizer benutzt, um zusätzliche Informationen über die Tabelle zur Verfügung zu stellen.

width

bestimmt die Breite der Tabelle. Es wird entweder als ganze Zahl von Pixeln oder als Prozentsatz des umfassenden Elements angegeben.

Beispiel

<table summary="Browser-Statistik" border="1" cellspacing="2" cellpadding="3" width="600">
  <caption>Browserstatistik eines Fotoblogs im Nov. 2008</caption>
  <colgroup>
    <col width="10" /><col width="50" />
    <col width="50" /><col width="400" />
  </colgroup>
  <thead>
    <tr> <th colspan="4">Top 15 of 3219 Total User Agents</th> </tr>
    <tr> <th>#</th> <th colspan="2">Hits</th> <th>User Agent</th> </tr>
  </thead>
  <tfoot>
    <tr> <td colspan="4"><em>Ohne formatierende CSS-Eigenschaften  …</em></td> </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>497913</td>
      <td>16.27%</td>
      <td>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) </td>
    </tr>
    <tr>
      <td>2</td>
      <td>267810</td>
      <td>8.75%</td>
      <td>Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.11) Gec</td>
    </tr>
     …
  </tbody>
</table>

Kernattribute und Ereignisse für table