zurück zur Originalseite

Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.

Verknüpfung von Überschriften von Zeilen- und Spaltengruppen mit Tabellenzellen in Datentabellen

Überschriften in Zeilen und Spaltengruppen können mit den Tabellenzellen verknüpft werden.

HTML

<table width="70%">
  <colgroup></colgroup>
  <colgroup span="2">
    <col width="20%" />
    <col width="20%" />
  </colgroup>
  <colgroup span="2" width="20%"></colgroup>
  <tr>
    <td> </td>
    <th id="kinder" colspan="2">Kinder</th>
    <th id="erwachsene" colspan="2">Erwachsene</th>
  </tr>
  <tr>
    <td></td>
    <th id="knormal">Normaltarif </th>
    <th id="kschnell">Schnellbus und 1. Klasse </th>
    <th id="enormal">Normaltarif</th>
    <th id="eschnell">Schnellbus und 1. Klasse </th>
  </tr>
  <tr>
    <th id="z1">Zone 1 </th>
    <td headers="z1 kinder knormal">1,00 Euro </td>
    <td headers="z1 kinder kschnell">1,50 Euro </td>
    <td headers="z1 erwachsene enormal">1,50 Euro </td>
    <td headers="z1 erwachsene eschnell">2,50 Euro </td>
  </tr>
  <tr>
    <th id="z2">Zone 2 </th>
    <td headers="z2 kinder knormal">1,50 Euro </td>
    <td headers="z2 kinder kschnell">2,00 Euro </td>
    <td headers="z2 erwachsene enormal">2,50 Euro </td>
    <td headers="z2 erwachsene eschnell">3,00 Euro </td>
  </tr>
</table>

CSS

table {
  width:95%;
  margin:1em 0 0 0;
}
td {
  margin:0;
  padding:0.5em;
  font:0.9em verdana,arial,helvetica,sans-serif;
  vertical-align:top;
}
td ul {
  font-size:1em;
}
th {
  margin:0;
  padding:0.5em;
  color:#000;
  background:#FFDB94;
  font:bold 0.9em verdana,arial,helvetica,sans-serif;
  text-align:center;
  vertical-align:top;
}
tr {
  background:#EAF3FE;
  font-size:100%;
}
tr li.intern {
  list-style-image:url(intern_hellblau.gif);
}
tr.zweite {
  background:#C3DFFF;
  font-size:100%;
}
tr.zweite li.intern {
  list-style-image:url(intern_dunkelblau.gif);
}

Browseransicht

  Kinder Erwachsene
Normaltarif Schnellbus und 1. Klasse Normaltarif Schnellbus und 1. Klasse
Zone 1 1,00 Euro 1,50 Euro 1,50 Euro 2,50 Euro
Zone 2 1,50 Euro 2,00 Euro 2,50 Euro 3,00 Euro

zurück zur Originalseite