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.

Zuweisung von Überschriften zu Spalten und Zeilen in Datentabellen

Überschriften in Datentabellen können kompletten Spalten oder Zeilen zugewiesen werden.

HTML

<table>
  <caption>Fahrpreise für den Bus in Hintertupfingen</caption>
  <tr>
    <td> </td>
    <th scope="col">Spartarif</th>
    <th scope="col">Ferien-Ticket</th>
    <th scope="col">Normaltarif </th>
    <th scope="col">Schnellbus</th>
    <th scope="col">1. Klasse </th>
    <th scope="col">Gruppentarif</th>
  </tr>
  <tr>
    <th scope="row">Zone 1 </th>
    <td>0,50 Euro </td>
    <td>0,75 Euro </td>
    <td>1,00 Euro </td>
    <td>1,50 Euro </td>
    <td>2,50 Euro </td>
    <td>3,50 Euro </td>
  </tr>
  <tr>
    <th scope="row">Zone 2 </th>
    <td>0,75 Euro </td>
    <td>1,00 Euro </td>
    <td>1,50 Euro </td>
    <td>2,50 Euro </td>
    <td>3,50 Euro </td>
    <td>5,00 Euro </td>
  </tr>
  <tr>
    <th scope="row">Zone 3 </th>
    <td>1,00 Euro </td>
    <td>2,00 Euro </td>
    <td>3,00 Euro </td>
    <td>4,00 Euro </td>
    <td>5,00 Euro </td>
    <td>7,00 Euro </td>
  </tr>
  <tr>
    <th scope="row">Zone 4 </th>
    <td>1,50 Euro </td>
    <td>2,50 Euro </td>
    <td>4,00 Euro </td>
    <td>5,00 Euro </td>
    <td>7,00 Euro </td>
    <td>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