Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS
Artikelserie - Tabellen im Web
Dieser Artikel ist Teil einer Artikelserie rund um die Verwendungen von Tabellen im Webdesign. Insgesamt beinhaltet die Serie folgende Artikel:
4.2 Gestaltung mittels CSS
Anzeige Hier werben
Wie weiter oben schon erwähnt, ist der heutige Stand der Technik, dass Struktur bzw. Datum und Gestaltung voneinander getrennt behandelt werden sollten und können. Weiter oben haben wir beschrieben, wie sich eine Tabellenstruktur in (X)HTML aufbauen und rudimentär gestalten lässt.
Geht es nun darum, gezielt in das Erscheinungsbild einer Tabelle einzugreifen, spielt CSS seine Stärken aus. Seit CSS der Version 2 sind im Standard vielfältige Funktionen zur visuellen Anpassung von Tabellen vorgesehen, die größtenteils auch bereits in den aktuellen Versionen der gängigen Browser implementiert wurden.
Wir empfehlen, prägnante Bereiche einer Tabelle im Vorfeld mit CSS-Klassen zu belegen, d.h. die erste und letzte Zeile einer Tabelle, die einzelnen Spalten und u.U. auch wichtige Zellen erhalten dabei eine eigene CSS-Klasse.
Es hat sich gezeigt, dass sich diese Vorarbeit durchaus lohnt, da man im späteren Gestaltungsablauf nur noch die CSS-Definitionen anpassen muss und man ohne ein weiteres Anfassen des (X)HTML-Quelltextes die komplette Tabellenformatierung in der Hand hat. Ob eine im (X)HTML verwendete Klasse später auch tatsächlich im CSS definiert wird oder nicht, bleibt dabei gleich.
Unter http://icant.co.uk/csstablegallery/ ist ein ständig wachsender Pool an Tabellendesigns zu finden. Auch wenn der eigentliche Tabelleninhalt hier leider sehr oft in den Hintergrund tritt, werden die Möglichkeiten der Tabellengestaltung mittels CSS sehr anschaulich demonstriert.
Beispiel
Nachfolgend ein Beispiel für eine, unter anderem mit den unten erläuterten Attributen, formatierte Tabelle
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 | <!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" lang="de">
<head>
<!-- Text und Quelltext © Thomas Hochgürtel, Simon Schories -->
<title>Tabellen im Web</title>
<!-- Meta-information -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="author" content="Simon Schories, Thomas Hochgürtel"/>
<!-- Stylesheets -->
<style type="text/css">
<!--
body {
margin: 2em 1em 3em 1em;
}
#page {
width: 600px;
margin: auto auto auto auto;
color: #222;
font-family: "Helvetica", "Arial", "Lucida", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 80%;
line-height: 160%;
}
#page .left {
width: 700px;
}
#page p {
margin: 0 0 1em 0;
/* text-indent: 1em; */
}
#page p:first-child {
text-indent: 0;
}
#page h1 a,
#page h1 a:hover,
#page h2 a,
#page h2 a:hover,
#page h3 a,
#page h3 a:hover,
#page h4 a,
#page h4 a:hover {
color: #222;
}
#page h1 {
padding: 8px 0 0 0;
border: 0 solid #ccc;
border-width: 1px 0 0 0;
margin: 0 0 1em 0;
font-size: 170%;
font-weight: bold;
}
#page h2 {
padding: 0;
margin: 0;
font-size: 100%;
}
#page h3 {
border: 0 solid #ccc;
border-width: 0;
margin: 2.5em 0 0.5em 0;
font-size: 135%;
}
#page h4 {
clear: left;
font-size: 135%;
margin: 1.5em 0 0.5em 0;
font-weight: bold;
}
#page a {
color: #319fcd;
text-decoration: none;
}
#page a:hover {
color: #003d5c;
color: #222;
}
#page a.ext {
padding: 0 0 0 16px;
background-image: url("../images/link.gif");
background-repeat: no-repeat;
background-position: left center;
}
#page a.ext:hover {
background-image: url("../images/link-a.gif");
}
#page a img {
border: none;
}
#page pre,
#page code,
#page samp {
color: #777;
font-family: "Monaco", "Courier", serif;
}
#page samp {
display: block;
padding: 8px 16px;
border: 1px solid #ccc;
margin: 0.5em 0 1em 0;
}
#page dfn {
margin: 2em 0 2.5em 0;
}
#page blockquote {
margin: 0;
}
.imgzoom img {
border: 1px solid #ccc;
}
.imgzoom a.close {
display: none !important;
font-family: "Georgia", "Palatino", serif;
font-size: 100%;
}
.simon {
float: left;
padding: 32px;
margin: 2em 0 4em 0;
border: 1px solid #ccc;
}
.simon table.table_example_1 {
border-collapse: collapse;
border: 2px solid #aaa;
border-width: 2px 0;
empty-cells: hide;
}
.simon table.table_example_1 caption {
text-align: left;
margin: 0 0 0.75em 0.75em;
font-family: "Georgia", "Palatino", serif;
font-size: 100%;
font-style: italic;
letter-spacing: 0.05em;
}
.simon table.table_example_1 tr td,
.simon table.table_example_1 tr th {
vertical-align: baseline;
border: 0 solid #aaa;
padding: 0.75em;
line-height: 120%;
}
.simon table.table_example_1 thead tr th {
border-width: 0 1px;
text-align: left;
}
.simon table.table_example_1 tbody tr.first-row td {
border-top-width: 1px;
}
.simon table.table_example_1 thead tr th.last-col {
border-width: 0 0 0 1px;
}
.simon table.table_example_1 thead tr th.last-row {
vertical-align: bottom;
}
.simon table.table_example_1 thead tr th.first-col {
border-width: 0 1px 0 0;
}
.simon table.table_example_1 tbody tr td {
padding: 0.5em 0.75em;
border-width: 0 0 1px 0;
}
.simon table.table_example_2 {
border-width: 2px 0 0 0;
border-color: #a5ceeb;
}
.simon table.table_example_2 thead tr th,
.simon table.table_example_1 thead tr th.last-col,
.simon table.table_example_2 thead tr th.first-col {
border-width: 0 0 1px 0;
}
.simon table.table_example_2 thead th.last-col {
border-width: 0;
}
.simon table.table_example_2 thead tr th.first-row {
padding-bottom: 0.45em;
}
.simon table.table_example_2 thead tr th.last-row {
vertical-align: top;
}
.simon table.table_example_2 thead th {
border-color: #a5ceeb;
font-weight: normal;
}
.simon table.table_example_2 tbody td {
border-color: #a5ceeb;
background-color: #e5f2ff;
border-width: 0 1px 0 0;
font-family: "Georgia", "Palatino", serif;
letter-spacing: 0.03em;
}
.simon table.table_example_2 tbody td.row-group-end {
border-width: 0 0 2px 0;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="explanation">
<h4>Beispiel</h4>
<p>Nachfolgend ein Beispiel für eine, unter anderem mit den erläuterten Attributen, formatierte Tabelle</p>
<!-- Beispiel-Tabelle -->
<div class="simon">
<table cellspacing="0" cellpadding="0" class="table_example_1 table_example_2">
<!-- Titel -->
<caption>Technische Daten für die Hausanschlusskästen</caption>
<!-- Kopf -->
<thead>
<tr class="first-row">
<th class="first-row first-col" colspan="3">Listennummer</th>
<th class="first-row" rowspan="2">Nenn-<br/>strom</th>
<th class="first-row" rowspan="2">Polzahl</th>
<th class="first-row" colspan="2">Anschluss bis mm²</th>
<th class="first-row last-col" rowspan="2">Pg für<br/>Ausgang<br/>oben</th>
</tr>
<tr class="last-row">
<th class="first-col">mit<br/>Bügel-<br/>klemme</th>
<th>mit<br/>Mantel-<br/>klemme</th>
<th>mit<br/>Block-<br/>klemme</th>
<th class="last-row">unten</th>
<th class="last-row">oben</th>
</tr>
</thead>
<!-- Fuß -->
<tbody>
<tr class="first-row">
<td class="first-col">406</td>
<td>416</td>
<td>426</td>
<td class="row-group-end" rowspan="2">25 A</td>
<td class="row-group-end" rowspan="2">3+Mp</td>
<td class="row-group-end" rowspan="2">4X16</td>
<td class="row-group-end" rowspan="2">4X16</td>
<td class="last-col">Pg 21</td>
</tr>
<tr>
<td class="first-col row-group-end">407</td>
<td class="row-group-end">417</td>
<td class="row-group-end">427</td>
<td class="last-col row-group-end">Pg 29</td>
</tr>
<tr>
<td class="first-col">408</td>
<td>418</td>
<td>428</td>
<td class="row-group-end" rowspan="2">60 A</td>
<td class="row-group-end" rowspan="2">3+Mp</td>
<td class="row-group-end" rowspan="2">4X35</td>
<td class="row-group-end" rowspan="2">4X16</td>
<td class="last-col">Pg 29</td>
</tr>
<tr>
<td class="first-col row-group-end">409</td>
<td class="row-group-end">419</td>
<td class="row-group-end">429</td>
<td class="last-col row-group-end">Pg 36</td>
</tr>
<tr>
<td class="first-col">456</td>
<td>466</td>
<td>476</td>
<td class="row-group-end" rowspan="2">90 A</td>
<td class="row-group-end" rowspan="2">3+Mp</td>
<td class="row-group-end" rowspan="2">4X70</td>
<td class="row-group-end" rowspan="2">4X70</td>
<td class="last-col">Pg 36</td>
</tr>
<tr class="last">
<td class="first-col row-group-end">457</td>
<td class="row-group-end">477</td>
<td class="row-group-end">477</td>
<td class="last-col row-group-end">Pg 42</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
|
Ausrichtung der Tabellenüberschrift
Die Darstellung der mit Hilfe des <caption>-Tags definierten Überschrift einer Tabelle lässt sich mit dem CSS-Befehl caption-side beeinflussen.
| Attribut | Beschreibung |
|---|---|
caption-side: top; |
Positioniert den Titel oberhalb der Tabelle |
caption-side: bottom; |
Positioniert den Titel unterhalb der Tabelle |
Da die beiden führenden Browser (IE und Firefox) die margin- und padding-Angaben für das Caption-Element unterschiedlich interpretieren, sollte man sich bei der Formatierung der Überschrift auf font- und text-Eigenschaften beschränken.
Nähere Informationen über die unterschiedliche Interpretation der margin- und padding-Angaben werden von Klaus Langenberg unter http://www.thestyleworks.de/basics/tables.shtml#captions erläutert.
Fixe oder variable Tabellenbreite
Wie
bereits festgehalten ist für die Tabellenbreite standardmäßig
letztendlich die Breite des gesamten Zelleninhaltes ausschlaggebend.
Dank CSS und dem Befehl table-layout kann man dieses Problem jedoch beheben.
| Attribut | Beschreibung |
|---|---|
table-layout: auto; |
Entspricht der Standardeinstellung, bei der die Breite des Zelleninhaltes Vorrang vor Breitenangaben der Tabelle hat |
table-layout: fixed; |
Kehrt diese Abhängigkeit um und bewertet die Breitenangabe von Zellen,
Spalten oder der gesamten Tabelle höher. Wie in diesem Fall mit einem
eventuell zu breiten Zelleninhalt umgegangen wird, ist über den Befehlt
overflow steuerbar. |
Das Rahmenmodell
Es existieren zwei Darstellungsmethoden für Rahmen von Tabellen im Web. Verantwortlich dafür ist, dass sich Style-Angaben zu Rahmen komplexer ineinander verschachtelter Tabellenstrukturen (Zelle in Spalte in Gruppe in Bereich in Tabelle) in ungünstigen Konstellationen gegenseitig beeinflussen.
Aus diesem Grund wurden die zwei grundlegenden Zeichenmethoden definiert:
| Attribut | Beschreibung |
|---|---|
border-collapse: collapse; |
Definiert, dass alle Rahmen zusammenfallen und angrenzende Zellenrahmen als eine Linie gezeichnet werden (Standardwert) |
border-collapse: separate; |
Rahmen von angrenzen Zellen werden separat gezeichnet |
Bei zusammenfallenden Rahmen gibt es eine eindeutig definierte Hierarchie, welcher der Zellenrahmen bei unterschiedlicher Anmutung Vorrang hat.
Soll eine Zelle explizit Vorrang erhalten, so ist für sie die CSS-Eigenschaft border-style: hidden zu definieren. Die explizit nachrangige Zelle erhält den Style border-style: none
zugewiesen. Fehlt die Angabe zum expliziten Vorrang, so entscheidet die
definierte Breite des Rahmens border-width das Rennen – der breitere
Rahmen verdeckt den schmäleren. Sind beide Breitenangaben gleich, so
wird anhand des border-style entschieden. Die Hierarchie hierfür lautet
wie folgt: double vor solid vor dashed vor dotted vor ridge vor outset vor groove vor inset.
An einigen Stellen wird empfohlen, sich für mehr Freiheit bei der Tabellengestaltung auf das Rahmenmodell mit separaten Rahmen zu konzentrieren. Mit ihm lässt sich das Erscheinungsbild der zusammenfallenden Rahmen im Zweifelsfall ohne weiteres nachbilden.
Rahmenabstand
Der innere Rahmenabstand einer Tabelle zu den Zellen lässt sich mit Hilfe von border-spacing für ein <table>-Element definieren. Leider wird diese CSS-Eigenschaft vom weit verbreiteten IE7 noch nicht unterstützt.
Anzeige leerer Zellen
Wie bei der Darstellung von leeren Zellen bei sichtbaren Rahmen verfahren werden soll, definiert die CSS-Eigenschaft empty-cells.
| Attribut | Beschreibung |
|---|---|
empty-cells: show; |
Zeigt die Zellenrahmen an |
empty-cells: hide; |
Verbirgt die komplette Zelle inklusive Rahmen, wenn kein Zellinhalt definiert ist |
Auch diese CSS-Eigenschaft wird vom IE7 derzeit nicht unterstützt. Leere Zellen sollten generell durch <td> </td> oder <td> </td> definiert werden.
Form der Sprachausgabeunterstützung
Mit Hilfe der Angabe speak-header
kann per CSS für die Kopfzellen definiert werden, wie bei der Ausgabe
der Tabelle auf einem nicht visuellen Ausgabegerät verfahren werden
soll.
Screenreader für Menschen mit eingeschränkter Sehkraft interpretieren die Angabe und unterscheiden dabei zwischen
| Attribut | Beschreibung |
|---|---|
speak-header: always; |
Die Spaltenbeschriftung (der Kopfzelleninhalt) wird bei jeder untergeordneten Datenzelle wiederholt |
speak-header: once; |
Die Spaltenbeschriftung wird nur einmal wiedergegeben |
Horizontale Ausrichtung von Zelleninhalten
Zelleninhalte
lassen sich per (X)HTML und CSS horizontal ausrichten. Im Sinne der
Trennung von Struktur und Design sollte für diese Art der Formatierung
(wie für alle anderen Formatierungen auch) CSS der Vorzug gegeben
werden. Die Definition erfolgt mittels des Attributes text-align.
Horizontale Ausrichtung von Tabellen
Tabellen
lassen sich wie alle anderen Block-Elemente per CSS horizontal auf der
Seite ausrichten. Standardmäßig steht eine Tabelle unseren
Lesegewohnheiten gerecht am linken Seitenrand. Über die Angaben von margin-left, margin-right und width lässt sich die Tabelle linksbündig, zentriert oder rechtsbündig darstellen.
Weiterführende Links
Weitere ähnliche Artikel
Thomas ist Diplom-Designer (FH) und arbeitet derzeit als Flash Developer/Screendesigner in Frankfurt a.M. Seine Fachgebiete sind interaktive Medien und Design.
Profilseite betrachten