Tabelle (table) mit summary, caption, thead, tbody und tfoot

Beispiel:

Teilnehmende Kinder und ihre Eltern

Name	Jahrgang	Mutter	Vater	Stadt	Bundesland	Status
Stand: 29. August 2007
Peter	1980	Elvira	Anton	Berlin	Berlin	OK
Kalle	1990	Hanna	Gabriel	Leipzig	Sachsen	OK
Heiner	2000	Esmeralda	Hans-Jürgen	Kassel	Hessen	OK

Quellcode:

  <table summary="Angaben zu den teilnehmenden Kindern">
  
   <caption>Teilnehmende Kinder und ihre Eltern</caption>
   
   <colgroup>
    <col class="name" />
    <col class="jahr" />
    <col class="mutter" />
    <col class="vater" />
    <col class="stadt" />
    <col class="land" />
    <col class="status" />
   </colgroup>
   
   <thead>
    <tr>
     <th scope="col">Name</th>
     <th scope="col">Jahrgang</th>
     <th scope="col">Mutter</th>
     <th scope="col">Vater</th>
     <th scope="col">Stadt</th>
     <th scope="col">Bundesland</th>
     <th scope="col">Status</th>
    </tr>
   </thead>

   <tfoot>
    <tr>
     <td colspan="7">Stand: 29. August 2007</td>
    </tr>
   </tfoot>

   <tbody>
    <tr>
     <th scope="row">Peter</th>
     <td>1980</td>
     <td>Elvira</td>
     <td>Anton</td>
     <td>Berlin</td>
     <td>Berlin</td>
     <td>OK</td>
    </tr>
    <tr>
     <th scope="row">Kalle</th>
     <td>1990</td>
     <td>Hanna</td>
     <td>Gabriel</td>
     <td>Leipzig</td>
     <td>Sachsen</td>
     <td>OK</td>
    </tr>
    <tr>
     <th scope="row">Heiner</th>
     <td>2000</td>
     <td>Esmeralda</td>
     <td>Hans-Jürgen</td>
     <td>Kassel</td>
     <td>Hessen</td>
     <td>OK</td>
    </tr>
   </tbody>

  </table>  

Stylesheet:

  table {font-size:11px;border:1px solid #777;border-collapse:collapse;border-spacing:0;margin:0;padding:0;}

  table caption {font-weight:bold;color:#FFF;background:#777;margin:0;padding:5px;}

  table col.name {width:100px;}
  table col.jahr {width:50px;}
  table col.mutter {width:100px;}
  table col.vater {width:100px;}
  table col.stadt {width:100px;}
  table col.land {width:100px;}
  table col.status {width:50px;}

  table thead {background:#DDD;}
  table tbody {background:#EEE;}
  table tfoot {background:#DDD;}

  table th {background:#FFF;border:1px solid #999;margin:0;padding:5px;}
  table tbody th {text-align:left;font-weight:normal;}
  
  table td {border:1px solid #999;margin:0;padding:5px;}
  table tfoot td {font-size:9px;padding:2px 5px;}  

Erläuterungen:

summary

Zusammenfassung des Tabelleninhalts für nicht-visuelle Darstellung

caption

Überschrift

thead

Kopfzeile

tfoot

Fußzeile

tbody

Tabelleninhalt

scope

Beziehung von th zum Inhalt. Möglicher Angaben:
scope="col"
scope="row"

• www.ploehr.de