Tabellen: Web-Publishing. Basiswissen für Internet-Projekte.

Tabellen

Funktion und Zweck

Aufbau einer Tabelle

Tabellenweite Attribute

Zeilen Attribute

Zellen Attribute

Aufgaben

Funktion und Zweck von Tabellen

In HTML werden Tabellen verwendet, um tabellarische Daten (Gitternetzlinien) darzustellen, genauso wie in jedem anderen Textverarbeitungsprogramm. Viel wichtiger: In HTML werden Tabellen zur Gestaltung der Seite benutzt, damit wird eine optimale Positionierung von Text und Grafik am Bildschirm möglich (in der Regel ohne sichtbare Gitternetzlinien). Es gibt kaum eine Seite, die nicht Tabellen enthält (Schauen Sie sich einmal den Quellcode dieser Seite an).

Tabellen können einmal relativ oder absolut eingestellt sein. Im ersten Fall wird nur der Anteil der Tabelle an der Breite des Browser-Fensters (Angaben in Prozent) und im zweiten Fall die Breite in Pixel und damit absolut festgesetzt.

Aufbau einer Tabelle

<table> Tabellen-Anfang
<caption> Tabellen-Überschrift </caption>
<tr> Tabellen-Zeile
<th> Tabellen-Kopf: Hier stehen die Daten der Kopfzelle. </th>
<th> Hier stehen die Daten der Kopfzelle. </th> Tabellen-Kopf-Ende
</tr> Zeilen-Ende
<tr>
<td> Beginn Datenzelle: Hier stehen die Daten der Datenzelle. </td> Datenzelle-Ende
<td> Hier stehen die Daten der Datenzelle. </td>
</tr>
</table> Tabellen-Ende

Sicht des Anwenders

**Blinde Tabelle**
Diese blinde Tabelle hat eine Zeile und zwei Zellen.	Der Nutzer sieht den Rand der Tabelle nicht und nimmt zwei Spalten war.

Sicht des Autors - HTML-Code

<table border="0" cellpadding="10" cellspacing="0" width="100%">
<caption> Blinde Tabelle</caption>
<tr>
<td width="50%" valign="top" align="left">Diese blinde Tabelle hat eine Zeile und zwei Zellen.</td>
<td width="50%" valign="top" align="left">Der Nutzer sieht den Rand der Tabelle nicht und nimmt zwei Spalten war.
</td>
</tr>
</table>

Sicht des Anwenders

**Gitternetz-Tabelle**
Titel	Titel	Titel
Inhalt	Inhalt	Inhalt
Reihe aus drei Zellen
Spalte aus drei Zellen	Inhalt	Inhalt
	Inhalt	Inhalt
	Inhalt	Inhalt

Sicht des Autors - HTML-Code

<table border="4" cellpadding="10" cellspacing="4" bordercolor="#FF0099" width="100%">
</caption> <b> Gitternetz-Tabelle</b></caption>
<tr>
<th>Titel</th>
<th>Titel</th>
<th>Titel</th>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td colspan="3">Reihe aus drei Zellen</td>
</tr>
<tr>
<td rowspan="3">Spalte aus drei Zellen</td>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
<tr>
<td>Inhalt</td>
<td>Inhalt</td>
</tr>
</table>

Tabellenweite Attribute

Die Attribute müssen wie folgt in den Tabellen-Befehl eingefügt werden und beeinflussen die gesamte Tabelle:
<table border="4" width="100%" bgcolor="red" cellpadding="10" cellspacing="9" bordercolor="blue" hspace="3" vspace="15">

Rahmen: border="*" Wert in Pixel angeben, z. B. border="5"

Breite: width="*" Damit wird die Breite in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) width="x%" (Wert in Prozent).

Höhe: height="*" Damit wird die Höhe in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) height="x%" (Wert in Prozent).

Hintergrundfarbe: bgcolor="*". Hier wird die Hintergrundfarbe der gesamten Tabelle hexadezimal oder mit englischen Begriffen (z.B. bgcolor="#0000FF" oder bgcolor="blue") festgelegt.

Farbe des Tabellenrandes: bordercolor="*" Hier wird die Farbe des Tabellenrandes bestimmt, sofern die Tabelle einen Rand hat.

Horizontaler Abstand für umliegende Objekte: hspace="*", in Pixel.

Vertikaler Abstand für umliegende Objekte: vspace="*", in Pixel.

Abstand der Zelleninhalte: cellpadding="*", gibt den Abstand der Zelleninhalte vom Zellenrand in Pixel an.

Abstand zwischen den Zellen: cellspacing="*", gibt den Abstand der Zellen untereinander in Pixel an.

Zeilen Attribute

Die Attribute müssen wie folgt in den Zeilen-Befehl eingefügt werden und beeinflussen die gesamte Zeile:
<tr align="center" valign="top" bgcolor="black" rowspan="3">

Horizontale Ausrichtung: align="*", * kann folgende Werte annehmen: left, center, right

Vertikale Ausrichtung: valign="*", * kann folgende Werte annehmen: top, middle, baseline

Breite: width="*" Damit wird die Breite in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) width="x%" (Wert in Prozent).

Höhe: height="*" Damit wird die Höhe in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) height="x%" (Wert in Prozent).

Zeilen-Farbe: bgcolor="*", legt die Farbe der Zeile fest ( Farben).

Zellen Attribute

Die Attribute müssen wie folgt in den Zellen-Befehl eingefügt werden und beeinflussen die gesamte Zelle:
<td align="center" valign="top" bgcolor="black" colspan="4">

Horizontale Ausrichtung: align="*", * kann folgende Werte annehmen: left, center, right

Vertikale Ausrichtung: valign="*", * kann folgende Werte annehmen: top, middle, baseline

Breite: width="*" Damit wird die Breite in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) width="x%" (Wert in Prozent).

Höhe: height="*" Damit wird die Höhe in Pixel-Punkte oder Prozent des Bildschirmes angegeben (Wert in Pixel) height="x%" (Wert in Prozent).

Zellen-Farbe: bgcolor="*", legt die Farbe der Zelle fest.

Sie können nebeneinanderliegende Zellen miteinander verbinden. Die verbundenen Zellen werden zu einer Zelle. Damit entstehen entweder zusammengehörende Reihen oder Spalten.

Anzahl der Spalten: rowspan="x", legt die Anzahl der Zellen innerhalb einer Spalte fest und verbindet nebeneinanderliegende Spalten.

Anzahl der Reihen: colspan="x", legt die Anzahl der Zellen innerhalb einer Reihe/Zeile fest und verbindet nebeneinanderliegende Reihen.

Aufgaben

Erstellen Sie im Ordner "test" einen Ordner "htm". In diesem Ordner erstellen Sie die Datei "tabelle.htm". Diese Datei sollte eine Gitternetztabelle mit Inhalten Ihrer Wahl enthalten.
Erstellen Sie im Ordner "test" einen Ordner "daten". Im Ordner "daten" erstellen Sie die Datei "begriffe.htm". Darin soll eine blinde Tabelle mit zwei oder drei Spalten Text vorkommen. Jede Zelle sollte eine andere Hintergrundfarbe haben, sowie der Text auch.

Farben

Seite drucken

Formulare

I. Technik	Grundbegriffe	HTML-Syntax	Text	Farben	Tabellen	Formulare
I. Technik	Links-Multimedia	Meta-Befehle	Frames	CSS	Forum	Editoren