Tabellengestaltung

Kurzzusammenfassung

Übung 05

Übung 06

Eine Tabelle als Gestaltungselement

Beispielcode für eine Tabelle: Tabellenansicht

<TABLE BORDER=1 BGCOLOR="#CCFFFF" >
<CAPTION><B>Tabellenüberschrift</B></CAPTION>
<TR VALIGN=TOP>
<TD>1. Zelle der 1. Zeile</TD>
<TD>2. Zelle der 1. Zeile</TD>
<TD>3. Zelle der 1. Zeile</TD>
</TR>
<TR VALIGN=TOP>
<TD>1. Zelle der 2. Zeile</TD>
<TD>2. Zelle der 2. Zeile</TD>
<TD ROWSPAN="2">3. Zelle der 2. Zeile, über 2 Zeilen hinweg</TD>
</TR>
<TR>
<TD COLSPAN="2">1. Zelle der 3. Zeile, über 2 Spalten hinweg</TD>
</TR>
</TABLE>

**Tabellenüberschrift**
1. Zelle der 1. Zeile	2. Zelle der 1. Zeile	3. Zelle der 1. Zeile
1. Zelle der 2. Zeile	2. Zelle der 2. Zeile	3. Zelle der 2. Zeile, über 2 Zeilen hinweg
1. Zelle der 3. Zeile, über 2 Spalten hinweg		3. Zelle der 2. Zeile, über 2 Zeilen hinweg

Tabellenbeispiele

Blinde Tabellen werden im Desktop Publishing (DTP) häufig eingesetzt, um die Anordnung von Text genau zu kontrollieren. Mit den Features der HTML-Tabellenfunktionen ist dies auch für Dokumente des World Wide Web möglich.

Mehrspaltensatz lockert die dargebotene Textinformation auf und sorgt für mehr Abwechselung am Bildschirm. Besonders für elektronische Magazine (e-zines) könnte dieses Feature interessant sein.

Auch bei der Plazierung von Bildern gewinnen Sie mit Hilfe von blinden Tabellen viel Freiheit. Überlegen Sie mal!

Nebenstehend eine schmale Spalte, grau hinterlegt als Trennlinie

3 Tabellen mit Rahmen (3 bzw. 5 Pixel breit) jeweils 1 Zeile hoch und 1 Spalte breit

Start

Halt

Ende

Tabellenbeispiele

Tabelle mit gleicher Zellenbreite ohne Randdarstellung
A	B	C
E	F	G
I	J	K

Tabelle mit verschieden breiten und hohen Zellen
A		B	1		C	D
E	2				3		F
	4	G		H		5
		I	J		K

Gestaltung von Tabellen, Zeilen und Zellen

Tabellenbestandteile

Start-Tag

Ende-Tag

Beispiel

Tabellenüberschrift

<caption>

</caption>

**Überschrift**

Tabellenunterschrift

<caption align=bottom>

</caption>

**Unterschrift**

Tabellenzeile

<tr>

</tr>

Tabellenspalte

<td>

</td>

Textausrichtung (sichtbar nur in nicht vollständig ausgefüllten Zellen)

Zeile/Zelle linksbündig (Standard)

<tr> bzw. <td>

</tr> bzw. </td>

linksbündiger Text

Zeile/Zelle zentriert

<tr align=center> bzw.
<td align=center>

</tr> bzw.
</td>

zentrierter Text

Zeile/Zelle rechtsbündig

<tr align=right> bzw.
<td align=right>

</tr> bzw.
</td>

rechtsbündiger text

Zeile/Zelle vertikal
zentriert (Standard)

<tr> bzw. <td>

</tr> bzw. </td>

Zelleninhalt

Zeile/Zelle vertikal
oben ausgerichtet

<tr valign=top> bzw.
<td valign=top>

</tr> bzw.
</td>

Zelleninhalt

Zeile/Zelle vertikal
unten ausgerichtet

<tr valign=bottom> bzw.
<td valign=bottom>

</tr> bzw.
</td>

Zelleninhalt

Zellenhintergrund

Zeile/Zelle hellblau

<tr bgcolor="#66ffff"> bzw.
<td bgcolor="#66ffff">

</tr> bzw.
</td>

Zelleninhalt

Grafik als Hintergrund
der Zeile/Zelle

<tr background="mail.gif"> bzw.
<td background="mail.gif">

</tr> bzw.
</td>

Zellengröße

Zelle über 2 Spalten

<td colspan=2>

</td>

Zelle über 2 Zeilen

<td rowspan=2>

</td>

Zelleninhalt

Zelle über 3 Spalten (<td colspan=3> ... </td>)

Hinweis: Es ist erst eine "ordentliche Tabelle" zu erstellen, anschließend werden einzelne Zellen herausgelöscht und die darüberliegenden oder davorbefindlichen Zellen über mehrere Zeilen bzw. Spalten definiert.

E-Mail an Horst@holyware.de