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 Zeilen- und Spaltengruppen in Datentabellen

Überschriften in Datentabellen können auch Gruppen von Spalten und Zeilen zugewiesen werden.

HTML

<table>
  <colgroup span="1"></colgroup>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td> </td>
    <th scope="colgroup" colspan="2">Kinder</th>
    <th scope="colgroup" colspan="2">Erwachsene</th>
  </tr>
  <tr>
    <td></td>
    <th scope="col">Normaltarif </th>
    <th scope="col">Schnellbus und 1. Klasse </th>
    <th scope="col">Normaltarif</th>
    <th scope="col">Schnellbus und 1. Klasse </th>
  </tr>
  <tr>
    <th scope="row">Zone 1 </th>
    <td>1,00 Euro </td>
    <td>1,50 Euro </td>
    <td>1,50 Euro </td>
    <td>2,50 Euro </td>
  </tr>
  <tr>
    <th scope="row">Zone 2 </th>
    <td>1,50 Euro </td>
    <td>2,00 Euro </td>
    <td>2,50 Euro </td>
    <td>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