|
Tabellen
als wichtiges Gestaltungsmittel
Grundlagen
Tabellen
sind im Moment das ultimative Designwerkzeug in HTML. Sie
ermöglichen es, alle Elemente innerhalb einer Site dort zu
platzieren, wo man sie haben möchte, ohne den Aufbau bei verschiedenen
Fenstergrößen zu verändern. Tabellen eigenen sich sehr gut
zur Kombination mehrerer Elemente. Ein Seitenlayout kann durch
Tabellen besser strukturiert werden. Texte lassen sich in
Spalten oder kleine Textblöcke darstellen. Tabellen muss keine
fixe Größe zugewiesen werden, sondern sie passt sich dynamisch
der aktuellen Fenstergröße des Browsers an. Natürlich kann
auch, wenn es die Gestaltung erfordert, eine fixe Größe angegeben
werden. Und da gute an der ganzen Sache ist, dass die Tabelle
vom Benutzer nicht wahrgenommen werden muss, da sie als unsichtbar
definiert werden kann. Nur die enthaltenen Elemente werden
also sichtbar. Tabellen können ineinander verschachtelt werden.
Was
ist eine Tabelle ?
Eine
Tabelle besteht im Grunde aus drei verschiedenen Teilen, die
im HTML-Dokument nacheinander definiert werden. Aus der gesamten
Tabelle, aus horizontalen Reihen und aus einzelnen Tabellenzellen.
Die Größe und die Anzahl der Zellen sind dabei frei wählbar.
Angefangen
wird immer mit dem <table>-Tag, der die
Größe der Tabelle und die Abstände zwischen den einzelnen
Zellen festlegt. Dieses Gerüst kann sichtbar oder unsichtbar
und beliebig bereit sein. Es lässt sich also belieb der Fensterbreite
des Browsers anpassen, kann aber auch eine in Pixel angegebene
feste Größe haben. Mit dem <tr>-Tag (table
row) ist die Anzahl der Reihen frei wählbar. Von links nach
rechts innerhalb einer Reihe werden dann die einzelnen Zellen
mit dem <td>-Tag (table data) und deren Inhalt definiert.
Einzelne Zellen können aber auch zusammengefasst werden.
Eine
fertige Tabellendefinition kann so aussehen:
<table
border="1">
<tr>
<td> <img src="images/grafik.gif" width="114"
height="88"</td>
<td> Ein Text </td>
</tr>
<tr>
<td> Ein Text </td>
<td> <img src="images/grafik.gif" width="114"
height="88"></td>
</tr>
</table>
 |
Ein Text |
| Ein Text |
|
Das
Ergebnis sieht dann so aus
Zellen
verbinden
Damit
eine Zelle in einer Reihe die Fläche von zwei oder mehr Zellen
in einer anderen Reihe einnimmt, wird der Zusatz <rowspan=x>
innerhalb eines <td> Tags eingefügt.
In HTML-Code könnte das ganze nun so aussehen:
<table
border="1">
<tr>
<td rowspan="2"> <img src="images/wlogo.gif"
width="114" height="88"</td>
<td> Ein Text </td>
</tr>
<tr>
<td>Zelle 2</td>
<td> Zelle 3</td>
</tr>
</table>
|
Zelle 2 |
| Zelle 3 |
Das
Ergebnis sieht dann so aus
Der
<colspan>-tag lässt sich genau gleich anwenden. Er
definiert aber anstelle von Reihenspannweiten die Spaltenspannweiten,
also kombiniert die horizontalen Zellen. In HTML-Code sieht
das so aus:
<table
border="1">
<tr>
<td colspan="2"> <img src="images/wlogo.gif"
width="114" height="88"</td>
<td> Zelle 2</td>
</tr>
<tr>
<td> Zelle 3</td>
</tr>
</table>
|
| Zelle 2 |
Zelle 3 |
Das
Ergebnis sieht dann so aus
Das
waren nun schon die Grundlegenden Dinge zu Tabellen. Mit
etwas Kreativität lassen sich auf diese Weise ganze Seitenlayouts
konsequent auf das Web übertragen werden.
Tabellengrößen
Damit
man ein Seitenlayout unter Kontrolle behält, ist es fast
immer notwendig, auch die Größe von Tabellen zu definieren.
Auch leere Zellen können eine Größe haben, um beispielsweise
Raum zwischen zwei Elemente zu bringen. <table
width=x> definiert die Breite der ganzen Tabelle.
Ohne das width würde sie so groß bleiben, wie
es ihr Inhalt verlangt. Eine Zahl anstelle des x würde die
Tabelle auf die angegebene Pixelbreite trimmen. So bleibt
die Tabelle immer so groß wie angegeben. Tippt man aber
anstelle eines Pixelmaßes eine Prozentzahl ein <table
width=100%>, so passt sich der Browser an die
geöffnete Fenstergröße an. Bei 100% würde die Tabelle an
das komplette Browserfenter angepasst. Mittlerweile lässt
sich auch die Höhe von Tabellen mit dem height
Attribut auf dieselbe Art definieren.
Nicht
nur die Größe der ganzen Tabelle, sondern auch die einer
einzelnen Zelle kann auf diese Art eingestellt werden. Dazu
werden die height und width-Attribute einfach
in die <td>-Klammer geschrieben.
Elemente
ausrichten
Wenn
nicht anders angegeben werden die Zelleninhalte immer automatisch
links ausgerichtet. Mit dem <align>-Attribut lassen
sich Bilder und Texte links-, rechtsbündig oder zentrieren.
<td align=right> richtet alle Inhalte
einer Zelle rechtsbündig aus. <td align=left>
steht für linksbündig und <td align=center>
für zentriert.
<table
border="1" width="100">
<tr>
<td align="center" valign="top" colspan="2">
<img src="images/wlogo.gif" width="114"
height="88"</td>
<td align="center"> Zelle 2</td>
</tr>
<tr>
<td align="center"> Zelle 3</td>
</tr>
</table>
Um
die Elemente vertikal, also oben oder unten auszurichten,
wird das valign-Attribut genutzt. Folgende
Einstellungen sind möglich:
<td>
valign=top> - Element oben ausrichten
<td valign=botton> - Element unten ausrichten
<td valign=middle> - Element vertikal zentrieren (Standardeinstellung)
|
|
| Zelle 2 |
Zelle 3 |
Das
Ergebnis sieht dann so aus
Alle
beschriebenen Attribute lassen sich natürlich auch beliebig
kombinieren.
Abstände
Mit
dem border-Attribut kann die Randbreite einer
Tabelle festgelegt werden. Wird das Attribut auf null gestellt
(border=0), bleibt der Rand unsichtbar, die Zelleninhalte
fügen sich nahtlos aneinander. Je dicker der Rand definier
wird, desto größer ist auch ihr Abstand zueinander. Möchte
nab einen unsichtbaren Rand und gleichzeitig etwas Abstand
zwischen den Zellen, dann kommen die Attribute cellspacing
und cellpadding ins Spiel. Diese beiden Attribute
definieren unabhängig vom border-Attribut die Zellabstände.
cellspacing
schiebt die einzelnen Tabellenzellen pixelgenau auseinander.
Angewendet wird es im <table>-Tag und
definiert so den Abstand für alle Zellen innerhalb der Tabelle.
cellpadding definiert den Abstand zwischen Rand und Inhalt
aller Zellen.
<table
border cellpadding="15" cellspacing="10"
width="100">
<tr>
<td align="center" valign="top" colspan="2">
<img src="images/wlogo.gif" width="114"
height="88"</td>
<td align="center"> Zelle 2</td>
</tr>
<tr>
<td align="center"> Zelle 3</td>
</tr>
</table>
|
|
| Zelle 2 |
Zelle 3 |
Das
Ergebnis mit Rahmen sieht so aus
|
|
| Zelle 2 |
Zelle 3 |
Das
Ergebnis ohne Rahmen sieht so aus
Farben
und Hintergrundbilder
Farbige
Tabellenzellen können eine Bereicherung des Screens sein und
Inhalte optisch strukturieren. So ist es möglich, große Farbflächen
zu erstellen, die sehr schnell laden. Ein im Hexadezimalwert
definierter Farbton wir mit dem Attribut bgcolor innerhalb
des <td>-Tags gesetzt.
<table
border cellpadding="15" cellspacing="10"
width="100">
<tr>
<td align="center" valign="top" colspan="2">
<img src="images/wlogo.gif" width="114"
height="88"</td>
<td bgcolor="#FFCC99" align="center">
Zelle 2</td>
</tr>
<tr>
<td bgcolor="#FFCC99" align="center">
Zelle 3</td>
</tr>
</table>
|
|
| Zelle 2 |
Zelle 3 |
Das
Ergebnis siehtso aus
Tabellenzellen
mit Hintergrundfarben eignen sich bestens, um tabellarische
Daten übersichtlicher darzustellen. Beispielsweise können
Titel optisch vom Inhalt getrennt werden indem sie unterschiedlich
eingefärbt werden. Bei der Farbgebung ist aber darauf zu achten,
dass der Kontrast zwischen Hintergrund und Textfarbe genügend
groß ist, so dass die Informationen auch gelesen werden können
und die Farbgebung nicht vom Inhalt ablenkt.
Natürlich
lassen sich auf GIF- oder JPEG-Bilder als Hintergrund von
Tabellenzellen definieren. Diese verhalten sich wie ein Hintergrundbild,
welches im Body-Tag definiert wird. Ist der Bereich größer
als das Bild, wiederholt es sich kachelartig. Der HTML-Code
für den Tabellenhintergrund sieht so aus:
<td
background="URL">
|
