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 Tabellenzellen und Überschriften in Datentabellen

Tabellenzellen in Datentabellen können mit ein oder mehreren Überschriften mittels headers- und id-Attributen verknüpft werden.

HTML

<table>
  <caption>Fahrpreise für den Bus in Hintertupfingen</caption>
  <tr>
    <td> </td>
    <th id="spar">Spartarif</th>
    <th id="ferien">Ferien-Ticket</th>
    <th id="normal">Normaltarif </th>
    <th id="schnell">Schnellbus</th>
    <th id="eins">1. Klasse </th>
    <th id="gruppe">Gruppentarif</th>
  </tr>
  <tr>
    <th id="zone1">Zone 1</th>
    <td headers="zone1 spar">0,50 Euro </td>
    <td headers="zone1 ferien">0,75 Euro </td>
    <td headers="zone1 normal">1,00 Euro </td>
    <td headers="zone1 schnell">1,50 Euro </td>
    <td headers="zone1 eins">2,50 Euro </td>
    <td headers="zone1 gruppe">3,50 Euro </td>
  </tr>
  <tr>
    <th id="zone2">Zone 2</th>
    <td headers="zone2 spar">0,75 Euro </td>
    <td headers="zone2 ferien">1,00 Euro </td>
    <td headers="zone2 normal">1,50 Euro </td>
    <td headers="zone2 schnell">2,50 Euro </td>
    <td headers="zone2 eins">3,50 Euro </td>
    <td headers="zone2 gruppe">5,00 Euro </td>
  </tr>
  <tr>
    <th id="zone3">Zone 3</th>
    <td headers="zone3 spar">1,00 Euro </td>
    <td headers="zone3 ferien">2,00 Euro </td>
    <td headers="zone3 normal">3,00 Euro </td>
    <td headers="zone3 schnell">4,00 Euro </td>
    <td headers="zone3 eins">5,00 Euro </td>
    <td headers="zone3 gruppe">7,00 Euro </td>
  </tr>
  <tr>
    <th id="zone4">Zone 4</th>
    <td headers="zone4 spar">1,50 Euro </td>
    <td headers="zone4 ferien">2,50 Euro </td>
    <td headers="zone4 normal">4,00 Euro </td>
    <td headers="zone4 schnell">5,00 Euro </td>
    <td headers="zone4 eins">7,00 Euro </td>
    <td headers="zone4 gruppe">9,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:left;
  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

Fahrpreise für den Bus in Hintertupfingen
  Spartarif Ferien-Ticket Normaltarif Schnellbus 1. Klasse Gruppentarif
Zone 1 0,50 Euro 0,75 Euro 1,00 Euro 1,50 Euro 2,50 Euro 3,50 Euro
Zone 2 0,75 Euro 1,00 Euro 1,50 Euro 2,50 Euro 3,50 Euro 5,00 Euro
Zone 3 1,00 Euro 2,00 Euro 3,00 Euro 4,00 Euro 5,00 Euro 7,00 Euro
Zone 4 1,50 Euro 2,50 Euro 4,00 Euro 5,00 Euro 7,00 Euro 9,00 Euro