Tabellen

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>

<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.

 Seitenanfang

Beispiele

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

  <table border width=400 height=800>
     (... Tabelleninhalt ...)
  </table>

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.

 Seitenanfang

Beispiel

  <table border=6 cellspacing=3>
     (... Tabelleninhalt ...)
  </table>

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

Beispiel

  <table border border=6 cellspacing=3 cellpadding=5>
     (... Tabelleninhalt ...)
  </table>

 Seitenanfang

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>

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.

 Seitenanfang

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>

Zelleninhalte oben oder unten ausrichten

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>

 Seitenanfang

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>

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>

 Seitenanfang

Beispiel

  <table border bordercolor=#990099>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>

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>

Beispiel

  <table border bgcolor=#F0F0C0>
    <tr>
      <th bgcolor=#990099><font color=#FFFFFF>Berlin</font>
      <th bgcolor=#990099><font color=#FFFFFF>Hamburg</font>
      <th bgcolor=#990099><font color=#FFFFFF>München</font>
    </tr>
    <tr>
      <td>Miljöh
      <td>Kiez
      <td>Bierdampf
    </tr>
  </table>

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.

 Seitenanfang

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>

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.

 Seitenanfang

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>

• Im einleitenden Tag der Tabelle müssen Sie die Angabe align=left notieren (wenn der Text rechts neben der Tabelle stehen soll), oder die Angabe align=right (wenn der Text links neben der Tabelle stehen soll).
• Im einleitenden Tag der Tabelle sollten Sie mit width= die maximale Breite der Tabelle auf einen Teil des Anzeigebereichs kürzen. Verwenden Sie dabei so wie in den Beispielen Prozentangaben.
• Hinter dem abschließenden Tabellen-Tag notieren Sie den gewünschten Text, der neben der Tabelle erscheinen soll.
• Am Ende des Textes notieren Sie die Anweisung <br clear=all>.

 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
Textauszeichnung/Texthervorhebung  |  Seitenränder, Farben, Hintergrundbilder und -musik

© 1996  Stefan Münz