decocode decocode deco    

Tabellen und Listen #

Übersicht
Zellzwischenraum – border-collapse
Zellabstand – border-spacing
Tabellenlayout – table-layout
Vertikale Ausrichtung – vertical-align
Leere Zellen – empty-cells
Tabellen ausrichten

Listentyp – list-style-type
Position des Listenzeichens – list-style-position
Grafik für Listenzeichen – list-style-image
Listenstile – list-style

Auf dieser Seite werden die CSS-Eigenschaften vorgestellt, mit denen Tabellen und ihre Zellen formatiert werden können. Der Abstand zwischen den Zellen sowie die automatische Ausdehnung von Zellen ihrem Inhalt entsprechend kann eingestellt werden. Außerdem kann die Position des Zelleninhalts und die Darstellung leerer Zellen festgelegt werden.

Weiterhin werden Eigenschaften beschrieben, mit denen Listen formatiert werden können. Dies bezieht sich insbesondere auf die Darstellung von Listenzeichen bzw. Nummerierungen.

Zellzwischenraum – border-collapse #

W3C Standard

Über die Eigenschaft border-collapse lässt sich einstellen, ob die Zellen einer Tabelle sich berühren sollen oder durch einen Abstand von einander getrennt sind. Die Eigenschaft erwartet einen der folgenden Werte:

separate – mit Abstand
collapse – ohne Abstand

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table style='border-collapse:separate;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

<table style='border-collapse:collapse;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

   
   
   
   

Zellabstand – border-spacing #

W3C Standard

Über die Eigenschaft border-spacing lässt sich der horizontale und vertikale Abstand zwischen den Zellen einer Tabelle einstellen. Dies setzt voraus, dass der Tabelle nicht die Eigenschaft border-collapse:collapse; zugewiesen wurde. Es können Werte in den gewohnten Einheiten wie px oder em verwendet werden. Wird ein einzelner Wert angegeben, so gilt dieser horzontal und vertikal. Werden zwei Werte angegeben, so gilt der erste Wert für den horizontalen Abstand und der zweite für den vertikalen.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table style='border-spacing:2px;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

<table style='border-spacing:0 5px;'>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;'>&nbsp;</td>
    <td style='border:1px solid #fff;'>&nbsp;</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

   
   
   
   

Tabellenlayout – table-layout #

W3C Standard

Über die Eigenschaft table-layout lässt sich festlegen, wie flexibel die Breite einer Tabelle vom Browser gewählt wird. Lautet der Wert dieser Eigenschaft auto, so wird eine festgelegte Breite der Tabelle nur solange respektiert, wie die Breite zur Darstellung der Inhalte ausreicht. Benötigt der Inhalt mehr Platz, so wird die Tabelle breiter. Bei dem Wert fixed wird die festgelegte Breite der Tabelle eingehalten, so dass Inhalte, die mehr Platz benötigen, über ihre Zellen herausragen (es sei denn, ein anderes Verhalten ist mit der Eigenschaft overflow festgelegt.).

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table style='table-layout:auto;width:150px;'>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
</table>

<table style='table-layout:fixed;width:150px;'>
  <tr>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
  <tr>
    <td style='white-space:nowrap;overflow:hidden;border:1px solid #fff;'>Ich bin eine Zelle</td>
    <td style='white-space:nowrap;border:1px solid #fff;'>Ich bin eine Zelle</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Ich bin eine Zelle Ich bin eine Zelle
Ich bin eine Zelle Ich bin eine Zelle
Ich bin eine Zelle Ich bin eine Zelle
Ich bin eine Zelle Ich bin eine Zelle

Vertikale Ausrichtung – vertical-align #

W3C Standard

Über die Eigenschaft vertical-align lässt sich die vertikale Position eines Zelleninhalts festlegen. Mögliche Werte sind:

baseline – Grundlinie
top – oben
middle – Mitte
bottom – unten

In der Praxis findet baseline aber kaum Anwendung, da es in den meisten Fällen den gleichen Effekt wie top hat. Wird kein Wert angegeben, so positionieren die meisten Browser den Inhalt in die vertikale Mitte.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
<table>
  <tr>
    <td style='vertical-align:baseline;'>Ich bin eine Zelle</td>
    <td style='vertical-align:top;'>Ich bin eine Zelle</td>
    <td style='vertical-align:middle;'>Ich bin eine Zelle</td>
    <td style='vertical-align:bottom;'>Ich bin eine Zelle</td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

Ich bin eine Zelle Ich bin eine Zelle Ich bin eine Zelle Ich bin eine Zelle

Leere Zellen – empty-cells #

W3C Standard

Über die Eigenschaft empty-cells lässt einstellen, ob Rahmen und Hintergrund der leeren Zellen einer Tabelle angezeigt werden. Eine Zelle ist dann leer, wenn sie entweder keinen Inhalt oder nur normale Leerzeichen enthält. Ein geschütztes Leerzeichen (&nbsp;) gilt als Inhalt. Diese Eigenschaft lässt sich nur verwenden, wenn die Tabelle ebenfalls die Eigenschaft border-collapse:separate; besitzt. Mögliche Werte sind:

show – Rahmen und Hintergrund anzeigen
hide – Rahmen und Hintergrund nicht anzeigen

Hier ein paar Beispiele:

Quelltext auswählen
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
<table style='border-collapse:collapse;empty-cells:show;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>   </td>
    <td style='border:1px solid #fff;background-color:#333;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>X</td>
    <td style='border:1px solid #fff;background-color:#333;'></td>
  </tr>
</table>

<table style='border-collapse:separate;empty-cells:show;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>   </td>
    <td style='border:1px solid #fff;background-color:#555;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>X</td>
    <td style='border:1px solid #fff;background-color:#555;'></td>
  </tr>
</table>

<table style='border-collapse:collapse;empty-cells:hide;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>   </td>
    <td style='border:1px solid #fff;background-color:#333;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#333;'>X</td>
    <td style='border:1px solid #fff;background-color:#333;'></td>
  </tr>
</table>

<table style='border-collapse:separate;empty-cells:hide;'>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>   </td>
    <td style='border:1px solid #fff;background-color:#555;'>&nbsp;</td>
  </tr>
  <tr>
    <td style='border:1px solid #fff;background-color:#555;'>X</td>
    <td style='border:1px solid #fff;background-color:#555;'></td>
  </tr>
</table>

Dieser Code führt zu folgender Darstellung:

 
X
 
X
 
X
 
X

Tabellen ausrichten #

Tabellen werden üblicherweise an der linken Seite des Eltern-Elements ausgerichtet. Möchte man eine Tabelle mittig oder rechts ausrichten, so weist man ihr die Eigenschaft margin:auto; bzw. margin-left:auto; zu. Der Internet Explorer interpretiert diese Eigenschaft in diesem konkreten Fall bis Version 7 nicht, weshalb man die Tabelle zusätzlich in einen <div>-Container packen muss, dem dann die Eigenschaft text-align:center; bzw. text-align:right; zugewiesen wird. Um die Tabelle für alle Browser einschließlich MSIE ≤ 7 auszurichten, muss man beide Varianten kombinieren.

Beispiel:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table style='margin:auto;'>
  <tr><td style='border:1px solid #fff;'>Standard mitte</td><td style='border:1px solid #fff;'>abc</td></tr>
  <tr><td style='border:1px solid #fff;'>abc</td><td style='border:1px solid #fff;'>abc</td></tr>
</table>

<div style='text-align:center;'>
  <table>
    <tr><td style='border:1px solid #fff;'>MSIE ≤ 7 mitte</td><td style='border:1px solid #fff;'>abc</td></tr>
    <tr><td style='border:1px solid #fff;'>abc</td><td style='border:1px solid #fff;'>abc</td></tr>
  </table>
</div>

<table style='margin-left:auto;'>
  <tr><td style='border:1px solid #fff;'>Standard rechts</td><td style='border:1px solid #fff;'>abc</td></tr>
  <tr><td style='border:1px solid #fff;'>abc</td><td style='border:1px solid #fff;'>abc</td></tr>
</table>

<div style='text-align:right;'>
  <table>
    <tr><td style='border:1px solid #fff;'>MSIE ≤ 7 rechts</td><td style='border:1px solid #fff;'>abc</td></tr>
    <tr><td style='border:1px solid #fff;'>abc</td><td style='border:1px solid #fff;'>abc</td></tr>
  </table>
</div>

Dieser Code führt zu folgender Darstellung. Das Beispiel zeigt außerdem, dass die horizontale Textausrichtung des <div>-Containers durch text-align:center; bzw. text-align:right; an die Zellen der Tabelle vererbt wird:

Standard mitteabc
abcabc
MSIE ≤ 7 mitteabc
abcabc
Standard rechtsabc
abcabc
MSIE ≤ 7 rechtsabc
abcabc

Listentyp – list-style-type #

W3C Standard

Mit der Eigenschaft list-style-type lässt sich einstellen, welche Art von Listenzeichen den einzelnen Elementen einer Liste vorangestellt wird. Folgende Typen sind möglich:

none – kein Listenzeichen
disc – Scheibe
circle – Kreis
square – Quadrat
decimal – Zahl
decimal-leading-zero – Zahl mit führender Null
lower-roman – kleine römische Zahlen
upper-roman – große römische Zahlen
lower-latin, lower-alpha – kleine lateinische Buchstaben
upper-latin, upper-alpha – große lateinische Buchstaben
lower-greek – kleine griechische Buchstaben
armenian – armenische Zeichen
georgian – georgische Zeichen

Die Werte disc, circle und square sollten nur für unsortierte Listen (<ul>) und die übrigen Werte nur für sortierte Listen (<ol>) verwendet werden.

Beispiel:

Quelltext auswählen
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
<ul style='list-style-type:none;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:disc;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:circle;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ul style='list-style-type:square;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ul>

<ol style='list-style-type:decimal;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:decimal-leading-zero;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-roman;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-roman;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-latin;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-latin;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-alpha;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:upper-alpha;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:lower-greek;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:armenian;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

<ol style='list-style-type:georgian;'>
  <li>Hund</li>
  <li>Katze</li>
  <li>Maus</li>
</ol>

Dieser Code führt zu folgender Darstellung:

  • Hund
  • Katze
  • Maus
  • Hund
  • Katze
  • Maus
  • Hund
  • Katze
  • Maus
  • Hund
  • Katze
  • Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus
  1. Hund
  2. Katze
  3. Maus

Position des Listenzeichens – list-style-position #

W3C Standard

Mit der Eigenschaft list-style-position lässt sich einstellen, ob ein Listenzeichen bzw. eine Nummerierung ausgerückt oder bündig mit der Seitenkante des Textflusses dargestellt wird. Folgende Werte sind möglich:

outside – Listenzeichen ausgerückt
inside – Listenzeichen bündig

Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
<ul style='list-style-position:outside;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

<ul style='list-style-position:inside;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

Dieser Code führt zu folgender Darstellung:

  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Grafik für Listenzeichen – list-style-image #

W3C Standard

Mit der Eigenschaft list-style-image lässt sich einstellen, dass statt eines generischen Listenzeichens eine benutzerdefinierte Grafik verwendet werden soll. Außer none (keine Grafik) kann als Wert ein Pfad zur Grafikdatei angegeben werden. Zusätzlich sollte man die Eigenschaft list-style-type zuweisen, die dann wirksam wird, wenn der Browser die Grafik nicht findet oder unterstützt.

Beispiele:

Quelltext auswählen
1
2
3
4
<ul style='list-style-image:url("img/bullet.png");list-style-type:square;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

Dieser Code führt zu folgender Darstellung:

  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Listenstil – list-style #

W3C Standard

Mit der Eigenschaft list-style können die drei Eigenschaften list-style-type, list-style-position sowie list-style-image (oder einzelne davon) zusammengefasst notiert werden.

Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
<ul style='list-style:square url("img/bullet.png");'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>

<ol style='list-style:inside decimal;'>
  <li>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
  <li>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ol>

Dieser Code führt zu folgender Darstellung:

  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  1. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  2. Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.