Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Beispiel: Tabellen gestalten per CSS
Im Prinzip können Sie alle in HTML-Tabellen verwendeten Elemente wie gewohnt gestalten. Probieren Sie einmal, in Ihrem Editor die Tabelle aus Abbildung 10.10 zu erstellen. Hier noch ein paar hilfreiche
Hinweise:
- table hat das Attribut border="1", um die Struktur der Tabelle sichtbar zu machen. Bei der Gestaltung wird dieses Attribut nicht benötigt.
- Die Kopfzeile soll als thead ausgezeichnet werden.
- Die Fußzeile soll als tfoot ausgezeichnet werden und über alle drei Spalten gehen (colspan="3").
Und so soll die Tabelle aussehen:

Das folgende Listing zeigt den Grundaufbau der Tabelle:
01 <table>
02 <thead>
03 <tr>
04 <th>Nr. </th>
05 <th>Titel</th>
06 <th>Erstausstrahlung</th>
07 </tr>
08 </thead>
09 <tfoot>
10 <tr>
11 <td colspan="3">Zum Teil [...] neu aufgelegt</td>
12 </tr>
13 </tfoot>
14 <tbody>
15 <tr>
16 <td>1.</td>
17 <td>Jim Knopf und Lukas der Lokomotivführer</td>
18 <td>1961</td>
19 </tr>
20 <tr>
21 <td>2.</td>
22 <td>Jim Knopf und die Wilde 13</td>
23 <td>1962</td>
24 </tr>
25
26 <!-- Noch ein paar Tabellenzeilen -->
27
28 </tbody>
29 </table>
Diese Tabelle soll so gestaltet werden, dass sie Abbildung 10.11 gleicht:

Dazu sind die folgenden Schritte nötig:
- Zunächst bekommt table eine Hintergrundfarbe (z. B. #ffeda0).
- Danach werden mit der Anweisung border-collapse: collapse die Zwischenräume zwischen den Tabellenzellen entfernt. Im HTML hieß das früher cellspacing="0".
- thead und tfoot bekommen jeweils eine Hintergrundfarbe (z. B. #f3c600 bzw. #f7f1d4).
- Alle Zellen werden links ausgerichtet (text-align: left) und bekommen ein leichtes Padding.
Abschließend noch das CSS im Überblick, das in einem Styleblock im head-Bereich der Übungsseite steht:
01 table {
02 background-color: #ffeda0;
03 border-collapse: collapse;
04 border: none;
05 }
06 thead {
07 background-color: #f3c600;
08 }
09 tfoot {
10 background-color: #F7F1D4;
11 font-size: 80%;
12 border-top: 1px solid #999;
13 }
14 td, th {
15 text-align: left;
16 padding: 0.5em 1em;
17 }