Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML
Artikelserie - Tabellen im Web
Dieser Artikel ist Teil einer Artikelserie rund um die Verwendungen von Tabellen im Webdesign. Insgesamt beinhaltet die Serie folgende Artikel:
4.1 Gestaltung mittels (X)HTML
Anzeige Hier werben
Obwohl man heute dank CSS (aktuell in Version 2) die Möglichkeit hat, Inhalt und Design strikt voneinander zu trennen, ist es dennoch möglich, alleine mit (X)HTML-Angaben auf das Erscheinungsbild der Tabelle Einfluss zu nehmen.
Im Folgenden sollen die hierfür wichtigsten Befehle kurz vorgestellt werden (hier nicht aufgeführt sind als deprecated, d.h. als veraltet markierte Funktionen).
Tabellenrahmen
Mit der Angabe border im <table>-Tag lässt sich der Rahmen der Tabelle tabellenweit festlegen. Die Angabe erfolgt dabei in Pixeln. Durch das optionale Attribut frame lässt sich zudem das Erscheinungsbild des Rahmens näher definieren.
1 | <table border="1" frame="...">
|
| Attribut | Beschreibung |
|---|---|
frame="box" |
Der Rahmen wird an allen 4 Seiten angezeigt (Voreinstellung) |
frame="void" |
Bewirkt, dass keine Tabellenrahmen angezeigt werden. Ist jedoch der Wert für boder > 0, werden Rahmen (wenn auch nur für die Zellen) angezeigt |
frame="above", frame="below", frame="lhs", frame="rhs" |
Bewirken das Anzeigen von Rahmen oben, unten, links und rechts (lhs = left hand side) (rhs = right hand side) |
frame="hsides" |
Bewirkt, dass die Tabelle lediglich oben und unten von jeweils einer Linie eingefasst wird (hsides = horizontal sides) |
frame="vsides" |
Bewirkt, dass die Tabelle lediglich links und rechts von jeweils einer Linie eingefasst wird (vsides = vertical sides) |
Zellrahmen (Gitternetzlinien)
Ist das border-Attribut im <table>-Tag angegeben und > 0, werden in der Tabelle Gitternetzlinien angezeigt. Mit dem optionalen Attribut rules lässt sich die Anmutung dieser Linien beeinflussen.
1 | <table border="1" rules="...">
|
| Attribut | Beschreibung |
|---|---|
rules="none" |
Es werden keinerlei Zellenrahmen, sondern ausschließlich Tabellenrahmen gezeichnet |
rules="rows" |
Es werden lediglich horizontale Linien zwischen den Zeilen gezeichnet |
rules="cols" |
Es werden nur vertikale Linien zwischen den Spalten gezeichnet |
rules="groups" |
Es werden Linien zwischen Kopf-, Körper und Fußbereich gezeichnet |
rules="all" |
Entspricht dem Standardwert und bewirkt, dass sowohl horizontale (Zeilen) und vertikale (Spalten) Linien gezeichnet werden |
Tabellenbreite
Die Gesamttabellenbreite lässt sich mit dem Attribut width im <table>-Tag angeben. Die Angabe kann in Pixel (nur Zahl, z.B. width="100") oder Prozent (Zahl plus Prozentzeichen, z.B. width="50%") erfolgen.
Diese Art der Verwendung von width in einer Tabelle hat nur so lange Relevanz, wie der Inhalt der Zellen in der Summe nicht breiter wird, als der per width definierte Raum. Wird auf Grund des Zellinhaltes mehr Platz benötigt, so wird die width-Angabe ignoriert.
Es gibt zwar weit verbreitet auch den Einsatz des Attributes height
in Tabellen, jedoch ist diese Angabe nie im HTML-Standard definiert
worden. Breiten- und Höhenangaben von einzelnen Zellen sind als
deprecated markiert und werden heute mit Hilfe von CSS vorgenommen.
1 | <table width="...">
|
Ausrichtung von Zellinhalt
Die horizontale Ausrichtung von Zellinhalten erfolgt in (X)HTML mit Hilfe des attributes align. Erlaubte Werte sind
1 | <table align="..." valign="...">
|
| Attribut | Beschreibung |
|---|---|
align="left" |
Für linksbündigen Flattersatz |
align="right" |
Für rechtsbündigen Flattersatz |
align="center" |
Für zentrierten Text |
align="justify" |
Für Blocksatz |
Die vertikale Ausrichtung des Zellinhaltes lässt sich mit valign (vertical align) definieren. Erlaubte Werte sind
| Attribut | Beschreibung |
|---|---|
valign="top" |
Der Text wird obenbündig dargestellt |
valign="bottom" |
Der Text wird untenbündig dargestellt |
valign="middle" |
Der Text wird vertikal zentriert dargestellt |
valign="baseline" |
Alle Textinhalte einer Tabellenzeile werden so ausgerichtet, dass immer die ersten Zeilen der Zelltexte auf der selben Linie stehen |
Auch hier gilt das Vererbungsprinzip der Definitionen. Angaben dieser Art, welche z.B. in <tr>-Tags (Zeilen) oder Tabellenbereichen (z.B. <thead>)
festgelegt werden, gelten automatisch für die darin enthaltenen
Elemente. Ist jedoch in einer Zelle eine dazu widersprüchliche
Definition getroffen worden, so hat diese Priorität. Diese Form der
Formatierung sollte jedoch über CSS erfolgen.
Zellenabstand und Zellraum
Mit Hilfe von cellspacing und cellpadding
lassen sich die Abstände der Zellen untereinander sowie der
Innenabstand einer Zelle zu ihrem Inhalt festlegen. Die Angabe erfolgt
dabei in Pixeln.
1 | <table cellspacing="..." cellpadding="...">
|
Weitere ähnliche Artikel
Thomas ist Diplom-Designer (FH) und arbeitet derzeit als Flash Developer/Screendesigner in Frankfurt a.M. Seine Fachgebiete sind interaktive Medien und Design.
Profilseite betrachten