CSS-Tabellenlayout, Beispiel 08c

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et nisl eu nulla commodo fringilla. Praesent sem. Aenean dapibus lacus convallis metus. Integer vestibulum mi nec tellus. Mauris vulputate urna in sem vehicula tempus. Duis metus augue, sodales et, varius eu, bibendum ac, lectus. Donec sed tortor. Suspendisse elit odio, accumsan a, vulputate eget, ornare vitae, purus. Aenean in enim non ante egestas bibendum. Aenean quis dui id metus eleifend aliquam. Phasellus in augue et diam consequat adipiscing. Phasellus at lorem. Sed et lacus eu tellus ullamcorper imperdiet. Mauris ultrices dignissim quam.

Arbeitszeitauswertung Woche 02/2005
Tag	Datum	Arbeitszeit	Überstunden	Fehlzeiten	Bemerkungen
Summe:			3:48	3:43
Arbeitszeitauswertung Woche 02/2005
Montag	10. Jan				Krankheit
Dienstag	11. Jan	5:48		1:42
Mittwoch	12. Jan	9:56	2:26
Donnerstag	13. Jan	8:52	1:22
Freitag	14. Jan	5:29		2:01
Samstag	15. Jan
Sonntag	16. Jan

Etiam mauris ante, tristique rhoncus, condimentum et, scelerisque molestie, odio. Cras ut tellus. Aliquam elementum felis vulputate dui. Praesent faucibus augue eu nibh. Quisque pulvinar ultrices dui. Morbi felis tellus, feugiat a, molestie in, pretium nonummy, nunc. Praesent mollis, turpis ut imperdiet cursus, magna wisi pulvinar ipsum, at pretium diam massa facilisis nunc. Phasellus nonummy massa vitae velit. Donec dui. Quisque purus. Aliquam pede est, dapibus ut, mollis sit amet, sagittis in, orci. Duis hendrerit, enim sit amet tempor aliquam, metus nunc pellentesque nulla, at molestie magna risus id risus. Aenean ipsum libero, facilisis non, laoreet eget, fermentum rhoncus, lacus.

Phasellus lobortis eros posuere tortor. Nam lobortis consequat ante. Phasellus dui velit, pretium id, adipiscing in, dapibus sed, turpis. Sed libero. Etiam rhoncus lacinia mauris. Sed porttitor, urna quis ultrices tristique, metus wisi volutpat augue, placerat convallis mi purus sed orci. Donec tempus libero id mi. Proin mauris turpis, volutpat eget, vehicula vel, egestas nec, neque. Maecenas consectetuer sem in arcu lacinia dictum. Pellentesque faucibus, quam id pulvinar ornare, sapien turpis viverra dui, luctus imperdiet elit tellus sed leo. Fusce luctus turpis ac orci. Donec ultrices lectus at eros. Quisque at metus.

Maecenas rutrum nibh a nisl. In commodo scelerisque lectus. Nunc eget ipsum. Donec aliquet odio vel mi. Mauris felis ligula, faucibus vitae, euismod et, dignissim rhoncus, quam. Nullam in risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eget diam. Sed dignissim, odio non fermentum blandit, ligula metus molestie libero, porttitor consequat metus justo ultrices libero. Etiam urna sem, venenatis consectetuer, pulvinar ac, porttitor a, arcu. Quisque non erat. Praesent eu urna sit amet lorem lobortis tincidunt. Donec venenatis ante vel mauris. In hac habitasse platea dictumst. Praesent pulvinar ipsum hendrerit arcu. Donec quis purus. Praesent at velit. Integer ipsum wisi, mattis cursus, egestas sit amet, varius nec, leo. In volutpat enim sed sem. Vestibulum nec tellus.

Nunc cursus dolor ut lorem. Mauris at diam eu nulla semper interdum. Nam consequat euismod arcu. Aliquam nec ipsum. Mauris egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse mollis. Aliquam sit amet felis. In a ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lacinia. Fusce varius, justo vel sodales sollicitudin, felis diam pulvinar eros, sed condimentum orci purus id wisi.

Das Style-Sheet für die Tabelle:

table {
   border-collapse: separate;
   border-spacing: 2px 2px;
   margin: 1em;
   float: left;
   }
td {
   padding: 2px 15px 2px 5px;
   text-align: right; 
   }
td.bemkg {
   text-align: left;
   }   
th {
   padding: 3px 15px 3px 5px;
   }
tfoot th {
   text-align: right;
   }
table th.tag {
   text-align: left;
   }
table thead tr.caption {
   display: none;
   }
table tfoot tr.caption th {
   border: 2px solid #ddf7ee;
   background-color: #fff;
   font-size: 1.2em;
   text-align: center;
   }
table thead tr,
table tfoot tr {
   background-color: #ddf7ee;
   }
table tr.di,
table tr.do {
   background-color: #f7f7f7;
   }
table tr.mo,
table tr.mi,
table tr.fr  {
   background-color: #eee;
   }
table tr.sa  {
   background-color: #fff7f7;
   }
table tr.so  {
   background-color: #fee;
   }
table colgroup.rohdaten {
   background-color: #fec;
   }
table colgroup.auswertung2 {
   background-color: #ddf;
   }

Das HTML der Tabelle:

<p>Lorem ipsum ...</p>
<table cellspacing="2">
<colgroup>
<col class="tag" />
</colgroup>
<colgroup class="rohdaten">
<col class="datum" />
<col class="kommt" />
<col class="geht" />
</colgroup>
<colgroup class="auswertung1">
<col class="anwsd" />
<col class="arbzt" />
</colgroup>
<colgroup class="auswertung2">
<col class="ubstd" />
<col class="fehlt" />
</colgroup>
<colgroup>
<col class="bemkg" />
</colgroup>
<thead>
<tr class="caption">
<th colspan="9">Arbeitszeitauswertung Woche 02/2005</th>
</tr>
<tr class="first-child">
<th class="first-child tag">Tag</th>
<th class="datum">Datum</th>
<th class="arbzt">Arbeitszeit</th>
<th class="ubstd">Überstunden</th>
<th class="fehlt">Fehlzeiten</th>
<th class="last-child bemkg">Bemerkungen</th>
</tr>
</thead>
<tfoot>
<tr class="last-child">
<th class="first-child tag">Summe:</th>
<th class="datum"></th>
<th class="arbzt"></th>
<th class="ubstd">3:48</th>
<th class="fehlt">3:43</th>
<th class="last-child bemkg"></th>
</tr>
<tr class="caption">
<th colspan="9">Arbeitszeitauswertung Woche 02/2005</th>
</tr>
</tfoot>
<tbody>
<tr class="first-child woche mo">
<th class="first-child tag">Montag</th>
<td class="datum">10. Jan</td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg">Krankheit</td>
</tr>
<tr class="woche di">
<th class="first-child tag">Dienstag</th>
<td class="datum">11. Jan</td>
<td class="arbzt">5:48</td>
<td class="ubstd"></td>
<td class="fehlt">1:42</td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche mi">
<th class="first-child tag">Mittwoch</th>
<td class="datum">12. Jan</td>
<td class="arbzt">9:56</td>
<td class="ubstd">2:26</td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche do">
<th class="first-child tag">Donnerstag</th>
<td class="datum">13. Jan</td>
<td class="arbzt">8:52</td>
<td class="ubstd">1:22</td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="woche fr">
<th class="first-child tag">Freitag</th>
<td class="datum">14. Jan</td>
<td class="arbzt">5:29</td>
<td class="ubstd"></td>
<td class="fehlt">2:01</td>
<td class="last-child bemkg"></td>
</tr>
<tr class="we sa">
<th class="first-child tag">Samstag</th>
<td class="datum">15. Jan</td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
<tr class="last-child we so">
<th class="first-child tag">Sonntag</th>
<td class="datum">16. Jan</td>
<td class="arbzt"></td>
<td class="ubstd"></td>
<td class="fehlt"></td>
<td class="last-child bemkg"></td>
</tr>
</tbody>
</table>
<p>Etiam mauris ante, ...</p>
<p>Maecenas rutrum nibh ...</p>
<p>Nunc cursus dolor ...</p>