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 |
Beispiel: Tabelle mit class=“nobackground“
Mit der class="nobackground" wird bewirkt, dass 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 |
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 |
Beispiel: Tabelle mit class=“filtertable“
Mit der class="filtertable" wird eine Filter-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 |