SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle

SELFHTML/Navigationshilfen HTML/XHTML Tabellen
	Aufbau einer Tabelle
	Tabellen definieren Spalten vordefinieren Kopf, K�rper und Fu� einer Tabelle definieren Weitere Informationen

Tabellen definieren

Sie k�nnen in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Obwohl Tabellen nat�rlich vornehmlich zur Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des Web-Designs vor allem als Grundgestaltungsmittel f�r Seiten-Layouts nicht mehr wegzudenken. Mehr dazu im Abschnitt Tabellen als Mittel f�r Web-Seiten-Layouts. Puristen, die HTML so weit wie m�glich von gestalterischen Aufgaben befreit sehen wollen, r�mpfen dar�ber zwar die Nase - aber so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer. Die saubere Verteilung von Information auf einer Web-Seite ist durchaus ein Aspekt der Strukturierung, obwohl sie zugleich ein Aspekt der Gestaltung ist. Rein optisch l�sst sich also grunds�tzlich unterscheiden zwischen Tabellen, die Gitternetzlinien haben (f�r tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien (so genannte "blinde Tabellen" f�r mehrspaltigen Text oder f�r Verteilung von Inhalten auf einer Web-Seite).

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aufbau einer Tabelle</title>
</head>
<body>

<h1>Tabelle mit Gitternetzlinien</h1>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>

<table border="0">
  <tr>
    <td><h2>ARQ</h2></td>
    <td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung
    f&uuml;r Fehlerprotokolle, die &Uuml;bertragungsfehler erkennt und
    defekte Bl&ouml;cke selbst&auml;ndig wiederholt</p></td>
  </tr>
  <tr>
    <td><h2>HDLC</h2></td>
    <td><p>High Level Data Link Control. Ein Standard-Protokoll, das
    von der Kommission f&uuml;r internationale Standards f&uuml;r
    Softwareanwendungen in synchronen Anlagen verwendet wird.</p></td>
  </tr>
</table>

</body>
</html>

Erl�uterung:

Die folgende Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen:

Aufbau einer Tabelle

<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, m�ssen Sie im einleitenden <table>-Tag das Attribut border notieren und ihm einen Wert gr��er 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln. Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen, lassen Sie die Angabe zu border entweder weg, oder - was sauberer ist - Sie notieren border="0".

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschlie�endes Tag </tr> notiert.

Eine Tabelle kann Kopfzellen und gew�hnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). <th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. Obwohl die zugeh�rigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren.

In einer Tabellenzelle k�nnen beliebige Elemente stehen, d.h. au�er normalem Text z.B. auch andere Block- und Inline-Elemente. Sogar eine weitere Tabelle k�nnen Sie innerhalb einer Zelle definieren.

Beachten Sie:

Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg die gleiche Anzahl Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.

Tabellenzellen d�rfen auch leer sein. Wenn Sie in einer Zeile f�r eine Spalte keine Daten eingeben wollen, notieren Sie ein einfaches <td></td>. Beachten Sie dabei jedoch, dass viele Web-Browser die Zelle in diesem Fall als "nicht vorhanden" darstellt. Probieren Sie deshalb auch mal die Notation <td> </td> f�r leere Tabellenzellen aus.

Spalten vordefinieren

Die Darstellung einer Tabelle ergibt sich zwar automatisch aus den definierten Zeilen und Spalten. Doch f�r einen Web-Browser ist es nicht ganz einfach, die Darstellung fr�hzeitig zu ermitteln. Er muss erst die gesamte Tabelle einlesen, bevor er irgendetwas davon darstellen kann. Bei gro�en Tabellen kann das zu unsch�nen leeren Bildschirminhalten w�hrend des Seitenaufbaus f�hren.

HTML 4.0 bietet eine Syntax an, um dem Browser gleich zu Beginn der Tabelle mitzuteilen, wie viele Spalten die Tabelle hat, und wie breit diese sind. Dadurch kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist. �ltere Browser ignorieren diese Angaben allerdings. Netscape-Browser k�nnen erst ab Version 6 korrekt mit den Beispielen umgehen. Beispielschema 3 wird vom Internetexplorer nicht korrekt verarbeitet.

Beispielschema 1:

Anzeigebeispiel: So sieht's aus

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispielschema 2:

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispielschema 3:

<table border="1" width="100%">
  <colgroup>
    <col width="4*">
    <col width="2*">
    <col width="1*">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Erl�uterung:

Mit <colgroup> leiten Sie hinter dem einleitenden <table>-Tag eine Vorab-Definition der Tabellenspalten ein (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei M�glichkeiten: entweder Sie m�chten unterschiedlich breite Tabellenspalten haben. Dann gehen Sie so vor wie im obigen Beispielschema 1. Oder Sie haben eine Tabelle, in der alle Spalten die gleiche einheitliche Breite haben sollen. Dann k�nnen Sie so vorgehen wie im obigen Beispielschema 2.

Im Beispielschema 1 enth�lt das <colgroup>-Tag keine weiteren Attribute. Daf�r notieren Sie im Anschluss an <colgroup> f�r jede einzelne gew�nschte Tabellenspalte je ein <col>-Tag. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw. Wenn Sie keine weiteren Angaben machen, wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts ermittelt. Mit width [Pixel/Prozent] k�nnen Sie jedoch eine Spaltenbreite f�r die einzelnen Spalten vorgeben (width = Breite). Mit width="100" erzwingen Sie beispielsweise eine Spaltenbreite von 100 Pixeln, und mit width=33% eine Breite von einem Drittel der Breite der Gesamttabelle.

Im Beispielschema 2 werden keine <col>-Tags notiert. Stattdessen notieren Sie im einleitenden <colgroup>-Tag das Attribut span (span = spannen). Als Wert weisen Sie die Anzahl der Spalten zu, die Sie w�nschen. Mit dem Attribut width k�nnen Sie in diesem Fall eine einheitliche Spaltenbreite f�r alle Spalten definieren.

Bei width haben Sie neben der M�glichkeit, Pixel oder Prozentwerte anzugeben, auch noch eine dritte M�glichkeit: Sie k�nnen das relative Breitenverh�ltnis der Spalten untereinander bestimmen, unabh�ngig davon, wie breit die Tabelle im Verh�ltnis zum Anzeigefenster ist. Eine solche M�glichkeit stellt das obige Beispielschema 3 vor. Bei Breitenangaben dieser Art weisen Sie width eine Zahl und dahinter ein Sternzeichen zu. Das Sternzeichen ist dabei nur ein Signalzeichen f�r den Browser, dass er die Zahlen davor nicht als Pixel interpretieren soll. Wichtig sind die Zahlen. Im obigen Beispiel 3 werden drei Spalten definiert, bei denen die relativen Zahlen 4, 2 und 1 in der Summe 7 ergeben. Damit definieren Sie eine Tabelle, bei der die erste Spalte vier Siebtel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebtel, und die dritte Spalte ein Siebtel.
Zur Geltung kommt ein relatives Spaltenverh�ltnis aber erst, wenn Sie au�erdem eine Breite f�r die gesamte Tabelle angeben. Im obigen Beispielschema 3 geschieht das durch die Angabe width="100%" im einleitenden <table>-Tag.

Beachten Sie:

<col>-Tags d�rfen in HTML kein Abschluss-Tag haben. Das abschlie�ende </colgroup>-Tag ist dagegen optional. In XHTML ist das schlie�ende <col>-Tag aber erforderlich. Wenn Sie XHTML-Standard-konform arbeiten, m�ssen Sie daher das col-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <col ... />. Weitere Informationen finden Sie im Kapitel XHTML und HTML.

Auch das <col>-Tag darf das Attribut span erhalten. Dadurch gruppieren Sie jedoch nicht mehrere Spalten zu einer, sondern Sie geben lediglich an, dass Attribute dieser Spalte auch f�r die n�chsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span="3" width="100"> notieren, erhalten diese und die n�chsten zwei Spalten die Breite von 100 Pixeln.

Das <colgroup>-Tag darf die Attribute span und width auch dann enthalten, wenn unterhalb davon <col>-Tags definiert werden. Dabei �berschreibt die Anzahl der definierten <col>-Tags jedoch die Angabe, die mit <colgroup span=> gemacht wurde, und das Attribut width innerhalb eines <col>-Tags hat Vorrang vor der Angabe width im <colgroup>-Tag.

Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So k�nnen Sie beispielsweise mit <colgroup width="100" span="3"> und <colgroup width="50" span="5"> hintereinander notiert insgesamt 8 Spalten f�r die Tabelle definieren, wobei die ersten drei Spalten eine Breite von 100 Pixeln erhalten und die nachfolgenden f�nf Spalten eine Breite von 50 Pixeln.

F�r die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Erzwingen von Spaltenbreiten auf herk�mmliche Weise.

Zu Beispielschema 2: Safari bis Version 2.0.4 vergr��ert Spalten nach dem Schema width="200" span="3" nicht.

Zu Beispielschema 3: Internet Explorer, Opera, Konqueror und Safari interpretieren relative Angaben nach dem Schema width="4*" nicht. Diese M�glichkeit beschr�nkt sich daher auf Mozilla Firefox.

Kopf, K�rper und Fu� einer Tabelle definieren

Sie k�nnen eine Tabelle logisch in Bereiche aufteilen: einen Kopfbereich, einen oder mehrere Datenbereiche und einen Fu�bereich. Interessant ist dies zum Beispiel in Verbindung mit der M�glichkeit, Regeln f�r Gitternetzlinien zu bestimmen. Beim Ausdruck langer Tabellen sollte der Browser Tabellenkopf und Tabellenfu� auf jeder Seite wiederholen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopf, K&ouml;rper und Fu&szlig; einer Tabelle definieren</title>
</head>
<body>

<h1>Betroffene Menschen</h1>

<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Erl�uterung:

Den Tabellenkopf leiten Sie mit <thead> ein (thead = table head = Tabellenkopf). Daran anschlie�end k�nnen Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich geh�ren sollen. Mit </thead> schlie�en Sie den Tabellenkopf ab (das End-Tag ist bei allen Elementen f�r Tabellenkopf, Tabellenfu� und Tabellenk�rper optional, aber dringend zu empfehlen).

Wenn Sie einen Tabellenfu� notieren m�chten, m�ssen Sie diesen vor den Tabellenk�rper-Elementen notieren. Den Tabellenfu� leiten Sie mit <tfoot> ein (tfoot = table foot = Tabellenfu�). Daran anschlie�end k�nnen Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Fu�bereich geh�ren sollen. Mit </tfoot> schlie�en Sie den Tabellenfu� ab.

Einen Tabellenk�rper leiten Sie mit <tbody> ein (tbody = table body = Tabellenk�rper). Daran anschlie�end notieren Sie den Datenbereich mit einer oder mehreren Tabellenzeilen. Mit </tbody> schlie�en Sie den Tabellenk�rper ab.

Beachten Sie:

Die Aufteilung einer Tabelle mittels thead, tfoot und tbody ist freiwillig. Wenn Sie kein solches Element angeben, gelten alle Zeilen der Tabelle als Tabellenk�rper. Falls Sie jedoch mit den Elementen arbeiten, m�ssen Sie die Reihenfolge thead → tfoot → tbody beachten. Die Elemente thead und tfoot d�rfen pro Tabelle nur einmal vorkommen, das tbody-Element einmal oder beliebig oft. In vielen F�llen ist die Aufteilung in thead und einen oder mehrere tbody sinnvoll. Auf diese Weise k�nnen Sie bequem inhaltlich zusammenh�ngende Tabellezeilen gruppieren, zum Beispiel um deren Zellen sp�ter mit Stylesheets unterschiedlich zu formatieren.

Weitere Informationen

Alle hier vorgestellten Elemente k�nnen Universalattribute enthalten.

In der HTML-Referenz finden Sie Angaben dar�ber, wo die hier vorgestellten HTML-Elemente vorkommen d�rfen, welche anderen Elemente sie enthalten d�rfen, welche Attribute sie haben k�nnen und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz und Attribut-Referenz f�r Tabellen (<table>...</table>)
Element-Referenz und Attribut-Referenz f�r Tabellenzeilen (<tr>...</tr>)
Element-Referenz und Attribut-Referenz f�r Kopfzellen (<th>...</th>)
Element-Referenz und Attribut-Referenz f�r Datenzellen (<td>...</td>)
Element-Referenz und Attribut-Referenz f�r Spaltengruppen (<colgroup>...</colgroup>)
Element-Referenz und Attribut-Referenz f�r Spalten (<col>)
Element-Referenz und Attribut-Referenz f�r Tabellenkopf (<thead>...</thead>)
Element-Referenz und Attribut-Referenz f�r Tabellenfu� (<tfoot>...</tfoot>)
Element-Referenz und Attribut-Referenz f�r Tabellenk�rper (<tbody>...</tbody>)


	Gestaltung einer Tabelle
	�ltere browser-propriet�re Elemente

SELFHTML/Navigationshilfen HTML/XHTML Tabellen