Sie sind hier: Workshops Tabellen-Workshop

Tabellen-Workshop

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>

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>

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>

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)

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>

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>

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




 Zurück zu: Workshops