Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

von Thomas | 0 | 0 Kommentare | 3131 Aufrufe

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.

Codebeispiel  
HTML
1
<table border="1" frame="...">
AttributBeschreibung
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.

Codebeispiel  
HTML
1
<table border="1" rules="...">
AttributBeschreibung
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.

 
HTML
1
<table width="...">

Ausrichtung von Zellinhalt

Die horizontale Ausrichtung von Zellinhalten erfolgt in (X)HTML mit Hilfe des attributes align. Erlaubte Werte sind

 
HTML
1
<table align="..." valign="...">
AttributBeschreibung
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

AttributBeschreibung
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.

 
HTML
1
<table cellspacing="..." cellpadding="...">

Weitere ähnliche Artikel

Tabellen im Web – Teil 1 – Eine Einführung

Einige Erläuterungen zu den Möglichkeiten und Notwendigkeiten der Gestaltung von Tabellen im Web, für alle diejenigen, die sich auch an ordentlichen Tabellen in Drucksachen erfreuen würden und ebenfalls der Meinung sind, dass das Web dem nicht zu weit nachstehen sollte. [lesen]

Tabellen im Web – Teil 2 – Die richtige Code-Struktur

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist eine strukturierte Vorbereitung. Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen. [lesen | 8]

Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

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. [lesen]

Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

Geht es darum, gezielt in das Erscheinungsbild einer Tabelle einzugreifen, spielt CSS seine Stärken aus. Seit CSS der Version 2 sind im Standard vielfältige Funktionen zur visuellen Anpassung von Tabellen vorgesehen, die größtenteils auch bereits in den aktuellen Versionen der gängigen Browser implementiert wurden. [lesen]

Tabellen im Web – Teil 5 – Interaktion

Einen nennenswerten Vorteil von tabellarischen Darstellungen im Web stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können. [lesen]

Über den Autor: Thomas
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

Kommentare: Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML