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

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