CSS-Tabellenlayout, Beispiel 03g

Arbeitszeitauswertung Woche 02/2005
Tag Datum Kommt Geht Anwesend Arbeitszeit Überstunden Fehlzeiten Bemerkungen
Summe:           3:48 3:43  
Montag 10. Jan             Krankheit
Dienstag 11. Jan 8:49 15:22 6:33 5:48   1:42  
Mittwoch 12. Jan 7:32 18:13 10:41 9:56 2:26    
Donnerstag 13. Jan 7:39 17:16 9:37 8:52 1:22    
Freitag 14. Jan 7:16 13:30 6:14 5:29   2:01  
Samstag 15. Jan              
Sonntag 16. Jan              

Das Style-Sheet für die Tabelle:

table {
   margin: 1em;
   border-collapse: separate;
   border-spacing: 0 0;
   }
td {
   border: 1px solid #999;
   border-top: none;
   border-left: none;
   }
th {
   border: 1px solid #999;
   border-top: none;
   border-left: none;
   }
th.first-child {
   border-left: 1px solid #999;
   }
thead th {
   border-top: 1px solid #999;
   }

.ubstd {
   border-left: 2px solid orange;
   }
.fehlt {
   border-right: 2px solid orange;
   }
.arbzt {
   border-right: 2px solid blue;
   border-left: 2px solid blue;
   }
thead .fehlt, thead .ubstd {
   border-top:  2px solid orange;
   }
thead .arbzt {
   border-top:  2px solid blue;
   }
tfoot .fehlt, tfoot .ubstd {
   border-bottom:  2px solid orange;
   }
tfoot .arbzt {
   border-bottom:  2px solid blue;
   }

tr.fr td, tr.fr th {
   border-bottom: 2px dotted #f00;
   }
tr.so td, tr.so th {
   border-bottom: 2px dotted #f00;
   }
tr.sa td.first-child, tr.sa th.first-child,
tr.so td.first-child, tr.so th.first-child {
   border-left: 2px dotted #f00;
   }
tr.sa td.last-child, tr.sa th.last-child,
tr.so td.last-child, tr.so th.last-child {
   border-right: 2px dotted #f00;
   }

Das HTML der Tabelle:

<table cellspacing="0">
<caption>Arbeitszeitauswertung Woche 02/2005</caption>
<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="first-child">
<th class="first-child tag">Tag</th>
<th class="datum">Datum</th>
<th class="kommt">Kommt</th>
<th class="geht" >Geht</th>
<th class="anwsd">Anwesend</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">&nbsp;</th>
<th class="kommt">&nbsp;</th>
<th class="geht" >&nbsp;</th>
<th class="anwsd">&nbsp;</th>
<th class="arbzt">&nbsp;</th>
<th class="ubstd">3:48</th>
<th class="fehlt">3:43</th>
<th class="last-child bemkg">&nbsp;</th>
</tr>
</tfoot>
<tbody>
<tr class="first-child woche mo">
<th class="first-child tag">Montag</th>
<td class="datum">10.&nbsp;Jan</td>
<td class="kommt">&nbsp;</td>
<td class="geht" >&nbsp;</td>
<td class="anwsd">&nbsp;</td>
<td class="arbzt">&nbsp;</td>
<td class="ubstd">&nbsp;</td>
<td class="fehlt">&nbsp;</td>
<td class="last-child bemkg">Krankheit</td>
</tr>
<tr class="woche di">
<th class="first-child tag">Dienstag</th>
<td class="datum">11.&nbsp;Jan</td>
<td class="kommt">8:49</td>
<td class="geht" >15:22</td>
<td class="anwsd">6:33</td>
<td class="arbzt">5:48</td>
<td class="ubstd">&nbsp;</td>
<td class="fehlt">1:42</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
<tr class="woche mi">
<th class="first-child tag">Mittwoch</th>
<td class="datum">12.&nbsp;Jan</td>
<td class="kommt">7:32</td>
<td class="geht" >18:13</td>
<td class="anwsd">10:41</td>
<td class="arbzt">9:56</td>
<td class="ubstd">2:26</td>
<td class="fehlt">&nbsp;</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
<tr class="woche do">
<th class="first-child tag">Donnerstag</th>
<td class="datum">13.&nbsp;Jan</td>
<td class="kommt">7:39</td>
<td class="geht" >17:16</td>
<td class="anwsd">9:37</td>
<td class="arbzt">8:52</td>
<td class="ubstd">1:22</td>
<td class="fehlt">&nbsp;</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
<tr class="woche fr">
<th class="first-child tag">Freitag</th>
<td class="datum">14.&nbsp;Jan</td>
<td class="kommt">7:16</td>
<td class="geht" >13:30</td>
<td class="anwsd">6:14</td>
<td class="arbzt">5:29</td>
<td class="ubstd">&nbsp;</td>
<td class="fehlt">2:01</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
<tr class="we sa">
<th class="first-child tag">Samstag</th>
<td class="datum">15.&nbsp;Jan</td>
<td class="kommt">&nbsp;</td>
<td class="geht" >&nbsp;</td>
<td class="anwsd">&nbsp;</td>
<td class="arbzt">&nbsp;</td>
<td class="ubstd">&nbsp;</td>
<td class="fehlt">&nbsp;</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
<tr class="last-child we so">
<th class="first-child tag">Sonntag</th>
<td class="datum">16.&nbsp;Jan</td>
<td class="kommt">&nbsp;</td>
<td class="geht" >&nbsp;</td>
<td class="anwsd">&nbsp;</td>
<td class="arbzt">&nbsp;</td>
<td class="ubstd">&nbsp;</td>
<td class="fehlt">&nbsp;</td>
<td class="last-child bemkg">&nbsp;</td>
</tr>
</tbody>
</table>