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
200
201
202
203
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel für Web-Seitenlayouts</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie HTML-Tabellen einsetzen können, so dass typische Web-Seitenlayouts daraus entstehen.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Tabellen, Layout, Seitenlayout, Tabellenlayouts, Design, Web-Design, verschachtelte Tabellen">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/tabellen/layouts.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Tabellen == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Tabellen</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Tabellen als Mittel für Web-Seitenlayouts</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#allgemeines"><b>Allgemeines zu Tabellen für Web-Seitenlayouts</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#beispiel"><b>Beispiel eines typischen Tabellen-Layouts</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><a class="an" name="allgemeines">Allgemeines zu Tabellen für Web-Seitenlayouts</a></h2>
<p>Wenn Sie bei Web-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meist farbigen Flächen stoßen, wurde in vielen Fällen 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 Datenübertragung aus dem Web, dass ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird. Es sei denn, Sie benutzen die Möglichkeit, um <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="aufbau.htm#vordefinieren"><b>Spalten vorzudefinieren</b></a>.</p>
<p>Ein weiteres Problem besteht darin, dass Browser mit gewünschten Breiten- und Höhenangaben nicht unbedingt so umgehen, wie Sie es wünschen. Inhalte werden dann plötzlich gestaucht, auseinandergezogen usw. Dies hat zur Erfindung des so genannten "blinden Pixels" geführt, einer kleinen GIF-Grafik, die nur aus einer einfarbigen Fläche besteht, deren Farbe wiederum als transparent definiert ist. Zusammen mit der Möglichkeit, <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../grafiken/einbinden.htm#breite_hoehe"><b>Breite und Höhe einer Grafik</b></a> in HTML unabhängig von der tatsächlichen Größe der Grafik anzugeben, lässt sich eine solche Grafik scheinbar unsichtbar und unauffällig einbauen. So lassen sich vor allem feste Mindestbreiten für 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 für fehlende Formatiermöglichkeiten. Mittlerweile stellen <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a> solche Möglichkeiten zwar bereit (vgl. die CSS-Eigenschaft <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm#min_width"><b>min-width</b></a>), doch das nutzt nicht viel, solange die weit verbreiteten Browser noch keine Unterstützung dafür anbieten.</p>
<p>In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seitenlayouts 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>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html20.gif" width="30" height="30" border="0" alt="HTML 2.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/deprecated.gif" width="30" height="30" border="0" alt="deprecated"><img src="../../src/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc11.gif" width="30" height="30" border="0" alt="Netscape 1.1"> <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 Fläche, wo die Seitenüberschrift steht und andere Elemente wie Grafiken für Logos, Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Fläche für Navigationsverweise innerhalb des Web-Projekts, und rechts davon eine breite Fläche für den eigentlichen Inhalt der Seite.</p>
<p>Das Beispiel ist gültiges HTML 4.0, benutzt aber diverse Attribute, die als <i>deprecated</i> gekennzeichnet sind, weshalb als HTML-Variante "Transitional" gewählt werden muss.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/layout.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</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"><b>Tabelle</b></a><br>
<a href="bgcolor.htm"><b>Hintergrund</b></a><br>
<a href="colspan.htm"><b>Zellen verbinden</b></a><br>
<a href="width_height.htm"><b>Breite und H&ouml;he</b></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 &Uuml;bliche. viel Inhalt viel Inhalt viel Inhalt
viel Inhalt viel Inhalt viel Inhalt 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><p>viel Inhalt</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel bestimmt im einleitenden <code><body></code>-Tag zunächst dateiweite <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../dateiweit/farben.htm"><b>Farben für Hintergrund, Text und Verweise</b></a>.</p>
<p>Innerhalb des Dateikörpers wird die übergeordnete Tabelle definiert. Sie erhält 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 aneinanderfügen. Das ist wichtig, damit zwischen den Farbflächen keine sichtbaren Lücken entstehen.</p>
<p>Weil es sich um eine die ganze Seite überspannende Tabelle handelt, werden für Browser, die das verstehen, die gewünschten 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 für Navigationsverweise werden. Die zweite Spalte soll den Rest des vergügbaren Platzes in Anspruch nehmen. Die gesamte Tabelle soll sich über die volle verfügbare 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 Flächen 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 für für den Überschriftenteil zur Verfügung. Da mit <code>cellpadding="0"</code> und <code>cellspacing="0"</code> gearbeitet wird, würde der Inhalt allerdings ganz am Außenrand 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 für die Seite notiert (<code>Willkommen</code>). Die Überschrift erhält mit Hilfe der CSS-Eigenschaft <code>color:</code> eine weiße Farbe, um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.</p>
<p>In der zweiten Zeile der übergeordneten Tabelle werden für beide definierten Spalten je eine Zelle definiert. Die erste (linke) Zelle ist dann der Behälter für die gesamte linke Spalte - also für die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behälter für den gesamten Inhalt des Hauptbereichs, also des Bereichs für den eigentlichen Seiteninhalt. Die zweite Zelle, also die für den Hauptbereich, erhält 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 würde, während der gesamte Rest der Seite einen weißen 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 für saubere Abstände zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Höhe ausgerichtet. Mit <code>valign="top"</code> wird in beiden Zellen dafür gesorgt, dass die Inhalte, die ja unterschiedlich groß sein können, auf jeden Fall obenbündig 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, Textabsätze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weiße Textfarbe, um sich vom Hintergrund abzuheben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Sie können CSS Stylesheets noch wesentlich konsequenter einsetzen, als es im obigen Beispiel der Fall ist. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/formate/index.htm"><b>CSS-Formate definieren</b></a> kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/schrift.htm"><b>Schriftformatierung</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/ausrichtung.htm"><b>Ausrichtung und Absatzkontrolle</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/randabstand.htm"><b>Außenrand und Abstand</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/innenabstand.htm"><b>Innenabstand</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/rahmen.htm"><b>Rahmen</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/hintergrund.htm"><b>Hintergrundfarben und -bilder</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm"><b>Positionierung und Anzeige von Elementen</b></a></p>
</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="nicht_visuell.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="nicht_visuell.htm"><b>Tabellen und nicht-visuelle Medien</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="umgebung.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="umgebung.htm"><b>Tabellenbeschriftung und Tabellenausrichtung</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Tabellen</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
