HTML optimieren, table und caption

Tabellen sind in den letzten Jahren zwar etwas in Verruf gekommen, aber sie sind keineswegs böse. Im Gegenteil. Zur Darstellung von tabllarischen Daten sind sie die Idealbesetzung. Peter Müller zeigt, wie Sie mit CSS HTML-Tabellen gestalten. - Start unserer neuen Serie zu Webdesign mit CSS (zur "alten" Serie hier entlang)

In diesem Artikel gestalten Sie eine Songliste einer CD (Putumayo Cafe Sampler), indem Sie zunächst das HTML mit zusätzlichen Elementen und Attributen optimieren und anschließend die Tabelle per CSS übersichtlich formatieren.

Die wichtigsten HTML-Elemente zur Erstellung von Tabellen sind table, tr, td und th, die zusammen das Grundgerüst einer Datentabelle bilden. Außerdem gibt es noch thead, tfoot, tbody, die sich zur logischen Gruppierung von Tabellenzeilen eignen.

Diese grundlegenden Tabellenelemente werden im Folgenden ergänzt und anschließend per CSS gestaltet. Die fertige Beispieltabelle sieht so aus:

Die fertige Beispieltabelle

Beispieldateien

Zum Üben und Selbermachen stehen Beispieldateien bereit. Das zip-Archiv enthält zwei Ordner: In "basis" finden Sie die Übungsdateien, mit denen Sie unmittelbar anfangen können zu arbeiten. Dem Ordner "fertig" entnehmen Sie, wie das Ganze am Ende aussehen sollte.
Download Beispieldateien (.zip, 3 kB)

Schritt 1: Das HTML optimieren

In den Beispieldateien zu diesem Artikel finden Sie die Datei tabelle.html, die bereits folgendes HTML enthält:

<table>
<thead>
<tr>
   <th>Nr.</th>
   <th>Künstler</th>
   <th>Stück</th>
   <th>Album</th>
</tr>
</thead>
<tbody>
<tr>
   <td>01</td>
   <td>Giorgio Conte</td>
   <td>Cannelloni</td>
   <td>Italian Caf&eacute;</td>
</tr>
<tr>
   <td>02</td>
   <td>Maria de Barros</td>
   <td>Mi Nada Um Ca Tem</td>
   <td>Women of Africa</td>
</tr>
<!-- weitere Tabellenzeilen --> 
</tbody>
</table>

Zunächst ergänzen Sie table um das Attribut summary ("Zusammenfassung"), das eine inhaltliche Zusammenfassung der Tabelle enthält. Benutzer mit einem linearen Ausgabegerät wie einem Screenreader können Tabellen nicht auf einen Blick erfassen und erfahren in der "Summary", worin es in der Tabelle inhaltlich geht.

<table summary="Playlist des Putumayo Cafe Samplers">

Direkt nach dem Anfangstag können Sie einer Tabelle mit dem Element caption eine Überschrift geben. Dies wäre natürlich auch mit einem normalen Überschriftelement oberhalb der Tabelle möglich, aber caption hat den Vorteil, dass es im Markup innerhalb des Elements table steht.

<table summary="Playlist des Samplers Putumayo Cafe"> 
<caption>Putumayo Caf&eacute; Sampler</caption>

Den mit th markierten Zellen wird durch das Attribut scope ("Wirkungsbereich, Gültigkeitsbereich") mitgeteilt, dass sie für eine Spalte (scope="col") gelten, und nicht für eine Zeile (scope="row"):

<thead>
<tr>
   <th scope="col">Nr.</th>
   <th scope="col">Künstler</th>
   <th scope="col">Stück</th>
   <th scope="col">Album</th>
</tr>
<thead>

Zum Schluss wird zwischen Kopf (thead) und Körper (tbody) der Tabelle mit tfoot eine Fußzeile ergänzt. Entgegen der sonstigen anatomischen Gepflogenheiten befindet sich der Fuß bei Tabellen tatsächlich zwischen Kopf und Körper. Die in tfoot enthaltene Tabellenzelle erstreckt sich durch das Attribut colspan="4" über alle vier Spalten der Tabelle:

<tfoot>
<tr>
   <td colspan="4">Diese CD enthält eine Mischung aus den <em>Caf&eacute;</em>, <em>Acoustic</em>- und <em>Lounge</em>-Alben von Putumayo.</td>
</tr> 
</tfoot>

Die Tabelle sieht nach diesen Änderungen im Browser etwa so aus:

Die Beispieltabelle im Rohbau

Details zum HTML für Tabellen

In seinem Blog 456bereastreet.com hat Roger Johansson aus Göteborg neben vielen anderen lesenswerten Artikeln auch einen über das Markup von HTML-Tabellen geschrieben.

Schritt 2: Gestaltung von table und caption

Nach der Optimierung des Markups beginnt jetzt die Gestaltung der Tabelle. Im ersten Schritt geht es dabei um das Element table selbst. Die Tabelle bekommt eine definierte Breite und einen dünnen Rahmen rundherum. Fügen Sie zwischen <head> und </head> im Style-Block der Übungsdatei tabelle.html den folgenden Style ein:

/* CSS zur Gestaltung der Tabelle */
table { 
   width: 55em;
   border-collapse: collapse; /* Alternative wäre border-collapse: separate */ 
   background: white; 
   color: black;
   border: 1px solid #333; 
}

Neu ist lediglich die Eigenschaft border-collapse. Der Wert collapse bewirkt, dass zwischen den Zellen der Tabelle keine Zwischenräume sind, und ist eine CSS-Entsprechung zu der HTML-Anweisung <table cellspacing="0">, die Sie vielleicht noch aus HTML-Gestaltungszeiten kennen. Der Standardwert ist border-collapse: separate, der einen wenige Pixel breiten Abstand zwischen den Tabellenzellen erzeugt.

Der folgende Style gestaltet die Tabellenüberschrift caption so, dass sie wie eine Überschrift aussieht:

caption {  
   font-size: 120%;
   font-weight: bold; 
   background-color: white; 
   color: black; 
   text-align: left;
   padding: 1em;
   padding-left: 0; 
   margin-bottom: 3px; 
}

Nach diesem Schritt sieht die Tabelle im Browser ungefähr so aus:

caption als Überschrift und table mit Rahmen

HTML-Tabellen gestalten per CSS