Tabellen
Verwenden Sie Tabellen ausschließlich zur tabellarischen Darstellung von Daten. Aus Sicht der Usability und User Experience eignen sich Tabellen nicht zur Gestaltung von Seiteninhalten.
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: Normale Tabelle im FAU Elemental Design
Tabellenanpassungen im Code-Editor
Die folgenden Tabellenanpassungen über CSS-Klassen sind möglicherweise veraltet und funktionieren nur noch im Klassik-Editor oder im Block-Editor über die Code-Ansicht, welche bei Aktivierung des Block-Editors jedoch standardmäßig nicht mehr verfügbar ist. In Ausnahmefällen kann der Code-Editor über den Websupport aktiviert werden.
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 |
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 |
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 |
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 |