Navigation

Tabellen

Tabellen können für tabellarische Daten verwendet werden.

Keine Layout-Tabellen

Zu beachten ist dabei, dass Tabellen keinesfalls dazu verwendet werden sollten, Inhalte zu gestalten. Die Positionierung von Inhalten mit Hilfe von Tabellen ist in Hinblick auf die zunehmende Nutzung von Handys nicht sinnvoll, da dort die Darstellung auf kleine Auflösungen beschränkt ist und somit auch Inhalte nicht so erscheinen, wie auf einem großen Monitor.

Das Theme stellt zur Anpassung der Optik von Tabelle einige CSS-Klassen bereit. Diese erlauben es, die wechselnden Farben abzuschalten und die Tabelle automatisch sortierbar zu machen.

 

Beispiel: Normale Tabelle ohne Styling

Title 1 Title 2 mit Link
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«.
Inhalt Zeilenüberschrift Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«.

Beispiel: Tabelle mit class=“nooddcolor“

Mit der class="nooddcolor" wird die wechselnde Farbe zwischen den Zeilen unterdrückt.

Title 1 Title 2
Content 1 Zeilenüberschrift Content 2
Content 3 Zeilenüberschrift Content 4
Content 5 Zeilenüberschrift Content 6
Title 1 Title 2

Beispiel: Tabelle mit class=“nobackground“

Mit der class="nobackground" wird bewirkt, daß die Tabelle keine Hintergrundfarbe hat.

Title 1 Title 2
Content 1 Zeilenüberschrift Content 2
Content 3 Zeilenüberschrift Content 4
Content 5 Zeilenüberschrift Content 6
Title 1 Title 2

Beispiel: Tabelle mit class=“sorttable“

Mit der class="sorttable" wird eine Sortier-Möglichkeit aktiviert:

Keywords Impressions Clicks CTR Rank
silly tshirts 6,000 110 1.8% 22.2
desktop workspace photos 2,200 500 22% 8.9
arrested development quotes 13,500 900 6.7% 12.0
popular web series 8,700 350 4% 7.0
2013 webapps 9,900 460 4.6% 11.5
ring bananaphone 10,500 748 7.1% 17.3