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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie eine Tabelle in HTML optisch gestalten können, z.B. mit Vorgaben für Breite und Höhe, für das Aussehen der Gitternetzlinien und für Hintergrundfarben.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Tabellen, Ausrichtung, Breite, Höhe, Zeilenhöhe, Spaltenbreite, Tabellenbreite, horizontale Ausrichtung, vertikale Ausrichtung, Zeilenumbruch, Hintergrundfarbe, Hintergrundbild, Wallpaper, Zellenabstand, Zelleninnenabstand, <table>, <tr>, <th>, <td>, border=, cellspacing=, cellpadding=, frame=, rules=, align=, valign=, width=, height=, bgcolor=, background=, char=, charoff=, nowrap">
<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/gestaltung.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>Gestaltung einer Tabelle</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="#abstand"><b>Zellenabstand und Zelleninnenabstand</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#regeln_rahmen"><b>Regeln für den Außenrahmen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#regeln_gitternetz"><b>Regeln für Gitternetzlinien</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#breiten_hoehen"><b>Breiten- und Höhenangaben</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#zeilenumbruch"><b>Zeilenumbruch in Zellen verhindern</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#ausrichtung_zellen"><b>Ausrichtung von Zellen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#hintergrund"><b>Hintergrundfarben und Hintergrundbilder</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#farbrahmen"><b>Farben für Rand und Gitternetzlinien (Microsoft)</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#gestalten_css"><b>Tabellen mit CSS gestalten</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere"><b>Weitere Informationen</b></a>
</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"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><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="abstand">Zellenabstand und Zelleninnenabstand</a></h2>
<p>Sie können den Abstand zwischen den Zeilen und Spalten einer Tabelle in Pixeln bestimmen. Ferner können Sie den Abstand zwischen Zellenrand und Zelleninhalt bestimmen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/cellspacing_padding.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 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spalten vordefinieren</title>
</head>
<body>
<h1>Weit auseinander</h1>
<table border="8" cellspacing="10" cellpadding="20">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr>
<tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die folgende Grafik zeigt die Wirkungsweise der Attribute im einleitenden <code><table></code>-Tag:</p>
<p><img src="abstand.gif" width="332" height="202" border="0" alt="cellspacing= und cellpadding="></p>
<p>Mit <code>cellpadding=</code> bestimmen Sie den Innenabstand einer Zelle, also den Abstand zwischen Zellenrand und Zelleninhalt in Pixeln (<i>cellpadding = Zelleninnenabstand</i>). Mit <code>cellspacing=</code> bestimmen Sie den Abstand der Zellen untereinander in Pixeln (<i>cellspacing = Zellenabstand</i>). Wenn Sie mit <code>border=</code> einen sichtbaren Rahmen und sichtbare Gitternetzlinien in der Tabelle erzeugen, ist die Wirkungsweise von <code>cellpadding=</code> und <code>cellspacing=</code> besser nachvollziehbar. Bei blinden Tabellen erzeugen beide Attribute optisch gesehen einfach nur "Abstand".</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/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="regeln_rahmen">Regeln für den Außenrahmen</a></h2>
<p>Wenn Sie mit <code>border=</code> einen sichtbaren Tabellenrahmen erzeugen, erhalten automatisch alle Seiten einen Rahmen. Sie können aber auch genau bestimmen, welche Seiten eines Außenrahmens angezeigt werden und welche nicht.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/table_frame.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 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Rahmenvereinbarung</h1>
<table border="3" frame="void">
<tr>
<td><b>Assoziation 1</b></td>
<td><b>Assoziation 2</b></td>
<td><b>Assoziation 3</b></td>
</tr><tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Voraussetzung für all diese Angaben ist das Attribut <code>border=</code> im einleitenden <code><table></code>-Tag. Dadurch wird ein Außenrahmen angezeigt.</p>
<p>Mit dem Attribut <code>frame=</code> können Sie dann bestimmen, an welchen Seiten der Tabellenrahmen gezogen werden soll (<i>frame = Rahmen</i>).</p>
<p>Mit <code>frame="box"</code> (<i>box = Rechteck</i>) erreichen Sie, dass der Tabellenrahmen oben, links, rechts und unten sichtbar dargestellt wird (die Angabe ist identisch mit dem, was die Angabe <code>border=</code> bewirkt - auch <code>frame="border"</code> ist erlaubt und bewirkt das Gleiche).<br>
Folgende andere Angaben sind möglich:<br>
Mit <code>frame="void"</code> (<i>void = nichts</i>) wird überhaupt kein Tabellenrahmen angezeigt. Wenn Sie <code>border=</code> angeben, werden jedoch die Gitternetzlinien der Tabelle sichtbar angezeigt. Die Tabelle sieht dann also aus wie ein an allen Seiten offenes Gitter (das obige Beispiel benutzt diese Variante).<br>
Mit <code>frame="above"</code> (<i>above = oberhalb</i>) wird nur am oberen Rand der Tabelle eine Rahmenlinie angezeigt.<br>
Mit <code>frame="below"</code> (<i>below = unterhalb</i>) wird nur am unteren Rand der Tabelle eine Rahmenlinie angezeigt.<br>
Mit <code>frame="hsides"</code> (<i>hsides = horizontal sides = horizontale Seiten</i>) wird nur am oberen und am unteren Rand der Tabelle eine Rahmenlinie angezeigt.<br>
Mit <code>frame="vsides"</code> (<i>vsides = vertical sides = vertikale Seiten</i>) wird nur am linken und am rechten Rand der Tabelle eine Rahmenlinie angezeigt.<br>
Mit <code>frame="lhs"</code> (<i>lhs = left hand side = links</i>) wird nur am linken Rand der Tabelle eine Rahmenlinie angezeigt.<br>
Mit <code>frame="rhs"</code> (<i>rhs = right hand side = rechts</i>) wird nur am rechten Rand der Tabelle eine Rahmenlinie angezeigt.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Netscape 4.x interpretiert diese Angaben noch nicht.</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/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="regeln_gitternetz">Regeln für Gitternetzlinien</a></h2>
<p>Sie können Regeln aufstellen, welche Gitternetzlinien einer Tabelle angezeigt werden sollen und welche nicht.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/table_rules.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 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Gruppendynamik</h1>
<table border="1" rules="groups">
<thead>
<tr>
<th>Assoziation 1</th>
<th>Assoziation 2</th>
<th>Assoziation 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>betroffen:<br>4 Mio. Menschen</i></td>
<td><i>betroffen:<br>2 Mio. Menschen</i></td>
<td><i>betroffen:<br>1 Mio. Menschen</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</tbody>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Voraussetzung für all diese Angaben ist das Attribut <code>border=</code> im einleitenden <code><table></code>-Tag. Dadurch werden Gitternetzlinien angezeigt.</p>
<p>Mit <code>rules=</code> können Sie im einleitenden <code><table></code>-Tag Regeln für die Gitternetzlinien bestimmen (<i>rules = Regeln</i>).
<p>Folgende Angaben sind dabei möglich:<br>
Mit <code>rules="none"</code> (<i>none = keine</i>) werden überhaupt keine Linien gezogen, der Außenrahmen der Tabelle wird jedoch angezeigt.<br>
Mit <code>rules="rows"</code> (<i>rows = Reihen</i>) werden Linien zwischen allen Tabellenzeilen gezogen, nicht jedoch zwischen den Spalten der Tabelle.<br>
Mit <code>rules="cols"</code> (<i>cols = columns = Spalten</i>) werden Linien zwischen allen Tabellenspalten gezogen, nicht jedoch zwischen den Zeilen der Tabelle.<br>
Mit <code>rules="groups"</code> (<i>groups = Gruppen</i>) werden Linien zwischen Kopf, Körper und Fuß einer Tabelle gezogen (siehe <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="aufbau.htm#kopf_koerper_fuss"><b>Kopf, Körper und Fuß einer Tabelle definieren</b></a> - das obige Beispiel verwendet diese Angabe).<br>
Mit <code>rules="all"</code> (<i>all = alle</i>) werden Linien zwischen allen Tabellenzellen gezogen (Voreinstellung).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Netscape 4.x interpretiert diese Angaben noch nicht.</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"><a class="an" name="breiten_hoehen">Breiten- und Höhenangaben</a></h2>
<p>Sie können für die gesamte Tabelle, sowie für einzelne Spalten und Zeilen geeignete Angaben zu Breite und Höhe notieren. Dadurch schaffen Sie "Raum".</p>
<p>Breitenangaben werden durch das Attribut <code>width=</code> notiert, Höhenangaben durch das Attribut <code>height=</code> (<i>width = Breite, height = Höhe</i>). Bei allen Angaben sind absolute Zahlenangaben erlaubt, die Breite bzw. Höhe als Anzahl Pixel bestimmen, sowie prozentuale Angaben, die am Ende ein Prozentzeichen (<code>%</code>) haben.</p>
<p>Die einzige von allen Angaben, die nach der HTML-Variante "Strict" erlaubt ist, ist die Gesamtbreite der Tabelle. Andere Angaben sind als <i>deprecated</i> gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Solche Angaben sind auch mit Hilfe von CSS Stylesheets möglich. Und schließlich gibt es auch noch Angaben, die zwar von einigen Browsern interpretiert werden, aber nicht mal zum HTML-Standard in der Variante "Transitional" gehören. Die folgende Tabelle listet auf, welche Angaben möglich sind, und welchen Status die Angabe in Bezug auf HTML-Standard und Browser-Kompatibilität hat.</p>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#C0C0C0"><tr><td>
<table cellpadding="3" cellspacing="1" border="0">
<tr>
<th bgcolor="#EEEEEE" class="doc" align="left">Angabe (Notation)</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Status</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Bedeutung</th>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><table width=></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestimmt die Breite der gesamten Tabelle in Bezug auf den verfügbaren Raum im Elternelement. Das Elternelement kann das "Dokument" sein, also das <code>body</code>-Element, oder auch ein anderes Element, innerhalb dessen eine Tabelle vorkommen kann, z.B. ein <code>div</code>-Element oder eine Tabellenzelle einer äußeren Tabelle.</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><table height=></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestimmt die Höhe der gesamten Tabelle in Bezug auf das Anzeigefenster. Diese Angabe wird zwar von den Browsern schon lange unterstützt und wird in der Praxis häufig benutzt, gehörte jedoch nie zum HTML-Standard.</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><th width=></code> oder <code><td width=></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestimmt die Breite einer Tabellenzelle und damit die Breite aller Zellen der gleichen Spalte. Als <i>deprecated</i> eingestuft. Ersetzbar durch CSS-Notationen wie <code><th style="width:100px"></code>. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><th height=></code> oder <code><td height=></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">Bestimmt die Höhe einer Tabellenzelle und damit die Höhe aller Zellen der gleichen Tabellenzeile. Als <i>deprecated</i> eingestuft. Ersetzbar durch CSS-Notationen wie <code><td style="height:100px"></code>. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.</td>
</tr>
</table>
</td></tr></table>
<p>Einige Browser interpretieren darüber hinaus weitere Angaben wie <code><tr height=></code>. Solche Angaben sind allesamt nicht HTML-konform und sollten nicht mehr verwendet werden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/width_height.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>
<h1>Breit und hoch mit HTML</h1>
<table border="1" width="60%">
<tr>
<td width="50%" height="100">Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
<h1>Breit und hoch mit CSS</h1>
<table border="1" style="width:60%">
<tr>
<td style="width:50%; height:100px">Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Im Beispiel wird zweimal die gleiche Tabelle notiert - im ersten Fall kommen die HTML-Attribute <code>width=</code> und <code>height=</code> an erlaubten Stellen zum Einsatz - nach der HTML-Variante "Transitional". Die zweite Tabelle genügt dagegen benutzt entsprechende CSS-Eigenschaften zur Angabe von Breite und Höhe und genügt damit auch den Anforderungen an die HTML-Variante "Strict". Interpretiert wird die zweite Tabelle allerdings erst vom Internet Explorer ab Version 4.x und von Netscape ab Version 6.x.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Die Angaben zu Breite und Höhe sind nur wirksam, wenn der Tabellen- bzw. Zelleninhalt kleiner ist, so dass leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, werden die Angaben zu Breite und Höhe außer Kraft gesetzt. Die Tabelle bzw. Zelle (und mit ihr Spalte und Zeile) werden dann so dimensioniert, dass der gesamte Inhalt angezeigt wird. Einige Browser - z.B. Netscape bis einschließlich Version 4.x - setzen Angaben zu Breite und Höhe allerdings leider je nach Tabelleninhalt stärker außer Kraft als es nötig wäre.</p>
<p>Da die Angabe zu <code>width=</code> in einer Tabellenzelle spaltenweit gilt, brauchen Sie sie nur einmal pro Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren. Ebenso ist es mit der Angabe zu <code>height=</code> in einer Tabellenzelle. Da diese Angabe für die ganze zugehörige Tabellenzeile gilt, ist es am sinnvollsten, sie in der ersten Zelle der Zeile zu notieren. Im obigen Beispiel wird durch <code><td width="50%" height="100"></code> in der ersten Zelle also sowohl die Breite der ersten Spalte als auch die Höhe der ersten Zeile definiert.</p>
<p>Verwenden Sie Pixelangaben und Prozentangaben immer so, dass keine Konflikte entstehen. Im obigen Beispiel werden etwa alle Breiten prozentual bestimmt, und nur die Höhe wird mit Pixeln festgelegt. So kann der Browser im Beispiel für die gesamte Tabelle eine Breite von 60% Prozent zum Elternelement ermitteln und für die erste Spalte wiederum 50% davon. Die Angabe von 100 Pixeln Zeilenhöhe kommt damit nicht in Konflikt.</p>
<p>Eine übersichtlichere Lösung, die Breite von Tabellenspalten zu definieren, steht mit der Möglichkeit zur Verfügung, <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="aufbau.htm#vordefinieren"><b>Spalten vorzudefinieren</b></a>. Die hier beschriebene Möglichkeit hat dagegen den Vorteil, auch von älteren Browsern interpretiert zu werden.</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/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><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/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc11.gif" width="30" height="30" border="0" alt="Netscape 1.1"> <a class="an" name="zeilenumbruch">Zeilenumbruch in Zellen verhindern</a></h2>
<p>Sie können festlegen, dass beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen darf. Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert. Das entsprechende Attribut ist jedoch als <i>deprecated</i> eingestuft und soll künftig aus dem HTML-Standard entfallen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/nowrap.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>
<h1>Lange N&auml;chte</h1>
<table border="1">
<tr>
<td nowrap>Die langen HTML-N&auml;chte von Berlin sind die l&auml;ngsten N&auml;chte &uuml;berhaupt</td>
<td style="white-space:nowrap">Die langen CSS-N&auml;chte von Berlin sind ebenfalls die l&auml;ngsten N&auml;chte &uuml;berhaupt</td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>nowrap</code> (ohne weitere Wertzuweisung) in einem einleitenden <code><th></code>- oder <code><th></code>-Tag verhindern Sie, dass der Text innerhalb der Zelle automatisch umgebrochen wird. Die Zelle und damit ihre gesamte zugehörige Spalte wird so breit erforderlich.</p>
<p>Das obige Beispiel zeigt in der ersten Zelle, wie das HTML-Attribut <code>nowrap</code> eingesetzt wird, und in der zweiten Zelle die entsprechende Notation in CSS. Letztere ist konform zur HTML-Variante "Strict", wird jedoch erst ab Internet Explorer 4.x und Netscape 6.x interpretiert.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Wenn Sie <b>XHTML-konform</b> arbeiten, müssen Sie das <code>nowrap</code>-Attribut in der Form <code>nowrap="nowrap"</code> notieren.<br>
Weitere Informationen dazu im Kapitel <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xhtml/index.htm"><b>XHTML und HTML</b></a>.</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/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><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="ausrichtung_zellen">Ausrichtung von Zellen</a></h2>
<p>Zelleninhalte von Tabellen können aufgrund unterschiedlicher Inhalte oder duch Angaben zu Breite und Höhe mehr Raum in Anspruch nehmen, als es ihr Inhalt erfordert. Für diesen Fall können Sie Zelleninhalte sowohl horizontal (linksbündig, zentriert, rechtsbündig) als auch vertikal (obenbündig, mittig, untenbündig) am Zellenrand ausrichten. Die entsprechenden Angaben sind sowohl auf einzelne Zellen (also <code>th</code>- und <code>td</code>-Elemente) anwendbar, als auch auf Tabellenbereiche wie Tabellenzeilen (<code>tr</code>), Tabellenkopf (<code>thead</code>), Tabellenkörper (<code>thbody</code>) und Tabellenfuß (<code>tfoot</code>). In diesem Fall gelten die Angaben für alle Zellen des jeweiligen Bereichs.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/align_valign.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>
<h1>Richtungsweisend</h1>
<table border="1">
<tr>
<th width="200" height="100" align="left" valign="top">links oben</th>
<th width="200">mittig zentriert</th>
<th width="200" align="right" valign="bottom">rechts unten</th>
</tr><tr align="center" valign="top">
<td height="100">oben zentriert</td>
<td>oben zentriert</td>
<td>oben zentriert</td>
</tr><tr align="right" valign="bottom">
<td height="100">rechts unten</td>
<td>rechts unten</td>
<td>rechts unten</td>
</tr>
</table>
<h2>Auch am Dezimalzeichen?</h2>
<table border="1">
<colgroup><col><col align="char" char=","></colgroup>
<tr><th>Element</th><th>Anteil in mg</th></tr>
<tr><td>Nitrat</td><td>0,117126</td></tr>
<tr><td>Hydrogencarbonat</td><td>330,0</td></tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code>align="left"</code> können Sie eine Kopfzelle in ihrem einleitenden <code><th></code>-Tag linksbündig ausrichten, mit <code>align="right"</code> rechtsbündig. Datenzellen können Sie in ihrem einleitenden <code><td></code>-Tag mit <code>align="center"</code> zentriert ausrichten und durch <code>align="right"</code> rechtsbündig. Die Angaben <code>align="center"</code> bei Kopfzellen und <code>align="left"</code> bei Datenzellen sind natürlich auch erlaubt, bewirken aber lediglich die Voreinstellung und sind deshalb nicht nötig (<i>align = Ausrichtung, left = links, center = zentriert, right = rechts</i>). Diese Angaben können Sie auch in einleitenden <code><tr></code>-Tags, einleitenden <code><thead></code>-Tags, einleitenden <code><tbody></code>-Tags und <code><tfoot></code>-Tags notieren. Dann werden alle Zellen im entsprechenden Bereich so ausgerichtet wie angegeben. Widersprechende Angaben in einzelnen Zellen haben allerdings Vorrang vor bereichsweiten Angaben. Ab HTML 4.0 ist auch die Angabe <code>align="justify"</code> erlaubt. Dadurch erzwingen Sie einen Blocksatz innerhalb der Zelle.</p>
<p>Mit <code>valign="top"</code> können Sie eine Zelle in ihrem einleitenden Tag obenbündig ausrichten, durch die Angabe <code>valign="bottom"</code> untenbündig. Auch die Angabe <code>valign="middle"</code> ist möglich. Dies ist jedoch die Voreinstellung und deshalb nicht unbedingt nötig (<i>valign = vertical align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig</i>). Auch das <code>valign</code>-Attribut können Sie in einleitenden <code><tr></code>-Tags, einleitenden <code><thead></code>-Tags, einleitenden <code><tbody></code>-Tags und <code><tfoot></code>-Tags notieren. Ab HTML 4.0 ist auch die Angabe <code>valign="baseline"</code> erlaubt. Dann werden alle Zellen innerhalb einer Zeile, die diese Angaben erhalten, an einer gemeinsamen Basislinie ausgerichtet. Und zwar so, dass die erste Textzeile aller dieser Zellen immer auf gleicher Höhe beginnt.</p>
<p>Ferner ist seit HTML 4.0 die Angabe <code>align="char"</code> in Verbindung mit den Attributen <code>char=</code> und <code>charoff=</code> erlaubt. Mit <code>align="char"</code> können Sie erzwingen, dass die Spalteninhalte an einem Dezimalzeichen ausgerichtet werden. Außerdem benötigen Sie noch das Attribut <code>char=</code> (<i>char = character = Zeichen</i>). Diesem weisen Sie als Wert ein Zeichen zu, das Sie als Dezimalzeichen verwenden. Die Ausrichtung erfolgt dann so, dass das Dezimalzeichen immer an der gleichen Stelle steht. Neben dem Attribut <code>char=</code> zur Bestimmung des Dezimalzeichens können Sie zusätzlich noch das Attribut <code>charoff=</code> angeben (<i>charoff = character offset = Zeichenposition</i>). Damit können Sie angeben, an welcher Position das Zeichen frühestens vorkommen kann. Im obigen Beispiel wird ein Komma als Dezimalzeichen definiert. Die Werte der betreffenden - im Beispiel <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="aufbau.htm#vordefinieren"><b>vordefinierten Spalten</b></a> - werden dann so ausgerichtet, dass das Dezimalzeichen immer an der gleichen Stelle steht. Die HTML-Spezifikation gibt jedoch an, dass die Unterstützung der Dezimalzeichenausrichtung durch Browser freiwillig ist. Und tatsächlich interpretiert auch keiner der weit verbreiteten Browser diese Angaben.</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/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><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="hintergrund">Hintergrundfarben und Hintergrundbilder</a></h2>
<p>Sie können sowohl für eine gesamte Tabelle als auch für einzelne Zeilen oder Zellen eine Hintergrundfarbe definieren. Die verbreiteten Web-Browser unterstützen auch die Angabe von Hintergrundbildern mit Wallpaper-Effekt, doch diese Angaben gehörten nie zum HTML-Standard. Auch die Angaben zur Hintergrundfarbe sind als <i>deprecated</i> gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Sowohl das Definieren von Hintergrundfarben als auch das von Hintergrundbildern ist mit CSS Stylesheets möglich.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/bgcolor.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 text="#000099">
<h1>Gro&szlig;e Worte mit HTML</h1>
<table border="1" bgcolor="#FFFF00">
<tr>
<td width="200" height="100"><h2>Traum</h2></td>
<td width="200" bgcolor="#00FFFF"><h2>Zeit</h2></td>
<td width="200"><h2>Luft</h2></td>
</tr><tr bgcolor="#FF00FF">
<td height="100"><h2>Licht</h2></td>
<td><h2>Himmel</h2></td>
<td><h2>Leben</h2></td>
</tr>
</table>
<h1>Gro&szlig;e Worte mit CSS</h1>
<table border="1" style="background-color:#FFFF00">
<tr>
<td width="200" height="100"><h2>Traum</h2></td>
<td width="200" style="background-color:#00FFFF"><h2>Zeit</h2></td>
<td width="200"><h2>Luft</h2></td>
</tr><tr style="background-color:#FF00FF">
<td height="100"><h2>Licht</h2></td>
<td><h2>Himmel</h2></td>
<td style="background-image:url(background.jpg)"><h2>Leben</h2></td>
</tr>
</table>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Durch das Attribut <code>bgcolor=</code> im einleitenden Tag der Tabelle können
Sie eine Hintergrundfarbe für die gesamte Tabelle bestimmen (<i>bgcolor =
background color = Hintergrundfarbe</i>). Beim Angeben der Farbe gelten die Regeln
zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/farben.htm"><b>Definieren
von Farben in HTML</b></a>. Ebenso können Sie das Attribut <code>bgcolor=</code>
im einleitenden Tag einer Tabellenzeile (<<code>tr</code>>) notieren, um
die Hintergrundfarbe für alle Zellen in dieser Zeile zu bestimmen. Wenn Sie
<code>bgcolor=</code> im einleitenden Tag einer Datenzelle (<code><td></code>)
oder einer Kopfzelle (<code><th></code>) angeben, gilt die Hintergrundfarbe
für diese eine Zelle. Im Konfliktfall hat die Farbangabe in einzelnen Zellen
Vorrang vor der Angabe für ganze Zeilen oder Tabellen. Die Angabe für
eine Zeile hat im Konfliktfall Vorrang vor der Angabe für die ganze Tabelle.</p>
<p>Das Gleiche ist mit dem Attribut <code>background=</code> möglich, um eine Hintergrundgrafik für die Tabelle oder einzelne Zellen einzubinden. Dieses Attribut ist jedoch im Zusammenhang mit Tabellen nicht HTML-konform und kommt im obigen Beispiel auch nicht vor. Die zweite im Beispiel notierte Tabelle zeigt, wie es HTML-konform gemacht wird. Dagegen spricht eigentlich nur noch die Existenz von Netscape 4.x, der keine CSS-Angaben bei Tabellen interpretiert.<br>
Im obigen Beispiel wird angenommen, dass sich die Grafik <code>background.jpg</code> im gleichen Verzeichnis befindet. Sie können jedoch auch Grafiken aus anderen Verzeichnissen (z.B. <code>/daten/grafik/hintergrund/background.gif</code> oder <code>../gif/back.gif</code>) oder von entfernten URIs (z.B. <code>http://www.mein-anderer-server.de/grafik/back.jpg</code>) angeben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Wenn Sie eine Hintergrundfarbe definieren oder eine Hintergrundgrafik einbinden, sollten Sie für den Text eine geeignete Kontrastfarbe definieren.</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/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"> <a class="an" name="farbrahmen">Farben für Rand und Gitternetzlinien (Microsoft)</a></h2>
<p>Sie können auch für Rahmen und Gitternetzlinien Farbangaben machen. Diese Angaben werden bislang jedoch nur vom MS Internet Explorer interpretiert und gehören nicht zum HTML-Standard. Benutzen Sie stattdessen <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#gestalten_css"><b>CSS zur Gestaltung</b></a> der Rahmen.</p>
<p>Durch das Attribut <code>bordercolor=</code> im einleitenden <code><table></code>-Tag der Tabelle können Sie eine einheitliche Farbe für den Tabellenrahmen und die Gitternetzlinien bestimmen (<i>bordercolor = Randfarbe</i>).</p>
<p>Anstelle der einfachen Rahmenfarbe können Sie auch einen Schattier-Effekt in den Rahmen bringen, indem Sie zwei verschiedene Farben definieren - eine dunklere und eine hellere. Dazu notieren Sie im einleitenden Tag der Tabelle die beiden Attribute <code>bordercolordark=</code> (<i>bordercolordark = dunkle Randfarbe</i>) und <code>bordercolorlight=</code> (<i>bordercolorlight = helle Randfarbe</i>).</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/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="gestalten_css">Tabellen mit CSS gestalten</a></h2>
<p>Gerade bei Tabellen sind <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a> eine große Hilfe zur Gestaltung. Denn mit CSS können Sie alle Elemente einer Tabelle nach Wunsch formatieren - sei es einzeln oder gruppenweise. Dazu kommen ausgereifte CSS-Eigenschaften für Tabellenrahmen. 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 folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/tabellen.htm"><b>Tabellenformatierung</b></a><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>
<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"><a class="an" name="weitere">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie Angaben darüber, welche der hier beschriebenen Attribute wo genau vorkommen können:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#table"><b>Attribut-Referenz</b></a> für Tabellen (<code><table>...</table></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#tr"><b>Attribut-Referenz</b></a> für Tabellenzeilen (<code><tr>...</tr></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#th"><b>Attribut-Referenz</b></a> für Kopfzellen (<code><th>...</th></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#td"><b>Attribut-Referenz</b></a> für Datenzellen (<code><td>...</td></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#thead"><b>Attribut-Referenz</b></a> für Tabellenkopf (<code><thead>...</thead></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#tbody"><b>Attribut-Referenz</b></a> für Tabellenkörper (<code><tbody>...</tbody></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#tfoot"><b>Attribut-Referenz</b></a> für Tabellenfuß (<code><tfoot>...</tfoot></code>)</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="zellen_verbinden.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="zellen_verbinden.htm"><b>Zellen verbinden</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="aufbau.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="aufbau.htm"><b>Aufbau einer Tabelle</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>
|
