Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dr. Detlef Groth 23. November 2007

Komfort mit HTML-Tabellen

Kein Beitragsbild

Tabellen sind wich­ti­ge Struktur-Elemente für die Webseite. Neben ihrer mitt­ler­wei­le ver­pön­ten Verwendung als Design-Hilfe die­nen sie vor allem der Darstellung von nume­ri­schen oder kate­go­ria­len Daten. Um bei einer Präsentation der Fakten Hilfestellung zu geben, exis­tie­ren im Internet eine gan­ze Reihe von Lösungen zum Filtern, Paginieren, Einfärben oder Scrollen der Tabelle. Wir wol­len die­se Techniken hier auch für den wenig erfah­re­nen Nutzer zugäng­lich machen.

Markup spa­ren
Ein Problem beim Erzeugen von HTML-Tabellen besteht in den vie­len für die Erstellung der Tabelle not­wen­di­gen Markup-Tags. So ver­braucht die fol­gen­de HTML-Tabelle für die Präsentation von 3 Zeilen und 4 Spalten bei 60 Textzeichen 150 Zeichen an HTML-Markup.

 HTML-Tabelle
 <table>
 <tr><th> head1 </th><th> head2 </th><th> head3 </th><th> head4 </th></tr>
 <tr><td> val1a </td><td> val2a </td><td> val3a </td><td> val3b </td></tr>
 <tr><td> val1b </td><td> val2b </td><td> val3b </td><td> val3c </td></tr>
 </table>

 Wiki-Tabelle
 <pre>
 head1 | head2 | head3 | head4 ||
 val1a | val2a | val3a | val3b ||
 val1b | val2b | val3b | val3c ||
 </pre>

Einfacher ist das Wiki-Markup. In obi­gem Wiki-ähn­li­chen Markup haben wir ledig­lich 15 Zeichen, das heißt ein Zehntel der für den HTML-Code benö­tig­ten Menge, ver­braucht. Die Tabelle ist so gut les­bar, dass man sie eigent­lich gar nicht wei­ter auf­be­rei­ten müss­te.

Der Erfolg der Wikis ist auch in der ein­fa­chen Erstellung von Tabellen bei redu­zier­tem Verbrauch an Markup-Zeichen begrün­det. Wir wol­len die­se Tabelle hier trotz­dem mit­tels JavaScript-Code in eine HTML-Tabelle umwan­deln, um spä­ter noch ande­re Plugins für die Tabelle anwen­den zu kön­nen. Zu die­sem Zweck erstel­len wir nun ein Tabellen-Plugin zur Umwandlung von Wiki-Tabellen-Code in HTML-Code für die jsComponents. Die Verwendung des JSWikiTable-Plugins in der Webseite kann dann ohne eine Zeile von JavaScript-Code erfol­gen.

JSWikiTable-Plugin
Das Einbinden eines jsComponents-Plugins erfolgt durch das Einschließen des betref­fen­den HTML-Bereiches mit einem Div-Element der Klasse JSPluginName und dem Bereitstellen einer JavaScript-Funktion mit dem glei­chen Namen. Dieser Funktion wird durch die jsComponents auto­ma­tisch das Div-Element als Parameter über­ge­ben. Unser HTML-Code sieht dem­zu­fol­ge wie folgt aus:

 <div class="JSWikiTable">
 <pre>
 Markup | Erstellung | Lesbarkeit | Zeichen ||
 HTML | schwierig | gering | viele ||
 Wiki | leicht | hoch | wenig ||
 </pre>
 </div>

Der JavaScript-Code ist leicht ver­ständ­lich. Innerhalb der Funktion JSWikiTable(element) wird nach dem pre-Tag gesucht und des­sen Inhalt in der Variable cnt gespei­chert. Durch Splitten die­ses Textes in Zeilen- und Spalten-Arrays kann die HTML-Tabelle mit­tels Methoden des Document Object Models (DOM) erstellt wer­den. Wichtig ist dabei die Verwendung des tbo­dy- und thead-Knotens, um die Tabelle auch im Internet Explorer anzu­zei­gen. Nach dem erfolg­rei­chen Einhängen der neu erstell­ten Tabelle in das Dokument set­zen wir die dis­play-Eigenschaft unse­res pre-Elementes auf none. Dadurch wird sicher­ge­stellt, dass ein Browser, der mit dem Verfahren Probleme hat, wenigs­tens die “Rohdaten” des Pre-Elementes anzeigt. Nun der JavaScript-Code unse­res JSWikiTable-Plugins:

 function JSWikiTable (element) {
 var pre = element.getElementsByTagName("pre")[0];
 var cnt = pre.innerHTML;
 var table = document.createElement("table");
 table.className = "data";
 var tbody = document.createElement("tbody");
 var thead = document.createElement("thead");
 var x = 0 ;
 var lines = cnt.split(/\|\|/);
 for (var x = 0 ; x < lines.length; x++) {
 var tr = document.createElement("tr");
 var cols = lines[x].split(/\|/);
 for (var y = 0 ; y < cols.length;y++) {
 if (x == 0) {
 var th = document.createElement("th");
 th.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(th);
 } else {
 var td = document.createElement("td");
 td.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(td);
 }
 if (x == 0) {
 thead.appendChild(tr);
 } else {
 tbody.appendChild(tr);
 }
 }
 }
 table.appendChild(thead);
 table.appendChild(tbody);
 pre.parentNode.insertBefore(table,pre);
 pre.style.display = "none";
 }

Neben der jsComponents-JavaScript-Datei muss das neu erstell­tes Plugin eben­falls im Kopf der HTML-Datei gela­den wer­den. Hier der voll­stän­di­ge HTML-Code unse­res Beispiels jswikitable-code.html und das Beispiel selbst: jswikitable.html

Diagramme erstel­len
In jedem moder­nen Tabellen-Kalkulationsprogramm wer­den die Daten einer Tabelle auch für die Erstellung von Diagrammen genutzt. Auch mit HTML- oder Wiki-Tabellen ist das mög­lich.

Screenshot

Wir ver­wen­den die Werte der 2. Spalte (X) einer Tabelle im Wiki-Format um ein Balkendiagramm zu erzeu­gen. Unser Beispiel-HTML-Code:

 <div class="JSBarChart2">
 <pre>
 Row1 | 32 ||
 Row2 | 64 ||
 Row3 | 10 ||
 Row4 | 21 ||
 Row5 | 12 ||
 </pre>
 </div>

Im JavaScript-Code für das Plugin (jsbarchart2.js.html) wer­den die Werte der 2. Spalte in einen String der Länge X umge­wan­delt und die­ser String wird in ein Code-Element ein­ge­fügt. Durch Auswählen eines mono­s­pa­ced-Fonts wird eine pro­por­tio­na­le Wiedergabe der Text-Länge ereicht. Im CSS-Code wer­den des­wei­te­ren die Werte für back­ground-color und color gesetzt. Beide soll­ten natür­lich gleich sein, um den Text unsicht­bar zu machen. Außerdem kön­nen noch die Eigenschaften für die CSS-Klassen td.max, td.min und td.middle auf unter­schied­li­che Farben gesetzt wer­den. Nachfolgend ein Beispiel-CSS-Code für unter­schied­li­che Farben:

 code.middle {
 background-color: #aaa;
 color: #aaa;
 }
 code.max {
 background-color: #faa;
 color: #faa;
 }
 code.min {
 background-color: #aaf;
 color: #aaf;
 }

Das Beispiel: jsbarchart2.html

Sortieren, Paganieren, …: Ein Framework wäh­len
Für unse­re wei­te­ren Beispiele exis­tie­ren bereits leis­tungs­fä­hi­ge Implementierungen im Internet, die wir für unse­re Zwecke benut­zen wer­den. Besonders schön und leicht­ge­wich­tig ist das Tablesorter-Plugin von Christian Bach für das jque­ry-Framework. Im September hat John Resig, der jque­ry-Autor, eine Sammlung von jque­ry-Plugins als jque­ry-UI ver­öf­fent­licht. In die­sem ist auch das Tablesorter-Plugin ent­hal­ten. Ein Vorteil des jque­ry-UI-Frameworks ist im Vergleich etwa zu dem hier kürz­lich vor­ge­stell­ten Yahoo User Interface (YUI), dass nur wenig JavaScript-Code not­wen­dig ist, um die Komponenten zu initia­li­sie­ren. Die Daten blei­ben im HTML-Code, wäh­rend bei den Beispielen der YUI-Komponenten zu beob­ach­ten ist, dass die Trennung von Code und Daten nicht rea­li­siert wird. Die Daten für die Tabelle befin­den sich bei den YUI-Beispielen im JavaScript-Code.

Zebra-Tabelle
Das Erstellen einer Zebra-Tabelle mit Hilfe des jque­ry-Frameworks ist ein­fach. Zwar erhält auch das Tablesorter-Plugin ein Zebra-Widget, aber, um die prin­zi­pi­el­le Arbeit mit dem jque­ry-Framework zu ver­deut­li­chen, wol­len wir unser Zebra-Plugin selbst erstel­len. Unsere JSZebraTable-Klasse könn­te kaum kür­zer sein. Wir benut­zen $-Funktion von jque­ry, um die HTML-Knoten zu spei­chern und die child­ren-Funktion, um die not­wen­di­gen Elemente mit­tels CSS-Selektoren aus­zu­wäh­len. Danach wer­den durch die addClass-Funktion den ein­zel­nen Tabellen-Zeilen die Klassen odd und even zuge­wie­sen.

 function JSZebraTable(element) {
 var table = $(element).children('table:first');
 var tbody = $(table).children('tbody:first');
 $(tbody).children('tr:odd').addClass('odd');
 $(tbody).children('tr:even').addClass('even');
 $(table).addClass('tablesorter');
 }

Für die Gestaltung der Tabelle benut­zen wir die CSS-Styles des Blue-Themas des Tablesorter-Plugins, wel­ches im Kopfbereich der HTML-Datei gela­den wird. Das funk­tio­nie­ren­de Beispiel: jszebratable.html, bezie­hungs­wei­se der HTML-Code: jszebratable-code.html .

Um das Einbinden der ver­schie­de­nen Plugins im Header-Bereich der HTML-Dateien zu erleich­tern, haben wir die im Ordner jsc-plugins lie­gen­den JavaScript-Dateien zu einer gemein­sa­men Datei jstablecomponents.js ver­ei­nigt.

Sortieren
Dieses Gebiet fällt natür­lich in den Zuständigkeitsbereich des Tablesorter-Plugins. Zwar exi­si­tiert auch inner­halb des jsComponents-Frameworks ein Tabellensortierer, aber die Variante von Christian Bach ist wesent­lich leis­tungs­fä­hi­ger. Um eine Tabelle sor­tier­bar zu machen, schlie­ßen wir die Tabelle ein­fach in ein Div-Element der Klasse JSSortTable ein. Im Kopfbereich müs­sen die ent­spre­chen­den JS-Dateien ein­ge­bun­den wer­den. Der not­wen­di­ge JavaScript-Code zur Implementierung ist auch hier mini­mal:

 function JSSortTable(element) {
 var table = element.getElementsByTagName("table")[0];
 $(table).addClass('tablesorter');
 $(table).tablesorter({widgets:['zebra']});
 }

Das Beispiel in Aktion jssorttable.html, sowie der HTML-Code jssorttable-code.html. Zum Sortieren der Tabelle klickt man ein­fach auf die Spaltenköpfe. Die Pfeile zei­gen an, ob ab- oder auf­stei­gend sor­tiert wur­de. Stören die Zebrasteifen, kann man ein­fach die Stylesheet-Eigenschaft für die ent­spre­chen­den Tabellenzeilen auf Weiß set­zen: tr.odd td: { back­ground-color: #fff; }.

Will man von den erwei­ter­ten Möglichkeiten des Plugins, wie zum Beispiel einer vor­de­fi­nier­ten Sortierordnung, Gebrauch machen, muss man aller­dings doch etwas JavaScript-Code schrei­ben. Hinweise dazu fin­den sich auf der Demo-Seite des Plugins.

Externe Dateien in HTML-Tabellen umwan­deln
Wir wol­len nun grö­ße­re Datenmengen über­sicht­lich dar­stel­len. Um den glei­chen Datensatz in den Beispielen zu nut­zen, ohne die­sen immer wie­der in die HTML-Dateien hin­ein­ko­pie­ren zu müs­sen, wer­den wir eine Text-Datei anle­gen, bei der die ein­zel­nen Spalten durch Tabs von­ein­an­der getrennt sind. Mit Hilfe des jque­ry-Ajax-Requests laden wir die­se Datei in unse­re Webseite und wan­deln die Daten ähn­lich wie bei unse­rem JSWikiTable-Plugin in eine HTML-Tabelle um. Der Anfang unse­rer Beispieldatei students.tab

 Name Major Sex English Japanese Calculus Geometry
 Student01 Languages male 80 70 75 80
 Student02 Mathematics male 90 88 100 90
 Student03 Languages female 85 95 80 85
 Student04 Languages male 60 55 100 100

Damit wir die HTML-Tabelle spä­ter wei­ter ver­ar­bei­ten kön­nen, set­zen wir im Ajax-Request zum Laden die­ser Datei den async-Parameter auf fal­se. Dadurch wird sicher gestellt, dass die Tabelle kom­plett gela­den ist, bevor wir wei­te­re Komponenten auf die Tabelle anwen­den. Nachfolgend der JavaScript-Code für unser JSAjaxTable-Plugin:

 function JSAjaxTable(element) {
 var id = element.getAttribute("targetid");
 var url = element.getAttribute("datasrc");
 var cnt = $.ajax({
 url: url,
 async: false
 }).responseText;
 var target = document.getElementById(id);

 var table = document.createElement("table");
 table.className = "tablesorter";
 var tbody = document.createElement("tbody");
 var thead = document.createElement("thead");
 var x = 0 ;
 var lines = cnt.split(/\n/);
 for (var x = 0 ; x < lines.length; x++) {
 if (!lines[x].match(/[a-zA-Z0-9]/)) { continue ; }
 var tr = document.createElement("tr");
 var cols = lines[x].split(/\t/);
 for (var y = 0 ; y < cols.length;y++) {
 if (x == 0) {
 var th = document.createElement("th");
 th.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(th);
 } else {
 var td = document.createElement("td");
 td.appendChild(document.createTextNode(cols[y]));
 tr.appendChild(td);
 }
 if (x == 0) {
 thead.appendChild(tr);
 } else {
 tbody.appendChild(tr);
 }
 }
 }
 table.appendChild(thead);
 table.appendChild(tbody);
 target.appendChild(table);
 return ;
 }

Der HTML-Code zur Verwendung des Plugins ist kurz. Die ent­spre­chen­den JavaScript-Dateien wer­den im Head-Bereich gela­den und durch die tar­getid und datas­rc-Attribute wer­den die not­wen­di­gen Parameter an den Ajax-Request über­mit­telt.

 <div class="JSAjaxTable" targetid ="tableid" datasrc="students.tab"> </div>
 <div class="JSSortTable">
 <div id="tableid"> </div>
 </div>

Der kom­plet­te HTML-Code jsajaxtable-code.html und das Beispiel selbst jsajaxtable.html.

Paginieren
Größere Datensätze die nicht auf den Bildschirm pas­sen, sol­len häu­fig durch Vorwärts- und Rückwärts-Links zu navi­gie­ren sein. Man nennt die­ses Verfahren auch Paginieren der Tabelle. Dazu ver­fügt der Tablesorter von Christian Bach über ein Pager-Plugin. Wir bin­den im Kopfbereich der HTML-Datei wie­der die not­wen­di­gen JavaScript-Dateien und die CSS-Thema-Datei ein. Die Daten wer­den mit Hilfe des soeben beschrie­be­nen JSAjaxTable-Plugins gela­den und das Ziel-Element, in das die Tabelle ein­ge­fügt wird, wird von einem Div-Element der Klasse JSSortPagerTable ein­ge­schlos­sen:

 <div class="JSAjaxTable" targetid="tableid" datasrc="students.tab"> </div>
 <div class="JSSortPagerTable">
 <div id="tableid"> </div>
 </div>

Der Code für die ent­spre­chen­de JavaScript-Klasse jssortpagertable.js.html und das funk­tio­nie­ren­de Beispiel jssortpagertable.html.

Filtern
Noch wich­ti­ger als Funktionen zum Paginieren oder Sortieren ist sicher­lich das Filtern von Daten durch bestimm­te Attribute. Leider gibt es dafür noch kei­ne zufrie­den­stel­len­de Lösung mit­tels eines jque­ry-Plugins. Wir ver­wen­den des­we­gen den aus­ge­zeich­ne­ten HTML Table Filter Generator von Max Guglielmi. Unser Plugin über­prüft zuerst ob für die ent­spre­chen­de Tabelle schon ein ID-Attribut exis­tiert. Wenn dies nicht der Fall ist, wird ein sol­ches für das Tabellen-Element gene­riert. Danach wird die Tabelle mit­tels der Funktion setFilterGrid(id); initia­li­siert.

 var JSFILTERTABLE_CNT = 0 ;
 function JSFilterTable(element) {
 var table = element.getElementsByTagName("table")[0] ;
 var id = "ftable"+JSFILTERTABLE_CNT ;
 JSFILTERTABLE_CNT = JSFILTERTABLE_CNT+1;
 if (element.getAttribute("id")) {
 id = "ftable"+element.getAttribute("id");
 }
 table.setAttribute("id",id);
 setFilterGrid(id);
 }

Der Benutzer der Webseite kann über den Spaltenköpfen Suchtext oder Ausdrücke wie “> 80” ein­ge­ben und nach dem Betätigen der Enter-Taste wird der Datensatz anhand der ein­ge­ge­be­nen Kriterien gefil­tert. Hier der HTML-Code und das Beispiel.

Screenshot

Scrollen
Für das Scrollen von HTML-Tabellen exis­tie­ren im Internet eine gan­ze Reihe von Implementierungen. Leider funk­tio­niert die ein­fa­che Lösung, die CSS-Eigenschaft over­flow für das Tbody-Element der Tabelle auf auto zu set­zen, nur bei den Mozilla-Browsern. Der IE dage­gen über­nimmt die eigent­lich für das gesam­te Tbody-Element vor­ge­se­he­ne Höhe für jede Tabellenzeile und Opera igno­riert ein­fach die over­flow-Angabe für das Tbody-Element. Das Beispiel jsscrolltable-moz.html.

 <style>
 div.JSScrollTable tbody {
 height: 400px;
 overflow: auto;
 }
 </style>
 </head>
 <body>

 <div class="JSAjaxTable" targetid="tableid" datasrc="students.tab"> </div>
 <div class="JSScrollTable">
 <div id="tableid"> </div>
 </div>

Komplexere CSS-Ansätze wie der von Stu Nicholls haben den Nachteil, dass die Spaltenbreite vor­her für jedes Th-Element defi­niert wer­den muss. Außerdem muss zuviel spe­zi­fi­scher, nur für die kon­kre­te Tabelle nutz­ba­rer CSS-Code geschrie­ben wer­den. Nicholls zeigt uns aber einen Weg, um unser Ziel einer scroll­ba­ren Tabelle zu errei­chen. Wir bedie­nen uns dazu eines wei­te­ren klei­ne­ren jque­ry-Plugins. Das Scrollbare HTML-Tabellen-Plugin unter­stützt neben den Mozilla-Browsern auch den Internet Explorer. Durch das Erweitern des Plugins für den Opera-Browser mit­tels Umschreiben des oben erwähn­ten CSS-Codes in JavaScript-Code errei­chen wir, dass unse­re Tabelle auch in die­sem Browser gescrollt wer­den kann. Das in allen drei Browsern funk­tio­nie­ren­de Beispiel jsscrolltable.html

Weitere Tabellen-Plugins
Für das jque­ry-Framework exis­tie­ren im Internet wei­te­re leis­tungs­fä­hi­ge Plugins. Ein Beispiel dafür ist Ingrid. Neben der Möglichkeit des Scrollens, kön­nen die Tabellen-Daten auch ser­ver­sei­tig sor­tiert und pagi­niert wer­den. Weitere jque­ry-Plugins für Tabellen sind sicher­lich eine gute Anlaufstelle, falls nach die­sem Artikel noch Luxus-Wünsche offen blei­ben.

Zusammenfassung
Die vor­ge­stell­ten Lösungen zum kom­for­ta­blen Darstellen von HTML-Tabellen sind ein­fach in die eige­ne Webseite ein­zu­bin­den und las­sen sich in vie­len Fällen auch mit­ein­an­der kom­bi­nie­ren. Der gesam­te JavaScript- und HTML-Code kann hier her­un­ter­ge­la­den wer­den: drweb-luxus-mit-tabellen-beispiele.zip. Hinweise und Vorschläge zum Artikel bit­te wie üblich an . (tm)

Erstveröffentlichung 23.11.2007

Dr. Detlef Groth

Dr. Detlef Groth, von Beruf Biochemiker und IT-Konsultant, arbeitet als Bioinformatiker und Autor in Potsdam und Umgebung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.