Tabellen

Als mögliche Werte der Eigenschaft display habe ich Ihnen unter anderem table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell und table-caption vorgestellt. Die einzelnen Werte lassen sich wie folgt den XHTML-Tabellen-Elementen zuordnen:

table    { display: table              }
tr       { display: table-row          }
thead    { display: table-header-group }
tbody    { display: table-row-group    }
tfoot    { display: table-footer-group }
col      { display: table-column       }
colgroup { display: table-column-group }
td, th   { display: table-cell         }
caption  { display: table-caption      }

Tabellen verhalten sich im CSS-Box-Modell entweder wie Block- oder wie Inline-Elemente. In beiden Fällen kreieren sie eine anonyme Box, die zum einen die Table-Box und zum anderen die Caption-Box enthält, falls ein Element caption, also eine Tabellenüberschrift, angegeben wurde. Beide Boxen haben Content-, Padding-, Border- und Margin-Bereiche.

caption-side

Mit der Eigenschaft caption-side bestimmen Sie die Position der Caption-Box im Verhältnis zur Table-Box.

top: Die Beschriftung steht über der Tabelle.
bottom: Die Beschriftung steht unter der Tabelle.
left: Die Beschriftung steht links von der Tabelle.
right: Die Beschriftung steht rechts von der Tabelle.
inherit

Das folgende einfache Beispiel demonstriert, wie die Eigenschaft caption-side angewendet werden kann.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Eigenschaft 'caption-side'</title>
<style type="text/css">
table {
   caption-side: bottom;
   border: 1px solid black;
}
</style>
</head>

<body>

<table>
<caption>Beschriftung</caption>
<tr>
<td>Test</td><td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td><td>Test</td>
</tr>
</table>

</body>
</html>

Beispieldokument ansehen

table-layout

Mit der Eigenschaft table-layout beeinflussen Sie die Darstellung von Zelleninhalten bei Breitenangaben.

auto: Der Inhalt der Tabellenzellen hat Vorrang vor Breitenangaben.
fixed: Breitenangaben haben Vorrang vor dem Inhalt der Tabellenzellen.
inherit

Folgendes Beispiel stellt beide Werte gegenüber:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Gegenüberstellung 'table-layout'</title>
<style type="text/css">
td {
   border: 1px solid black;
   width: 150px;
}
</style>
</head>

<body>

<table style="table-layout: auto">
<caption>Tabelle mit 'table-layout: auto'</caption>
<tr>
<td>Loremipsumdolorsitametconsectetueradipiscing</td>
<td>elitseddiamnonummynibheuismodtinciduntutlaoreet</td>
</tr>
</table>

<table style="table-layout: fixed">
<caption>Tabelle mit 'table-layout: fixed'</caption>
<tr>
<td>Loremipsumdolorsitametconsectetueradipiscing</td>
<td>elitseddiamnonummynibheuismodtinciduntutlaoreet</td>
</tr>
</table>

</body>
</html>

Beispieldokument ansehen

border-collapse

CSS unterscheidet zwei Rahmen-Modelle. Mit der Eigenschaft border-collapse geben Sie an, welches Rahmen-Modell dargestellt werden soll.

separate: Die Tabelle an sich, sowie jede einzelne Zelle hat ihren eigenen, separaten Border-Bereich.
collapse: Die Border-Bereiche werden zusammengelegt.
inherit

Folgendes Beispiel stellt beide Werte gegenüber:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Gegenüberstellung 'border-collapse'</title>
<style type="text/css">
table {
   margin: 1em;
   border: 4px solid black;
}
td {
   border: 1px solid black;
}
</style>
</head>

<body>

<table style="border-collapse: separate">
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
</table>

<table style="border-collapse: collapse">
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
</table>

</body>
</html>

Beispieldokument ansehen

border-spacing

Für das separierte Rahmen-Modell können Sie mit der Eigenschaft border-spacing einen Abstand der Zellen zueinander bestimmen.

<Länge> <Länge>?: Geben Sie nur eine Länge an, bestimmen Sie den Abstand zu allen vier Seiten, geben Sie zwei Längen an, bestimmt die erste den horizontalen und die zweite den vertikalen Abstand.
inherit

Der Initialwert ist 0.

Auch hier ein kleines Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Eigenschaft 'border-spacing'</title>
<style type="text/css">
table {
   border-spacing: 20px 10px;
   border: 8px outset;
}
td {
   border: 6px inset;
   padding: 2px 15px;
}
</style>
</head>

<body>

<table>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td></tr>
</table>

</body>
</html>

Beispieldokument ansehen

empty-cells

Mit der Eigenschaft empty-cells bestimmen Sie, ob leere Zellen im separierten Rahmen-Modell angezeigt werden sollen oder nicht.

hide: Leere Zellen werden nicht angezeigt.
show: Leere Zellen werden angezeigt.
inherit

Das folgende Beispiel stellt die beiden Werte hide und show gegenüber, jedoch werden Sie nur in wenigen aktuellen Browsern einen Unterschied sehen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Gegenüberstellung 'empty-cells'</title>
<style type="text/css">
table {
   border: 1px solid red;
   margin: 1em;
}
td {
   border: 1px solid green;
   width: 20px;
   height: 20px;
}
</style>
</head>

<body>

<table style="empty-cells: hide">
<tr><td>Test</td><td></td><td></td><td></td></tr>
<tr><td>Test</td><td>Test</td><td></td><td></td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td></td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
</table>

<table style="empty-cells: show">
<tr><td>Test</td><td></td><td></td><td></td></tr>
<tr><td>Test</td><td>Test</td><td></td><td></td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td></td></tr>
<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
</table>

</body>
</html>

Beispieldokument ansehen

Generierter Content
User Interface
Zum Seitenanfang

Eine Einführung in XHTML, CSS und Webdesign, Version 2.5.01
Michael Jendryschik - Letzte Änderung: 02. Juni 2004 - Offline-Version: 30. Oktober 2004
Aktuelle Version dieses Dokuments im Web: http://jendryschik.de/wsdev/einfuehrung/css/tabellen