Webkit ParagraphTabelle in Seite einfügen

Tabellen können wie andere Inhaltselemente auch in Seiten eingefügt werden. Dabei gibt es vielfältige Gestaltungs- und Darstellungsformen, die je nach Einsatzzweck variiert werden können.

Unterhalb der Anzeigevariante gibt es weitere Anpassungsoptionen für Tabellen. Die Option Alphabetische Ankerliste anzeigen fügt oberhalb der Tabelle eine klickbare Buchstabenreihe von A bis Z ein, um innerhalb einer ausgewählten Spalte zu Einträgen mit den entsprechenden Anfangsbuchstaben zu springen. Dabei wird jeweils der erste Eintrag mit dem entsprechenden Anfangsbuchstaben als Sprunganker in der Tabelle genutzt. Daher ist es notwendig, dass die Einträge der Tabelle in dieser Spalte alphabetisch sortiert sind, da nur so gewährleistet werden kann, dass alle Einträge mit demselben Anfangsbuchstaben untereinander abgebildet werden und somit über den Sprung erreichbar sind.

Diese Funktion ist nicht kompatibel mit der Darstellungsform Karten. Wird die Funktion ausgewählt, muss darunter mit dem Alphabetischen Anker eine Spalte definiert werden, in der mittels des Alphabets gesprungen werden soll (vorzugsweise die erste Spalte). Dafür wird jede in der Tabelle enthaltene Spalte am Ende des Paragraphen aufgelistet.

Die Option Tabelle hat Zeilenlinks ermöglicht es, eine Spalte zu definieren, die Links enthält. Jede Tabellenzeile wird daraufhin klickbar und führt jeweils zur Seite, die in der Zeile verlinkt ist. Wird die Funktion ausgewählt, muss nachfolgend bei Zeilenlink die Spalte ausgewählt werden, welche den Link enthält. Grundsätzlich ist nur ein Link pro Tabellenzeile zulässig. Die Spalte Linktext wiederum definiert die Spalte, deren Text beim Schweben über der Zeile angezeigt werden soll. Es empfiehlt sich außerdem, in den nachfolgenden Optionen für die Spalte mit den Links die Option Nicht sichtbar auszuwählen, da auf diese Weise die Tabellenzeile zwar weiterhin klickbar ist, die Spalte mit dem Hyperlink (und damit die Adresse des Linkziels) im Frontend jedoch unsichtbar wird, was visuell ansprechender aussieht. Jede Zeile hat dann nur noch den üblichen roten Pfeil, der eine Verlinkung symbolisiert.

Mit der Funktion “Barrierefreiheit: Diese Tabelle als Liste auszeichnen” werden Tabellen als Listen gekennzeichnet. Empfehlenswert ist das bei langen Auflistungen, beispielsweise bei Namenslisten. Die Einstellung verändert nichts an der Darstellung oder Funktionalität der Tabelle, aber hilft der Barrierefreiheit, da Screenreader dann besser mit der Tabelle interagieren können.

Die Option Durchsuchbar erzeugt eine Suchleiste über der Tabelle, in der jede ausgewählte Spalte nach beliebigen Texteingaben durchsucht werden kann. 

Filterbar wiederum erzeugt für jede ausgewählte Spalte ein Auswahlmenü über der Tabelle. Der komplette Inhalt jeder Zelle in den entsprechenden Spalten wird automatisch als mögliches Filterkriterium hinzugefügt, mit Ausnahme von doppelt vorkommenden Inhalten. Wird eine Spalte nach einem Kriterium gefiltert, so werden nur noch die Zeilen der Tabelle angezeigt, die das Filterkriterium erfüllen.

Durch Sortierbar lässt sich die Tabelle anhand jeder Spalte, in der diese Option aktiviert wurde, alphabetisch sortieren. Spaltentitel verstecken sorgt dafür, dass die Überschrift in der Kopfzeile der Tabelle für diese Spalte ausgeblendet wird. Dadurch ist die Funktion Sortierbar für diese Spalte allerdings nicht mehr verfügbar. 

Mit der Option Nicht sichtbar lassen sich Spalten im Frontend ausblenden. Wie oben beschrieben wird dies häufig dafür genutzt, die Spalte mit dem Zeilenlink unsichtbar zu machen. Ein weiterer denkbarer Anwendungsbereich ist in Kombination mit den Funktionen Durchsuchbar oder Filterbar: So könnten für die jeweilige Zeile unter anderem Schlagworte angegeben werden, die zwar nicht offen sichtbar sind, nach denen aber trotzdem über die Filteroption oder die Suchleiste gesucht werden kann. Damit kann in großen Tabellen die Auffindbarkeit von Daten erleichtert werden, während gleichzeitig die Übersichtlichkeit gewahrt wird. Sind mehrere Schlagworte innerhalb einer Zeile gewünscht, kann eine weitere Filteroption hinzugefügt werden, indem die Schlagworte durch zwei vertikale Striche getrennt werden (Format “Schlagwort A||Schlagwort B”).

Mit Breite kann die Breite der einzelnen Tabellenspalten manuell angepasst werden. Wenn nichts eingetragen wird, erhält jede Tabellenspalte dieselbe Breite. Falls es Spalten mit sehr viel Inhalt gibt, ist es sinnvoll, mit der Breite dieser Spalte zu experimentieren, um die Texte besser lesbar darzustellen.

Für die mobile Darstellung der Seite kann es zudem Sinn machen, Prozentwerte zu wählen, die zusammen über 100% hinausgehen. Gerade bei textlastigen Tabellen ist die Darstellung auf mobilen Endgeräten in der Standardeinstellung häufig sehr verzerrt, da versucht wird, alle Spalten gleichzeitig darzustellen. Werden aber Prozentwerte von mehr als 100% gewählt, wird der Inhalt, der über 100% hinausgeht, auf mobilen Endgeräten durch seitliches Scrollen verfügbar. Wird beispielsweise bei einer Tabelle, welche vier Spalten enthält, jeder Spalte 50% zugewiesen, sind auf der mobilen Ansicht die ersten beiden Spalten direkt sichtbar, während die beiden weiteren Spalten durch seitliches Scrollen sichtbar werden. Für die Desktop-Ansicht ist nur das Verhältnis der Werte zueinander entscheidend, da immer alle Spalten dargestellt werden.