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:

Abbildung 10.10: Beispieltabelle mit Kopf, Rumpf und Fuß

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:

Abbildung 10.11: Die Beispieltabelle fertig gestaltet

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 }