| HTML-Dateien selbst erstellen
|  | Dokumentation: HTML
|  |  | Tabellen

# Aufbau einer Tabelle

Tabelle definieren
Zeilen und Spalten definieren

## Tabelle definieren

Anzeigebeispiel: So sieht's aus

Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Dazu wird grundsätzlich unterschieden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien (" blinde Tabellen" - etwa für mehrspaltigen Text oder für sauberes Beieinanderstehen von Text und Grafik).

#### Beispiel 1:

    <table border>
       <!--hier folgt der Tabelleninhalt einer Tabelle mit Gitternetzlinien-->
    </table>

#### Beispiel 2:

    <table>
       <!--hier folgt der Tabelleninhalt einer blinden Tabelle-->
    </table>

#### Erläuterung:

<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie den Zusatz border mit angeben - wie in Beispiel 1 (border = Rand).

Um die Tabelle mit Inhalten zu füllen, müssen Sie Zeilen und Spalten definieren wie im folgenden beschrieben.

## Zeilen und Spalten definieren

Anzeigebeispiel: So sieht's aus

Eine Tabelle besteht aus mindestens einer, normalerweise aus mehreren Zeilen. Eine Zeile besteht aus mindestens einer, normalerweise aus mehreren Zellen. Dadurch ergeben sich die Spalten der Tabelle.

#### Beispiel:

    <table border>
        <tr>
          <th>Kopfzelle: 1. Zeile, 1. Spalte
          <th>Kopfzelle: 1. Zeile, 2. Spalte
          <th>Kopfzelle: 1. Zeile, 3. Spalte
        </tr>
        <tr>
          <td>Datenzelle: 2. Zeile, 1. Spalte
          <td>Datenzelle: 2. Zeile, 2. Spalte
          <td>Datenzelle: 2. Zeile, 1. Spalte
        </tr>
        <tr>
          <td>Datenzelle: 3. Zeile, 1. Spalte
          <td>Datenzelle: 3. Zeile, 2. Spalte
          <td>Datenzelle: 3. Zeile, 3. Spalte
        </tr>
    </table>

#### Erläuterung:

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluß 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 (bei Netscape: fett und zentriert ausgerichtet). <th> definiert eine Kopfzelle, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.B. auch Verweise oder Grafik in HTML. Sogar eine weitere Tabelle können Sie innerhalb einer Zelle definieren.

Normalerweise können die Tags <th> und <td> alleine stehen. Bei größeren Zelleninhalten ist es jedoch sicherer, am Ende der Zelle ein abschließendes Tag </th> bzw. </td> zu notieren.

#### Beachten Sie:

Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, so daß die Tabelle durchweg die gleiche Anzahl Spalten 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.

Beim Text innerhalb von Zellen gelten die Besonderheiten für Umlaute, Sonderzeichen und HTML-eigene Zeichen.

Größere Tabellen können im Quelltext schnell unüberschichtlich werden. Wählen Sie deshalb eine übersichtliche Darstellungsform mit Einrückungen und Zeilenumbrüchen (ähnlich wie im Beispiel oben). Auf die Präsentation im Browser hat die Darstellung im Quelltext keinen Einfluß, da innerhalb von Tabellenzellen die üblichen Regeln beim Editieren von HTML gelten.

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, daß viele WWW-Browser die Zelle in diesem Fall als "nicht vorhanden" darstellt. Probieren Sie deshalb auch mal die Befehlsfolge <td>&#160;</td> für leere Tabellenzellen aus.

| Blättern: |
Lauftext (Marquee) |  |  | Rahmendicke, Gitternetzlinien, Randabstand

| HTML-Dateien selbst erstellen
|  | Dokumentation: HTML
|  |  | Tabellen