Tabellenzellen, Zebrastreifen

Schritt 3: Gestaltung der Tabellenzellen

Der Gesamteindruck der Tabelle wird ganz wesentlich von der Gestaltung der Zellen geprägt.

Die Spaltenüberschriften th und die normalen Tabellenzellen td bekommen ein bisschen padding, werden mit text-align:left linksbündig und vertical-align: top (mehr hierzu im Kapitel Tabellenformatierung unseres Einführungskurses CSS ...) nach oben ausgerichtet. Die Spaltenüberschriften th bekommen zusätzlich noch eine Textformatierung:

th, td {  
   padding: 0.5em 1em; 
   text-align: left; 
   vertical-align: top; /* Standard ist vertical-align: middle */ 
}
th { 
   font-family: Georgia, "Times Roman", serif; 
   font-size: 110%;
   font-variant: small-caps; /* kleine Großbuchstaben */ 
   letter-spacing: 2px; /* etwas Abstand zwischen den Buchstaben */ 
   font-weight: normal; /* nicht fett */ 
}

Mit thead und tbody wurden Tabellenzellen im Markup logisch gruppiert und können so jetzt im CSS gemeinsam gestaltet werden:

thead { 
   background-color: #f3c600; 
   color: black; 
   border-bottom: 1px solid #999; 
}
tfoot { 
   border-top: 1px solid #999; 
}

Im Browser wird die Tabelle jetzt langsam etwas übersichtlicher:

Die Tabelle wird langsam übersichtlicher

Die Rahmenlinien sind in älteren Internet Explorern nicht sichtbar

Die im ToDo vergebenen Rahmenlinien für thead und tfoot werden im Internet Explorer kleiner als V7 nicht angezeigt, haben aber ansonsten keinerlei Nebenwirkungen. Wenn die Linien auch in diesen Browsern sichtbar sein sollen, müssten Sie im HTML den Elementen thead und tfoot entsprechende Klassen vergeben und dann diese gestalten.

Schritt 4: Zebrastreifen

Die Zeilen einer Tabelle lassen sich vom Benutzer optisch besser erfassen, wenn sie abwechselnd farbig markiert sind. Dazu wird jede gerade Tabellenzeile farbig hinterlegt. Da dieser Effekt oft als "Zebrastreifen" bezeichnet wird, liegt der Name der Klasse nahe.

Im HTML bekommt dazu jede zweite Tabellenzeile die Klasse für die Zebrastreifen:

<!-- jede zweite Zeile ... --> 
<tr class="zebrastreifen">
   <td>02</td>
   <td>Maria de Barros</td>
   <td>Mi Nada Um Ca Tem</td>
   <td>Women of Africa</td>
</tr>

Ergänzen Sie danach im Style-Block von tabelle.html folgende Regel:

tr.zebrastreifen { 
   background-color: #ffeda0; 
   color: black; 
}

Schließen Sie die Formatierung der Tabelle mit folgenden Styles ab. Diese Regeln zeigen dem Benutzer durch einen deutlichen Hover-Effekt, wo sich der Mauszeiger gerade befindet:

tr:hover { 
   background-color: #d90000; 
   color: white; 
}
/* Im Tabellenkopf und -fuß keinen Hover-Effekt */ 
thead tr:hover,
tfoot tr:hover { 
   background-color: transparent; 
   color: inherit; 
}

Im Browser sieht die Tabelle jetzt wesentlich übersichtlicher aus als am Anfang dieses Artikels:

Die fertige Tabelle - hübsch, übersichtlich und zugänglich

Der Hover-Effekt in älteren Internet Explorern

Der Hover-Effekt funktioniert - wie so vieles - nicht in Internet Explorern kleiner als V7, hat aber keinerlei negative Nebenwirkungen.

Dieser Artikel basiert auf Little Boxes 2, Kap. 13.1.

Weitere CSS-Tipps von Peter Müller finden Sie auf unserer Seite CSS-Praxis.

HTML-Tabellen gestalten per CSS