Tabellen

Auch Tabellen können mithilfe von CSS grafisch aufgehübscht werden. Dazu werden die allgemeinen Eigenschaften, wie color, border, etc. auf Elemente der Tabelle, also <table>, <tr>, <td>, … angewendet. Mit (X)HTML werden verschiedene neue Tags für Tabellen eingeführt, praktisch werden diese jedoch kaum genutzt. Deswegen beschränken wir uns auf den <caption>-Tag, der der Tabelle einen Titel gibt.

Beispiel

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Tabelle</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<table cellspacing="0">
 <caption>Tabelle XY</caption>
  <tr><th class="ohne">&Uuml;bersicht</th> <th>Spalte 1</th> <th>Spalte 2</th></tr>
  <tr><th>Zeile 1</th><td>Erste Zelle</td><td>Zweite Zelle</td></tr>
  <tr class="gerade"><th>Zeile 2</th><td>Dritte Zelle</td><td>Vierte Zelle</td></tr>
  <tr><th>Zeile 3</th><td>F&uuml;nfte Zelle</td><td>Sechste Zelle</td></tr>
  <tr class="gerade"><th>Zeile 4</th><td>Siebte Zelle</td><td>Achte Zelle</td></tr>
  <tr><th>Zeile 5</th><td>Neunte Zelle</td><td>Zehnte Zelle</td></tr>
  <tr class="gerade"><th>Zeile 6</th><td>Elfte Zelle</td><td>Zw&ouml;lfte Zelle</td></tr>
  <tr><th>Ergebnis</th><td>Erste Spalte</td><td>Zweite Spalte</td></tr>
</table>
 
 
 
</body>
</html>

style.css

body {
           background-color: #CFDCE6;
           font: 100.01% Verdana, sans-serif;
           color: #706348;
}
table {
           border-collapse: collapse;
}
 
td, th {
           padding: 10px;
           width: 15em;
           border: 1px solid #807459;
           font: 0.8em sans-serif;
}
th {
           font-weight: bold;
           letter-spacing: 0.5em;
}
 
caption {
           text-transform: uppercase;
           font-size: 1.5em;
           margin-bottom: 10px;
}
 
 
tr.gerade {
           background-color: #E6DFCF;
           color: #647D8F;
}
tr {
           background-color: white;
}
tr th {
           background: url(hg_table2.gif) white no-repeat 3px 3px;
}
tr.gerade th {
           background: url(hg_table1.gif) #E6DFCF no-repeat 3px 3px;
}

Grafiken