HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente

Tabellen

Einfache Tabellen
Breite und Höhe einer Tabelle bestimmen
Rahmen, Gitternetzlinien und Randabstände kontrollieren
Bestimmte Zeilenhöhen und Spaltenbreiten erzwingen
Zelleninhalte ausrichten
Zellen verbinden
Anzeigebeispiele: Tabellen

Einfache Tabellen

Tabellen werden ab HTML 3.0 unterstützt. Netscape und einige weitere Browser können Tabellen bereits interpretieren.

Beispiel

  <table border>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
    <tr>
      <td>Buletten
      <td>Frikadellen
      <td>Fleischpflanzerl
    </tr>
  </table>
<table> leitet eine Tabelle ein. Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie den Zusatz border mit angeben.

<tr> leitet eine neue Tabellenzeile ein. 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. 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 Grafiken.

Normalerweise können die Tags <th> und <td> alleine stehen. Wenn Sie jedoch 100%ig SGML-konform arbeiten wollen, notieren Sie am Ende der Daten einer Zelle ein abschließendes Tag </th> bzw. </td>.

Beachten Sie beim Text innerhalb von Tabellen die Besonderheiten für deutsche Umlaute.

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 gleichen Regeln gelten wie bei Fließtext in normalen Absätzen.


HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen

Breite und Höhe einer Tabelle bestimmen

Tabellen werden so breit, wie es ihr Inhalt verlangt oder so breit wie das Anzeigefenster. Sie können jedoch eine maximale Gesamtbreite der Tabelle im Verhältnis zur Größe des Anzeigefensters bestimmen. Ferner können Sie angeben, daß die Tabelle eine bestimmte Höhe haben soll.

Beispiele

  <table border width=60% height=90%>
     (... Tabelleninhalt ...)
  </table>

  <table border width=400 height=800>
     (... Tabelleninhalt ...)
  </table>
Durch die Angabe width= (Prozent) im einleitenden Tabellen-Tag erreichen Sie, daß die Gesamtbreite der Tabelle maximal so viel Prozent der Breite des Anzeigefensters in Anspruch nimmt wie Sie angeben. Mit width= (Zahlenwert) bestimmen Sie die Breite der Tabelle in Pixel.

Die Angabe zur Gesamtbreite der Tabelle hat im Konfliktfall mit erzwungenen Spaltenbreiten Vorrang. Falls es der Inhalt der Tabelle erfordert, wird die Anweisung automatisch außer kraft gesetzt.

Durch die Angabe height= (Prozent) erreichen Sie, daß die Gesamthöhe der Tabelle maximal so viel Prozent der Höhe des Anzeigefensters in Anspruch nimmt wie Sie angeben. Mit height= (Zahlenwert) bestimmen Sie die Höhe der Tabelle in Pixel.

Die Angabe zur Gesamthöhe der Tabelle hat im Konfliktfall mit erzwungenen Zeilenhöhen Vorrang. Falls es der Inhalt der Tabelle erfordert, wird die Anweisung automatisch außer kraft gesetzt.


HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen

Rahmen, Gitternetzlinien und Randabstände kontrollieren

Dicke von Rahmen und Gitternetzlinien

Sie können die Rahmendicke des Außenrahmens und der Gitternetzlinien innerhalb der Tabelle bestimmen.

Beispiel

  <table border=6 cellspacing=3>
     (... Tabelleninhalt ...)
  </table>
Durch die Angabe border= (Pixel) im einleitenden Tabellen-Tag bestimmen Sie die Dicke des Außenrahmens. Mit cellspacing= (Pixel) bestimmen Sie die Dicke der Gitternetzlinien innerhalb der Tabelle.

Hinweis zu Netscape: Tabellenlinien werden schattiert dargestellt. Ab V1.2 hat Netscape als Defaulteinstellung einen weißen Bildschirmhintergrund. Damit sehen die schattierten Linien nicht besonders gut aus, besonders dann nicht, wenn eine größere Linienstärke angegeben wird. Ein Unterdrücken der Schattierung mit einem "noshade" ist leider nicht möglich.

Abstand zwischen Zelleninhalt und Zellenrand

Sie können den Mindestabstand des Zelleninhalts vom Zellenrand kontrollieren.

Beispiel

  <table border border=6 cellspacing=3 cellpadding=5>
     (... Tabelleninhalt ...)
  </table>
Durch die Angabe cellpadding= (Pixel) im einleitenden Tabellen-Tag bestimmen Sie den Abstand zwischen Zellenrand und Zelleninhalt.
HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen

Bestimmte Zeilenhöhen und Spaltenbreiten erzwingen

Sie können die bestimmte Höhe einer Zeile oder die bestimmte Breite einer Spalte erzwingen.

Beispiel

  <table border>
    <tr>
      <th width=150 height=40>Berlin
      <th width=120>Hamburg
      <th width=90>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Durch die Angabe width= (Pixel) im Tag einer Kopfzelle (<th>) oder Datenzelle (<th>) erzwingen Sie eine bestimmte Spaltenbreite, durch die Angabe heigth= (Pixel) eine bestimmte Zeilenhöhe.

Da die Angaben aber spaltenweit bzw. zeilenweit gelten, brauchen Sie sie nur einmal pro Spalte bzw. Zeile notieren. Am sinnvollsten ist es, die Angaben in der ersten Zelle einer Spalte bzw. Spalte zu notieren. Im obigen Beispiel ist "Berlin" die erste Zelle der ersten Zeile und der ersten Spalte. Für die zweite Spalte ist "Hamburg" die erste Zelle, Für die dritte Spalte ist es "München" Für die zweite Zeile der Tabelle wird im Beispiel keine bestimmte Zeilenhöhe erzwungen.

Bei Netscape sind erzwungene Spaltenbreiten und Zeilenhöhen nur dann wirksam, solange der Zelleninhalt weniger Platz beansprucht. Wenn der Zelleninhalt mehr Platz beansprucht, stellt Netscape die Tabellenzellen so dar, daß in jedem Fall der gesamte Inhalt angezeigt wird.


HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen

Zelleninhalte ausrichten

Sie können Zelleninhalte zum einen links, rechts und zentriert ausrichten, zum anderen oben oder unten. Dabei sind Kombinationen möglich, z.B. links oben oder zentriert unten.

Zelleninhalte links, zentriert oder rechts ausrichten

Beispiel

  <table border>
    <tr>
      <th align=left>Berlin
      <th align=right>Hamburg
      <th>München
    </tr>
    <tr>
      <td align=center>Miljöh
      <td align=right>Kiez
      <td>Bierdampf
    </tr>
  </table>
Kopfzellen (<th>) werden von Netscape per Voreinstellung zentriert ausgerichtet. Durch die Angabe align=left können Sie die Kopfzelle links ausrichten, durch die Angabe align=right rechts. Datenzellen stellt Netscape per Voreinstellung links ausgerichtet dar. Durch die Angabe align=center können Sie den Inhalt der Datenzelle zentriert ausrichten, durch align=right rechts.

Zelleninhalte oben oder unten ausrichten

Wenn Sie nichts anderes angeben, richtet Netscape Zelleninhalte vertikal gesehen mittig aus. Sie können erzwingen, daß Zelleninhalte oben oder unten ausgerichtet werden.

Beispiel

  <table border>
    <tr>
      <th align=left valign=top>Berlin
      <th align=right>Hamburg
      <th valign=bottom>München
    </tr>
    <tr>
      <td align=center>Miljöh
      <td align=right>Kiez
      <td>Bierdampf
    </tr>
  </table>
Durch die Angabe valign=top in einer Kopfzelle (<th>) oder Datenzelle (<td>) können Sie den Zelleninhalt oben ausrichten, durch die Angabe valign=bottom unten.
HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen

Zellen verbinden

Sie können mehrere Zellen innerhalb einer Zeile oder einer Spalte verbinden. Der Inhalt einer Zelle erstreckt sich dann in einer Zeile über mehrere Spalten oder in einer Spalte über mehrere Zeilen.

Zellen einer Zeile über mehrere Spalten hinweg verbinden

Beispiel

  <table border>
    <tr>
      <th colspan=2 align=center>Die Menschheit besteht aus
    </tr>
    <tr>
      <td >Männern
      <td align=right>Frauen
    </tr>
  </table>
Durch die Angabe colspan= (Anzahl Spalten) erreichen Sie, daß eine sich Zelle über mehrere Spalten hinweg erstreckt. Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Spalten besitzt wie angegeben.

Zellen einer Spalte über mehrere Zeilen hinweg verbinden

Beispiel

  <table border>
    <tr>
      <th rowspan=2>Polizisten rauchen
      <td>Milde Sorte, weil das Leben ist hart genug
    </tr>
    <tr>
      <td>Lucky Strike, weil sie Glückstreffer nötig haben
    </tr>
  </table>
Durch die Angabe rowspan= (Anzahl Zeilen) erreichen Sie, daß eine sich Zelle über mehrere Zeilen hinweg erstreckt. Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben.
HTML-Dateien selbst erstellen: Inhaltsverzeichnis | Gestaltungselemente | Tabellen