Tabellen

Ein wichtiges Element zur Informationsaufbereitung sind Tabellen. HTML unterstützt Tabellen mit einer ganzen Anzahl von Befehlen.

Tabellen definieren

Eine Tabelle beginnt mit dem Befehl <table> und endet mit </table>. Dazwischen wird der Inhalt bestimmt.

Der Tabelleninhalt

Eine neue Zeile fängt man in Tabellen mit dem Tag <tr> an. Beendet wird die angefangene Zeile mit </tr>. Nach <tr> werden die Spalten oder Zeilen definiert.
Beispiel
<table border>
<tr>
  <th>Spalte 1</th>
  <th>Spalte 2</th>
</tr>
<tr>
  <td>Text 1</td>
  <td>Text 2</td>
</tr>
<tr>
  <td>Noch'n Text</td>
  <td>Bla bla</td>
</tr>
</table>
<th> (table header) wird für Kopfzellen benutzt. Im Gegensatz zu normalen Datenzellen wird ihr Inhalt besonders hervorgehoben, meistens durch Fettschrift. <td> (table data) ist für normale Datenzellen zuständig. Jede Tabellenzelle wird ordnungsgemäß mit </td> bzw. </th> abgeschlossen. Tabellenzellen dürfen übrigens auch Grafiken und Verweise enthalten - sogar eine neue Tabelle könnte man in einer Tabellenzelle definieren (obwohl man davon besser Abstand nehmen sollte, da man sich dann sehr leicht vertut). Neu ist auch die Zusatzangabe border im <table>-Tag. Diese Angabe bewirkt, daß die Gitternetzlinien angezeigt werden. Die Größe des Rahmens kann man übrigens auch beeinflußen: border=5 sorgt für einen 5 Pixel hohen Rahmen.
So sieht das obige Beispiel in ihrem Browser aus:
Spalte 1 Spalte 2
Text 1 Text 2
Noch'n Text Bla bla

Viele Browser stören sich nicht daran, wenn man </td> oder </tr> wegläßt - allerdings gibt es da auch strengere Browser, so daß man diese Tags nur weglassen sollte, wenn man in Speicherplatznöten ist.

Ausrichtung von Tabelleninhalten

Der Inhalt einer Tabellenzelle wird standardmäßig linksbündig ausgerichtet. Man kann jedoch die Ausrichtung mittels align= ändern.
Beispiel
<td align=right>Text</td>
Außer align=right sind noch align=center und align=left möglich.
Weiterhin können sie auch die vertikale Ausrichtung des Textes bestimmen - einen Effekt werden Sie aber nur sehen, wenn die Tabelleninhalte unterschiedlich groß sind. Um die vertikale Ausrichtung zu bestimmen, wird valign= hinzugefügt. Als Angaben für valign= sind top (oben) und bottom (unten) möglich. Die Voreinstellung lautet hierbei mittig.
Beispiel (gekürzt)
<td valign=top>ganz oben</td>
<td valign=bottom>ganz unten</td>
Spalte 1 Spalte 2
ganz oben ganz unten
Noch'n Text Bla bla

Größe der Tabelle

Normalerweise wird eine Tabelle nur so groß, wie es ihr Inhalt erfordert. Sie können jedoch mit width= und height= eine Mindestgröße bestimmen, die in Prozent oder Pixeln angegeben wird.
Beispiel
<table width=50% height=40%>
...
</table>
Die Prozentangaben beziehen sich natürlich auf das Browserfenster. Diese Angaben lassen sich übrigens auch für Datenzellen machen:
<tr>
  <th width=120>Spalte 1</th>
  <th width=70>Spalte 2</th>
</tr>
Für die folgenden Datenzellen brauchen diese Angaben nicht mehr gemacht zu werden, da die Bestimmung der Breite oder Höhe spaltenweit bzw. zeilenweit gelten. Sie brauchen keine Angst zu haben, das vielleicht etwas vom Inhalt verloren gehen könnte: Der Browser sorgt immer dafür, daž der ganze Text zu sehen ist.

Dicke der Gitternetzlinien

Außer dem Rahmen können Sie auch die Rahmendecke der Gitternetzlinien bestimmen. Dazu fügen Sie im einleitenden <table>-Tag ein cellspacing=Zahlenwert ein. 'Zahlenwert' wird in Pixeln angegeben.
Beispiel
<table border cellspacing=4>
Die Dicke der Gitternetzlinien in der Tabelle wäre in dem Beispiel vier Pixel.

Abstand zwischen Zellenrand und -inhalt

Um den Abstand zu definieren, fügen sie cellpadding= in das einleitende <table>-Tag, gefolgt von einem Zahlenwert, der den gewünschten Abstand in Pixeln angibt.

Zellen vereinigen

Optisch reizvoll ist die Möglichkeit, Zellen zu vereinigen. Dies kann sowohl Zeilen- als auch Spaltenweise geschehen, d.h. Sie können Zellen vereinigen, die sich in der gleichen Spalte oder Zeile befinden.
Die erste Möglichkeit wäre, Zellen spaltenweise zu vereinigen:
<table border>
 <tr>
  <th colspan=2 align=center>Ihre Auswahl, Bond:</th>
 </tr>
 <tr>
  <td>Q anrufen</td>
  <td align=right>Blofeld besuchen</td>
 </tr>
</table>
Ihre Auswahl, Bond:
Q anrufen Blofeld besuchen
Mit colspan= werden aneinanderliegende Spalten vereinigt. Hinter colspan= schreiben sie die Anzahl der Spalten, die zusammengefaßt werden sollen. Diese Angabe kann natürlich nicht die Anzahl der Spalten übersteigen, die insgesamt verfügbar sind.

Die zweite Möglichkeit sieht vor, Spalten zeilenweise zu vereinigen:
<table border>
 <tr>
  <th rowspan=2 align=center>Mein Name ist...:</th>
  <td>Blond, James Blond</td>
 </tr>
 <tr>
  <td align=right>Bond, James Bond</td>
 </tr>
</table>
Ihre Auswahl, Bond: Blond, James Blond
Bond, James Bond

Farbe für Tabellenhintergründe

Es ist möglich, sowohl der ganzen Tabelle eine Hintergrundfarbe zuzuweisen, als auch einzelnen Zellen. Das wird mit dem Zusatz bgcolor= gemacht, gefolgt von dem Hexadezimalwert der Farbe.
Beispiel
<table border bgcolor=#ff0000>
 <tr>
  <th rowspan=2 bgcolor=#00ff00>Mein Name ist...:</th>

Farbe des Tabellenrahmens

Da der Tabellenrahmen gewöhnlich mit einem 3D-Effekt gezeichnet wird, kann man auch zwei Rahmenfarben definieren: Eine helle und eine dunkle Farbe. Die beiden zusätzlichen Angaben heißen bordercolorlight= und bordercolordark=. Die Farbangabe erfolgt wie immer im Hexadezimalformat oder durch Angabe eines Farbnamens.
Beispiel
<table border=3 bordercolorlight=#ffffff bordercolordark=#ff0000>
 <tr>
   <td bgcolor=#ffffff><font size=+1 color=#ff0000>Computer:</font></td>
   <td bgcolor=#ffffff><font color=#ff0000 size=+1>Sinclair ZX81</font></td>
 </tr>
 <tr>
   <td>Released in:</td>
   <td>1980</td>
 </tr>
 <tr>
   <td>Sold about:</td>
   <td>over one million</td>
 </tr>
</table>
Computer: Sinclair ZX81
Released in: 1980
Sold about: over one million
Ob die Farbe für die dunkle Schattierung auch wirklich dunkler ist als die Farbe für die helle Schattierung der Tabelle, kümmert den Browser übrigens nicht.

Zweispaltensatz

Mit hilfe von Tabellen kann man einen Zweispaltensatz ermöglichen. Dazu fängt man eine rahmenlose Tabelle an. So sähe beispielsweise ein Grundgerüst für einen zweispaltigen Text aus:
<table width=100% cellpadding=8>
<tr>
<td valign=top width=50%>
... Text für die erste Spalte
<td valign=top width=50%>
... Text für die zweite Spalte
</tr>
</table>
Es sind auch noch mehr Spalten möglich, doch dann gerät bei Auflösungen wie 640*480 die Übersichtlichkeit flöten. Auch sollte der zweispaltige Text nicht zu lang, sprich: er sollte als ganzes im Browserfenster zu sehen sein, ohne daß man ständig die Scrollpfeile benutzen muß.
Nächstes Kapitel: Laufschriften.
Start * Das WWW * Inhalt