Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

von Thomas | 0 | 9306 Aufrufe

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

 
HTML
  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&sup2;</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.

AttributBeschreibung
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.

AttributBeschreibung
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:

AttributBeschreibung
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.

AttributBeschreibung
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>&nbsp;</td> oder <td>&#160;</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

AttributBeschreibung
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.

Weitere ähnliche Artikel

Tabellen im Web – Teil 1 – Eine Einführung

Einige Erläuterungen zu den Möglichkeiten und Notwendigkeiten der Gestaltung von Tabellen im Web, für alle diejenigen, die sich auch an ordentlichen Tabellen in Drucksachen erfreuen würden und ebenfalls der Meinung sind, dass das Web dem nicht zu weit nachstehen sollte. [lesen]

Tabellen im Web – Teil 2 – Die richtige Code-Struktur

Voraussetzung für die effektive Arbeit an der Abbildung einer Tabelle im Web ist eine strukturierte Vorbereitung. Nach der obligatorischen gedanklichen Einarbeitung und Strukturierung der Vorlage, kann sich der Gestalter an die konkrete Umsetzung und Definition der Grundstruktur der Tabelle mittels (X)HTML wagen. [lesen]

Tabellen im Web – Teil 4.1 – Gestaltung mittels (X)HTML

Obwohl man heute dank CSS (aktuell in Version 2) die Möglichkeit hat, Inhalt und Design strikt voneinander zu trennen, ist es dennoch möglich, alleine mit (X)HTML-Angaben auf das Erscheinungsbild der Tabelle Einfluss zu nehmen. [lesen]

Tabellen im Web – Teil 4.2 – Gestaltung mittels CSS

Geht es 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. [lesen]

Tabellen im Web – Teil 5 – Interaktion

Einen nennenswerten Vorteil von tabellarischen Darstellungen im Web stellt die Möglichkeit dar, Inhalte interaktiv zu präsentieren. Tabellen lassen sich mit Hilfe von nutzerseitigen Scriptsprachen (JavaScript) mit Zusatzfunktionen belegen, welche den Nutzwert erheblich erhöhen können. [lesen]

Über den Autor: Thomas
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