Zurück || Weiter Index Startseite
HTML Einführung: Tabellen
Erstellung und Verwendung von Tabellen

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. (sichtbare) Tabellen
  2. blinde Tabellen

Allgemeines

Tabellen sind ein nützliches und vielseitiges Instrument. Prinzipiell dienen sie dazu, Daten in tabellarischer Form geordnet auszugeben. Mit ihnen können Sie aber auch mehrere Texte und Bilder nebeneinander in dieselbe Zeile stellen (mit sog. blinden Tabellen), einen mehrspaltigen Text ausgeben u.v.m.

Tabellen

Eine Tabelle wird durch das Tagpaar <table>...</table> eingeschlossen. Im Anfangstag können zusätzlich Optionen stehen, die Sie der folgenden Tabelle entnehmen:

Optionen für das <table>-Tag
Option Erklärung
 align=left | center | right  Ausrichtung der Tabelle: links, zentriert oder rechts
 bgcolor="Farbwert"  Hintergrundfarbe der Tabelle  (Farbe: s.Kapitel "Sonstiges"!)
 border=Zahl  Rahmenstärke um die Tabelle
 cellpadding=Zahl  Abstand zwischen Zellenrand und Zelleninhalt
 cellspacing=Zahl  Dicke der Gitternetzlinien innerhalb der Tabelle
 width=Zahl  Breite der Tabelle in Prozent oder Pixel

Bemerkung: Manche Browser interpretieren die Angabe <table border> wie <table border=1>.

Als nächstes müssen wir die Zeilen und Spalten der Tabelle festlegen:
Eine Zeile einer Tabelle definiert man mit dem Tagpaar <tr>..</tr> (engl. table row). Dazwischen müssen wir die Spalten der Tabelle definieren: Wir notieren hiezu <td>...</td> (engl. table data) für jede Spalte. - Wenn Sie statt <td>...</td> das Tagpaar <th>...</th> (engl. table header) verwenden, wird die betroffene Zelle als Überschriftenzelle behandelt (Text wird zentriert und fett dargestellt).

Sowohl <td> als auch <th> können mit folgenden Optionen versehen werden:

Optionen für die Tags <td> und <th>
Option Erklärung
 align=left | center | right  Horizontale Ausrichtung: links, zentriert oder rechts
 bgcolor="Farbwert"  Hintergrundfarbe der Zelle  (Farbe: s.Kapitel "Sonstiges"!)
 heigth=Zahl  Höhe der Zelle in Pixel
 nowrap  Verhindert, dass zu lange Zeilen umgebrochen werden
 valign=top | middle | bottom  Vertikale Ausrichtung: oben, mittig oder unten
 width=Zahl  Breite der Zelle in Prozent oder Pixel

Bemerkungen:

  • Um alle Zellen einer Zeile gleich auszurichten, können Sie auch <tr align=...> bzw. <tr valign=...> notieren.
  • Die höchste Zelle einer Zeile bestimmt die Höhe aller Zellen der Zeile; alle anderen Zellen werden zu ihr relativ ausgerichtet! (Das Gleiche gilt für die Breite der Zellen.)
  • Ab HTML 4.0 ist die Angabe valign=baseline möglich. Sie lässt innerhalb einer Tabellenzeile jeweils die ersten Zeilen einer Zelle auf gleicher Höhe beginnen.
Mit dem Tagpaar <caption align=Option>...</caption> können Sie Ihrer Tabelle eine Überschrift verpassen. Zur Plazierung des zwischen den Tags stehenden Textes stehen für Option die Möglichkeiten top oder bottom zur Verfügung. Wird die Angabe align weggelassen, wird align=top angenommen.

<table align="center" width="90%" border>
<caption>Einige Gesundheits-Homepages</caption>
<tr>
 <th>Organisation</th>
 <th>Internetadresse</th>
</tr>
<tr>
 <td align="center">&Ouml;sterr. Ges. f&uuml;r
                         Gesundheitsf&ouml;rderung</td>
 <td>http://www.gesundheitsfoerderung.at</td>
</tr>
<tr>
 <td align="center">Gesellschaft f&uuml;r Gesundheitsberatung</td>
 <td>http://www.rhein-lahn-info.de/ggb</td>
</tr>
<tr>
 <td align="center">Lisa! - Die Bio-Homepage</td>
 <td>http://www.lisa.at</td>
</tr>
</table>

führt zu folgendem Ergebnis:

Einige Gesundheits-Homepages
Organisation Internetadresse
Österr. Ges. für Gesundheitsförderung http://www.gesundheitsfoerderung.at
Gesellschaft für Gesundheitsberatung http://www.rhein-lahn-info.de/ggb
Lisa! - Die Bio-Homepage http://www.lisa.at

Blinde Tabellen

"Blinde Tabellen" werden Tabellen genannt, deren Umrandungen für den Betrachter nicht sichtbar sind. (Man erreicht das durch die Angabe border=0.) Mit ihnen kann man Text in Formatierungen darstellen, wie das mit den bisher bekannten Formatierungsanweisungen (vgl. Kapitel 3) nicht möglich ist (z.B. mehrspaltig, Text-Grafik-Text usw.).

Betrachten Sie den folgenden HTML-Code und das Ergebnis darunter:

<table width="100%" border=0 cellpadding=5 cellspacing=0>
<tr>
<td width="25%" valign="top">
 K&auml;rnten ist &Ouml;sterreichs s&uuml;dlichstes Bundesland.
 Es ist auch das Bundesland mit den
</td>
<td width="25%" valign="top">
 meisten Badeseen. Aus diesem Grund ist es ein beliebtes
 Ausflugsziel auch f&uuml;r die deutschen
</td>
<td width="25%" valign="bottom">
 <img src="img/kaernten.gif" width=127 height=40
   border=0 alt="K&auml;rnten"><br>
 Touristen. K&auml;rnten bietet
</td>
<td width="25%" valign="top">
 viel, warme Badeseen von Mai bis Oktober, K&auml;rnten
 bietet mehr: Das Casino Velden ...
</td>
</tr>
</table>

Kärnten ist Österreichs südlichstes Bundesland. Es ist auch das Bundesland mit den meisten Badeseen. Aus diesem Grund ist es ein beliebtes Ausflugsziel auch für die deutschen Kärnten
Touristen. Kärnten bietet 		viel, warme Badeseen von Mai bis Oktober, Kärnten bietet mehr: Das Casino Velden ...

Bemerkung: Wichtig ist in diesem Zusammenhang, dass mit valign="top" sichergestellt wird, dass der Text in den einzelnen Zellen am oberen Zellenrand beginnt. (Standardmäßig wird er nämlich mittig ausgerichtet!) - Dafür, dass die Texte der einzelnen Spalten nicht aneinander kleben, sorgt die Option cellpadding=5 (Abstand zwischen Zellenrand und Inhalt).

Zusammenfassung und Beispiel

Mit unserem neu erworbenen Wissen konstruieren wir ein HTML-Dokument mit Tabellen und Grafik:

<html>
<head>
 <title>Tabellen</title>
</head>
<body>

<h1>Tabellen mit HTML</h1>
<h3>Einbindung von Grafik - Teil 2</h3>
Mit blinden Tabellen kann man Text und Grafik kinderleicht
nebenenander plazieren:<br>
<table border=0>
<tr>
<td>
 <img src="img/eyes.gif" width=175 height=175 border=0
    alt="Looking at you!">
</td>
<td>
 Was immer andere Leute &uuml;ber Positionsrahmen und Textfelder
 in Winword sagen, lassen Sie sich nicht davon abbringen, dass
 Bilder und Texte plazieren am saubersten mit Tabellen geht.
</td>
</tr>
</table>

<h3>Verschachtelte Tabellen</h3>
So wie Listen kann man auch Tabellen ineinander verschachteln:<p>

<table bgcolor="green" border=1 width=600>
<tr><td width="65%" align="center">

  <table bgcolor="aqua" border=2>
  <tr>
  <td width=200>
   Das ist eine Tabelle mit der Hintergrundfarbe AQUA (hellblau).
   Die Breite dieser Spalte ist genau 200 Pixel.
  </td><td width=100>
   Die Breite dieser Spalte ist 100 Pixel, die
   gesamten Tabelle ist also 300 Pixel breit.
  </td>
  </tr>
  </table>

</td><td height=200>
 Links nebenan steht eine Tabelle mir zentriert zur Seite.
 Sie befindet sich innerhalb dieser Tabelle in der 1.Spalte!<br>
 Die H&ouml;he der Zelle (also auch der <b>Zeile</b>) ist
 mind. 200 Pixel. (Ist der Inhalt h&ouml;her, hat diese Angabe
 allerdings keine Wirkung. - Logo!)
</td></tr>
</table>

</body>
</html>

Wird dieses Dokument in den Browser geladen, so sieht es wie folgt aus:

Im nächsten Kapitel beschäftigen wir uns mit einfachen Verweisen.

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner