zur pfirsichmelba Startseite. .

komplexe Datentabellen leichter lesbar machen von Alexander Farkas

Datentabellen sollten grundsätzlich mit den Attributen headers und id ausgezeichnet sein, um ein sinnvolles Vorlesen und Navigieren in diesen für Screenreader-User zu ermöglichen.

Dem "normalen" User bringt diese Auszeichnung dagegen keinen Mehrwert. Obwohl diese Informationen auch für ihn manchmal hilfreich sein könnten. Gerade bei komplexen, relativ langen Tabellen kann der Benutzer schon mal die Übersicht verlieren. In der Spalte bzw. Zeile verrutschen oder nicht richtig erkennen, auf welche Kopfzellen sich die einzelnen Tabellenzellen beziehen.

Ein kleines JavaScript kann ihm dabei helfen, in dem es die zugeordneten Kopfzellen anzeigt und einen Tooltip zur Tabelle angibt, sobald er die Maus über eine Datenzelle bewegt.

Spesenkosten-Abrechnung
Speisen Hotels Fahrtkosten Summen
Gesamt 196.27 € 442.00 € 162.00 € 800.27 €
Hamburg
12.08.98 37.74 € 112.00 € 45.00 €
13.08.98 27.28 € 112.00 € 45.00 €
Summen 65.02 € 224.00 € 90.00 € 379.02 €
Berlin
14.08.98 96.25 € 109.00 € 36.00 €
15.08.98 35.00 € 109.00 € 36.00 €
Summen 131.25 € 218.00 € 72.00 € 421.25 €

Einbau und Verwendung des Scripts

JavaScript-Aufruf

Um das Script auszuführen, muss es folgendermaßen aufgerufen werden:

var samp = new semanticTable('CSS1-3 Selektor der Tabelle'[,{Optionname:"wert"}]);

Der erste Parameter enthält den CSS-Selektor der Tabelle (zwingend), der zweite kann mit verschiedenen Optionen gefüttert werden.

Das Script hat folgende Optionen:

  • showsTip: "1" (default) = zeigt einen Tooltip || "0" = es wird kein Tooltip erzeugt
  • colorizecol: "2" (default) = zeichnet bei mouseover die Kopfzellen und falls vorhanden die Zeile bzw. jede einzelne Tabellenzelle der jeweiligen Spalte mit class="rowover" bzw. "colover" aus || "1" wie "2" nur das keine "colover" Auszeichnung (ausgenommen bei Kopfzellen) stattfindet (Performance; eignet sich, um nur die Kopfzellen zu ändern) || "0" gar keine Auszeichnung (natürlich auch Performance)
  • comparehead: "Zum Vergleich: " (default) (Es kann auch HTML verwendet werden)
  • calc: "1" (default) = soll berechnen || "0" = soll nicht berechnen
  • calcmethode: "dif" (default) Differenz berechnen || "per" Prozentberechnung
  • calctext: "Differenz: " (default) (Es kann auch HTML verwendet werden)

Die "Manipulation" der obigen Tabelle mit der id samp1 wurde beispielsweise so aufgerufen:

var samp = new semanticTable('#samp1',{calcmethode:"per",calctext:"Anteil an sämtlichen Spesenposten: "});

HTML-Struktur der Tabelle:

  • Eine semantisch korrekt ausgezeichnete Tabelle mit den Attributen headers/id (zwingend), sowie optional scope (für die Einfärbung; ansonsten werden ausschließlich die Kopfzelle mit class="colover" ausgezeichnet; Weglassen entspricht also colorizecol: "1") und optional abbr.
  • Für einen Vergleich muss die zu ersetzende Spalte/Zeile als ersten class-Wert einen Namen nach folgender Syntax besitzen cw unmittelbar gefolgt von der id, der zu vergleichenden Spalte/Zeile (nicht vertauschen). Es kann nur eine Spalte/Zeile ausgetauscht werden.

HTML-Struktur des erzeugten Tooltips:

An das body wird folgende Struktur angehangen:

<div id="TableTIP"> Inhalt der Kopfzellen bzw. des abbr-Attributes: <strong>Inhalt der jeweiligen Datenzelle</strong> <div class="compare"><em>Wert von comparehead</em> Inhalt der ausgetauschten Kopfzelle: <strong>Inhalt der ermittelten Vergleichszelle</strong> <div class="sTcalc">Wert von calctext <strong>berechneter Wert</strong> </div> </div> </div>

Das Script als Download:

Bibliographie

. top