HTML-Dateien selbst erstellen

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
 Farbe für Tabellenrahmen und Tabellenzellen
 Tabellenüberschriften / Tabellenunterschriften
 Text links und rechts von Tabellen
 Anzeigebeispiele: Tabellen

Einfache Tabellen

 Tabellen werden ab HTML 3.0 unterstützt. Netscape, MS Internet Explorer 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
 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
 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
 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.

Erzwungene Spaltenbreiten und Zeilenhöhen sind nur wirksam, wenn der Zelleninhalt weniger Platz beansprucht. Wenn der Zelleninhalt mehr Platz beansprucht, stellt der Browser die Tabellenzellen so dar, daß in jedem Fall der gesamte Inhalt angezeigt wird.

 HTML-Dateien selbst erstellen
 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
 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
 Tabellen

Farbe für Tabellenrahmen und Tabellenzellen

 Der MS Internet Explorer erlaubt ab Version 2.0, Rahmen und Zellhintergünde mit Farben zu versehen. Auch der UDI WWW-Browser interpretiert (zumindest einen Teil) dieser Angaben.

Farben für Tabellenrahmen

Beispiel


  <table border bordercolor=#C00000>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Durch die Angabe bordercolor= im einleitenden Tag der Tabelle können Sie eine Farbe für den Tabellenrahmen bestimmen.

Zur Bedeutung der Farben und für Hinweise zur Farbauswahl lesen Sie Farben definieren in HTML.

Beachten Sie, daß Sie die Angabe border zusätzlich machen müssen, so wie im Beispiel. Denn ohne die Angabe border wird der Tabellenrahmen gar nicht angezeigt.

Anstelle der einfachen Rahmenfarbe können Sie auch einen Schattier-Effekt in den Rahmen bringen, indem Sie zwei verschiedene Farben definieren - eine dunklere und eine hellere.

Beispiel


  <table border bordercolordark=#0000A0 bordercolorlight=#00C0FF>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Anstelle von bordercolor= notieren Sie im einleitenden Tag der Tabelle die beiden Zusatzangaben bordercolordark= (für die dunklere Farbe) und bordercolorlight= (für die hellere Farbe).

Farben für Zellenhintergründe

Beispiel


  <table border bgcolor=#F0F0C0>
    <tr>
      <th bgcolor=#C00000><font color=#FFFFFF>Berlin</font>
      <th bgcolor=#C00000><font color=#FFFFFF>Hamburg</font>
      <th bgcolor=#C00000><font color=#FFFFFF>München</font>
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Sie können eine Hintergrundfarbe für die gesamte Tabelle oder für einzelne Zellen definieren. Durch die Angabe bgcolor= im einleitenden Tag der Tabelle bestimmen Sie die Hintergrundfarbe der gesamten Tabelle (inclusive  Tabellenüberschrift / Tabellenunterschrift). Wenn Sie die Angabe bgcolor= dagegen im einleitenden Tag einer Kopfzelle <th...> oder einer Datenzelle <td...> machen, wird nur die betreffende Zelle in der gewünschten Hintergrundfarbe angezeigt.

Im Beispiel wird eine Hintergrundfarbe für die gesamte Tabelle definiert. Für die drei Zellen der ersten Zeile wird außerdem eine besondere Zellenhintergrundfarbe definiert. Die Angabe bgcolor= in einer Kopf- oder Datenzelle hat Vorrang vor der gleichen Angabe im einleitenden Tabellen-Tag.

Beachten Sie, daß Sie bei andersfarbigem Zellenhintergrund möglicherweise auch die  Schriftfarbe ändern müssen, damit die Schrift zur Hintergrundfarbe kontrastiert und lesbar ist. Im Beispiel ist das bei den drei Zellen der ersten Zeile der Fall.

Zur Bedeutung der Farben und für Hinweise zur Farbauswahl lesen Sie Farben definieren in HTML.

 HTML-Dateien selbst erstellen
 Tabellen

Tabellenüberschriften / Tabellenunterschriften

 Der MS Internet Explorer kann ab Version 2.0 auf Wunsch eine Tabellenüberschrift bzw.Tabellenunterschrift anzeigen, Netscape und UDI WWW immerhin eine Tabellenüberschrift.

Beispiel


  <table border>
   <caption valign=top align=center>3 Städte und ihre typischen Ausdrücke</caption>
    <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>
Mit <caption ... > leiten Sie die Definition einer Tabellenüberschrift oder Tabellenunterschrift ein. Dahinter folgt der Text der Tabellenüberschrift bzw. Tabellenunterschrift. Hinter dem Text folgt ein abschließendes </caption>.

Notieren Sie diese Angabe am besten direkt unterhalb des einleitenden Tabellen- Tags <table ... > (so wie im Beispiel).

Durch die Zusatzangabe valign=top im einleitenden Tag definieren Sie eine Tabellenüberschrift. Mit der Zusatzangabe valign=bottom dagegen definieren Sie eine Tabellenunterschrift.

Ferner können Sie die Tabellenüberschrift bzw. Tabellenunterschrift ausrichten. Per Voreinstellung erfolgt die Ausrichtung linksbündig zum Tabellenrand. Mit der Zusatzangabe align=center richten Sie die Tabellenüberschrift bzw. Tabellenunterschrift zentriert aus, mit align=right rechtsbündig zum Tabellenrand.

 HTML-Dateien selbst erstellen
 Tabellen

Text links und rechts von Tabellen

 Sie können links bzw. rechts einer Tabelle normalen Text notieren. Diese Anordnung wird bislang jedoch nur vom MS Internet Explorer korrekt interpretiert.

Beispiel 1


  <table border align=left width=50%>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Das ist Text, der rechts neben der Tabelle angezeigt wird <br clear=all>

Beispiel 2


  <table border align=right width=50%>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>
Das ist Text, der links neben der Tabelle angezeigt wird <br clear=all>
Um zu erreichen, daß Text neben einer Tabelle angezeigt wird, müssen Sie folgende Angaben machen:

 HTML-Dateien selbst erstellen
 Tabellen