1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel fr Web-Seiten-Layouts</title>
<meta name="description" content="Wie Sie HTML-Tabellen einsetzen knnen, sodass typische Web-Seiten-Layouts daraus entstehen.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Tabellen, Layout, Seiten-Layout, Tabellenlayouts, Design, Web-Design, verschachtelte Tabellen">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-10-31T12:25:34+01:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/html/tabellen/layouts.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Tabellen" href="index.htm">
<link rel="next" title="Tabellen und nicht-visuelle Medien" href="nicht_visuell.htm">
<link rel="prev" title="Tabellenbeschriftung und Tabellenausrichtung" href="umgebung.htm">
<link rel="first" title="Aufbau einer Tabelle" href="aufbau.htm">
<link rel="last" title="Tabellen und nicht-visuelle Medien" href="nicht_visuell.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">HTML/XHTML</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Tabellen</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Tabellen als Mittel fr Web-Seiten-Layouts</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#allgemeines">Allgemeines zu Tabellen fr Web-Seiten-Layouts</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#beispiel">Beispiel eines typischen Tabellen-Layouts</a><br>
</p>
</td>
</tr>
<tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="allgemeines">Allgemeines zu Tabellen fr Web-Seiten-Layouts</a></h2>
<p>Wenn Sie bei Web-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meist farbigen Flchen stoen, wurde in vielen Fllen mit der Technik der "blinden Tabellen" gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, dass es sich in Wirklichkeit um eine Tabelle handelt.</p>
<p>Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer Web-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom Web-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der Web-Browser genau wei, wie gro und wie breit die Tabelle angezeigt werden muss. Das bedeutet bei der Datenbertragung aus dem Web, dass ein Anwender am Bildschirm lnger wartet, bis berhaupt etwas angezeigt wird. Es sei denn, Sie benutzen die Mglichkeit, um <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="aufbau.htm#vordefinieren">Spalten vorzudefinieren</a>.</p>
<p>Ein weiteres Problem besteht darin, dass Browser mit gewnschten Breiten- und Hhenangaben nicht unbedingt so umgehen, wie Sie es wnschen. Inhalte werden dann pltzlich gestaucht, auseinandergezogen usw. Dies hat zur Erfindung des so genannten "blinden Pixels" gefhrt, einer kleinen GIF-Grafik, die nur aus einer einfarbigen Flche besteht, deren Farbe wiederum als transparent definiert ist. Zusammen mit der Mglichkeit, <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../grafiken/einbinden.htm#breite_hoehe">Breite und Hhe einer Grafik</a> in HTML unabhngig von der tatschlichen Gre der Grafik anzugeben, lsst sich eine solche Grafik scheinbar unsichtbar und unauffllig einbauen. So lassen sich vor allem feste Mindestbreiten fr einzelne Spalten einer Tabelle erzwingen, und der Browser kann die Inhalte darin nicht mehr stauchen. Diese Technik gilt einerseits als unsaubere Trickserei, ist aber andererseits Ausdruck fr fehlende Formatiermglichkeiten. Mittlerweile stellen <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../css/index.htm">Stylesheets</a> solche Mglichkeiten zwar bereit (vgl. die CSS-Eigenschaft <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm#min_width">min-width</a>), doch das nutzt nicht viel, solange die weit verbreiteten Browser noch keine Untersttzung dafr anbieten.</p>
<p>In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seiten-Layouts mit blinden Tabellen im Prinzip funktionieren. Auf die Technik des blinden Pixels wird hier verzichtet. Doch eine andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von Tabellen arbeitet.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/html20.gif" width="30" height="30" alt="HTML 2.0" title="HTML 2.0"><img src="../../src/xhtml10.gif" width="30" height="30" alt="XHTML 1.0" title="XHTML 1.0"><img src="../../src/deprecated.gif" width="30" height="30" alt="deprecated (missbilligt)" title="deprecated (missbilligt)"><img src="../../src/msie2.gif" width="30" height="30" alt="MS IE 2.0" title="MS IE 2.0"><img src="../../src/netsc11.gif" width="30" height="30" alt="Netscape 1.1" title="Netscape 1.1"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="beispiel">Beispiel eines typischen Tabellen-Layouts</a></h2>
<p>Das folgende Beispiel zeigt ein Layout, wie man es auf vielen Web-Seiten findet: oben eine farbige Flche, wo die Seitenberschrift steht und andere Elemente wie Grafiken fr Logos, Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Flche fr Navigationsverweise innerhalb des Web-Projekts, und rechts davon eine breite Flche fr den eigentlichen Inhalt der Seite.</p>
<p>Das Beispiel ist gltiges HTML 4.0, benutzt aber diverse Attribute, die als <i>deprecated</i> gekennzeichnet sind, weshalb als HTML-Variante Transitional gewhlt werden muss.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/layout.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beispiel eines typischen Tabellen-Layouts</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFF00" vlink="#FFCC00" alink="#FFFFFF" text="#000000">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
<colgroup>
<col width="200">
<col>
</colgroup>
<tr>
<td colspan="2">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td><h1 style="color:#FFFFFF">Willkommen</h1></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="200">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<h3 style="color:#FFFFFF">Navigation</h3>
<p><a href="table_tr_th_td.htm">Tabelle</a><br>
<a href="bgcolor.htm">Hintergrund</a><br>
<a href="colspan.htm">Zellen verbinden</a><br>
<a href="width_height.htm">Breite und Höhe</a></p>
<h3 style="color:#FFFFFF">News</h3>
<p style="color:#FFFFFF">Die Neuigkeiten stehen stets an dieser Stelle.
Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.</p>
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<h2>Worum geht es hier eigentlich?</h2>
<p>Ach, um Web-Design, halt das Übliche.</p>
<p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
<p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel bestimmt im einleitenden <code><body></code>-Tag zunchst dateiweite <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../dateiweit/farben.htm">Farben fr Hintergrund, Text und Verweise</a>.</p>
<p>Innerhalb des Dateikrpers wird die bergeordnete Tabelle definiert. Sie erhlt die Attribute <code>border="0"</code>, damit kein Rahmen und keine Gitternetzlinien angezeigt werden, sowie <code>cellpadding="0"</code> und <code>cellspacing="0"</code>, damit sich die einzelnen Zellen der Tabelle nahtlos aneinanderfgen. Das ist wichtig, damit zwischen den Farbflchen keine sichtbaren Lcken entstehen.</p>
<p>Weil es sich um eine die ganze Seite berspannende Tabelle handelt, werden fr Browser, die das verstehen, die gewnschten Spalten mit <code><col></code>-Tags vordefiniert. Die Tabelle soll zwei Spalten haben, wobei die erste eine Breite von 200 Pixeln haben soll. Das soll die Spalte fr Navigationsverweise werden. Die zweite Spalte soll den Rest des verfgbaren Platzes in Anspruch nehmen. Die gesamte Tabelle soll sich ber die volle verfgbare Breite erstrecken - angegeben durch <code>width="100%"</code> im einleitenden <code><table></code>-Tag der bergeordneten Tabelle.</p>
<p>Die gesamte bergeordnete Tabelle bekommt ferner mit Hilfe von <code>bgcolor="#A050A0"</code> einen matt-violetten Hintergrund zugewiesen. Damit erhalten erst mal alle ihre Inhalte diese Hintergrundfarbe. Um andersfarbige Flchen innerhalb der Tabelle zu erzeugen, sind bei den einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich, die dann diese globale Hintergrundfarbe berschreiben.</p>
<p>Die erste Zelle der ersten Zeile der bergeordneten Tabelle ist zugleich die einzige Zelle in dieser Zeile, da durch das Attribut <code>colspan="2"</code> erreicht wird, dass sich die Zelle ber zwei Spalten erstreckt. Der Inhalt dieser Zelle steht nun fr den berschriftenteil zur Verfgung. Da mit <code>cellpadding="0"</code> und <code>cellspacing="0"</code> gearbeitet wird, wrde der Inhalt allerdings ganz am Auenrand der Tabelle kleben, was unsauber aussieht. Deshalb kommt bereits bei der berschrift zum ersten Mal die Technik der Tabelle in der Tabelle zum Einsatz:<br>
<code><table border="0" cellpadding="10" cellspacing="0"></code> definiert innerhalb der ber zwei Spalten gestreckten Tabellenzelle eine weitere Tabelle. Auch diese ist wiederum rahmenlos (<code>border="0"</code>). Durch <code>cellpadding="10"</code> wird jedoch ein Innenabstand von 10 Pixeln zum Zellenrand erzwungen. Diese Angabe ist der eigentliche Grund, warum die innere Tabelle definiert wird. Denn die innere Tabelle hat nur eine einzige Zeile mit einer einzigen Spalte, also nur eine Zelle, und darin ist die <code>h1</code>-berschrift fr die Seite notiert (<code>Willkommen</code>). Die berschrift erhlt mit Hilfe der CSS-Eigenschaft <code>color:</code> eine weie Farbe, um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.</p>
<p>In der zweiten Zeile der bergeordneten Tabelle werden fr beide definierten Spalten je eine Zelle definiert. Die erste (linke) Zelle ist dann der Behlter fr die gesamte linke Spalte - also fr die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behlter fr den gesamten Inhalt des Hauptbereichs, also des Bereichs fr den eigentlichen Seiteninhalt. Die zweite Zelle, also die fr den Hauptbereich, erhlt mit <code>bgcolor="#FFFFFF"</code> als Hintergrundfarbe wei zugewiesen. So entsteht letztlich der optische Eindruck, als ob die Seite nur oben und links einen farbigen Balken enthalten wrde, whrend der gesamte Rest der Seite einen weien Hintergrund hat.</p>
<p>In beiden Zellen der zweiten Zeile der bergeordneten Tabelle wird auch wieder je eine innere Tabelle definiert, die mit den gleichen Attributen wie im Fall der berschrift fr saubere Abstnde zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Hhe ausgerichtet. Mit <code>valign="top"</code> wird in beiden Zellen dafr gesorgt, dass die Inhalte, die ja unterschiedlich gro sein knnen, auf jeden Fall obenbndig ausgerichtet werden.</p>
<p>Die Verweise in der linken Spalte heben sich durch ihre dateiweit definierten Farben gut von dem violetten Hintergrund ab. Normaler Text, der in der linken Spalte steht, also berschriften, Textabstze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weie Textfarbe, um sich vom Hintergrund abzuheben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Sie knnen Stylesheets noch wesentlich konsequenter einsetzen, als es im obigen Beispiel der Fall ist. Bei Verwendung von Stylesheets mssen Sie zunchst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../../css/formate/index.htm">CSS-Formate definieren</a> kann. Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/schrift.htm">Schriftformatierung</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/ausrichtung.htm">Ausrichtung und Absatzkontrolle</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/randabstand.htm">Auenrand und Abstand</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/innenabstand.htm">Innenabstand</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/rahmen.htm">Rahmen</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/hintergrund.htm">Hintergrundfarben und -bilder</a><br>
<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm">Positionierung und Anzeige von Elementen</a>
</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="nicht_visuell.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="nicht_visuell.htm">Tabellen und nicht-visuelle Medien</a>
</td></tr>
<tr>
<td class="doc"><a href="umgebung.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="umgebung.htm">Tabellenbeschriftung und Tabellenausrichtung</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">HTML/XHTML</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Tabellen</a></td>
</tr></table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
