Hilfe:Tabellen
Inhaltsverzeichnis
Einführung - Warum wir Tabellen nutzen
Tabellen gehören zu den ältesten Methoden im Web um Informationen und Seitenelemente mehrdimensional anzuordnen. Damit ist es möglich Datenlisten strukturierter und übersichtlicher darzustellen als mit gewöhnlichen Listen. Gerade, wenn verschiedene Arten von Informationen zu einem Eintrag existieren, macht es Sinn, die in Tabellenform darzustellen.
Bis vor einigen Jahren war es auch üblich, mit Hilfe von Tabellen ganze Seiten zu designen. So konnten ursprünglich Seitenelemente nur mit Hilfe von Tabellen oder Frames nebeneinander dargestellt werden. Gerade die Tabellen waren so effektiv, dass noch heute viele Seiten so eingerichtet weren, obwohl es bessere Methoden gibt. Auch hier im KingWiki ist das unter Umständen noch der Fall. Jedoch soll und wird das Stück für Stück angepasst.
Der Quelltext für Tabellen wird jedoch sehr schnell sehr komplex. Daher sollte man sich den Einsatz gut überlegen. Mitunter ist auch eine einfache Liste hilfreich und leichter erstellt. In einigen Fällen lohnt es sich sogar, ganz auf eine Auflistung zu verzichten, und die Inhalte im Fließtext besser zu beschreiben.
Grundlagen - Die einfachen Tabellen
Jede Tabelle beginnt mit einer geschweiften Klammer {, gefolgt von einem senkrechten Strich |. Sie endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die beiden Zeichen müssen jeweils am Anfang einer Zeile stehen, sonst wird die Zeichenfolge nicht als Tabelle interpretiert.
Jede Zelle beginnt entweder mit einem einzelnen senkrechten Strich |, wenn dieser am Zeilenanfang steht, oder mit zwei senkrechten Strichen ||, wenn Attribute für die Zelle mitgegeben werden (siehe Layout und Formatierungen weiter unten), oder nicht am Anfang der Zeile stehen.
Die simpelste Form, eine Tabelle mit zwei Zellen sieht folgendermaßen aus:
| Quelltext | Ergebnis | ||
|---|---|---|---|
{|
| Zelle 1
| Zelle 2
|}
|
|
Eine neue Tabellenzeile wird mit dem senkrechten Strich gefolgt von einem Bindestreich |- erzeugt.
| Quelltext | Ergebnis | ||||
|---|---|---|---|---|---|
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
|
|
Will man etwas Platz sparen, kann man die einzelnen Zellen einer Tabellenzeile auch nebeneinander schreiben. In dem Fall benötigt es zwischen den Zellen aber zweier senkrechter Striche ||. Mehrere Zeilen mit mehreren Spalten sehen so aus:
| Quelltext | Ergebnis | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|
||Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
|
|
- Hinweis
- Zum Abschluss der Tabelle braucht es keine Darstellung einer Tabellenzeile
|-vor einem|}ist also falsch und sollte vermieden werden.
Will man einige Zellen als Überschriften gestalten, so geht das mit einem Ausrufezeichen ! anstelle der senkrechten Striche. In dem Fall wird der Inhalt der Zelle fett und zentriert dargetstellt.
Ein Beispiel ist die vereinfachte Form der Opfer des Kirmesmörders:
Der entsprechende Quelltext sieht so aus:
{|class="wikitable"
|-
! Name
! Todeszeitpunkt
! Ort
|-
! [[Linda Gray|Linda Gray]]
| Sommer {{SKU|1969}} || [[Joyland Park]], [[Heaven's Bay]], [[North Carolina]]
|-
! [[Darlene Stamnacher|Darlene Stamnacher]]
| [[29. Juni]] {{SKU|1967}} || [[Maxton]], [[North Carolina]]
|-
! [[Eva Longbottom|Eva Longbottom]]
| [[04. Juli]] {{SKU|1965}} || [[Santee]], [[South Carolina]]
|-
! [[Claudine Sharp|Claudine Sharp]]
| [[02. August]] {{SKU|1963}} || [[Rocky Mount]], [[North Carolina]]
|-
! [[Delight Mowbray|Delight Mowbray]]
| [[31. August]] {{SKU|1961}} || [[Waycross]], [[Georgia]]
|}
Zwei Besonderheiten gibt es hier außerdem:
- Durch
class="wikitable"wird die Tabelle vorformatiert. Attribute wie Hintergrundfarben, Ausrichtung, Rahmenfarbe und -breite erhalten so einen einheitlichen Wert. Um alle Tabellen im KingWiki möglichst einheitlich darzustellen, sollte nach Möglichkeit diese Option immer mit verwendet werden. Ausnahmen sind zum Beispiel transparente Tabellen, also Tabellen ohne Rahmen oder fester Hintergrundfarbe. Mehr zu Formatierungen gibt es weiter unten. - Durch den Einsatz von
wird verhindert, dass an der Stelle ein Leerzeichen, aber kein Zeichenumbruch erstellt wird. Hilfreich vor allem dann, wenn Elemente auf jeden Fall nebeneinander stehen sollen, egal wie klein die Tabellenzelle wird.
Das reicht auch schon als Einstieg. Die Mehrheit der Tabellen kann mit Hilfe der bislang vorgestellten Elemente erstellt werden. Die erweiterten Elemente wie Attribute, Klassen, Stylesheets und so weiter listen wir im folgenden Stück für Stück auf.
Tabellenlayouts
- Hinweis
- Grundkenntnisse im Bereich CSS sind ab dem Punkt Formatierungen von Nöten.
Verbundene Tabellenzellen
Manchmal ist es hilfreich, eine Zelle über mehrere Spalten oder mehrere Zeilen aufzuspannen. Dann, wenn zum Beispiel eine Überschrift für mehrere Spalten gilt, oder eine Zeile den oberen vom unteren Tabelleninhalt optisch abtrennen soll, ohne eine neue Tabelle erzeugen zu müssen.
colspan: Spalten überspannend
| A | B | C |
| eine Zeile | ||
{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}
rowspan: Zeilen überspannend
| A | eine Spalte |
| B | |
| C |
{| class="wikitable"
| A
| rowspan="3"| eine Spalte
|-
| B
|-
| C
|}
| führende Spalte | A |
| B | |
| C |
{| class="wikitable"
| rowspan="3"| führende Spalte
| A
|-
| B
|-
| C
|}
colspan und rowspan kombiniert
| A | |
| B | eine Spalte |
| C | |
{| class="wikitable" style="text-align:center"
|colspan="2"| A
|-
| B
| rowspan="2"| eine Spalte
|-
| C
|}
Das gleiche geht natürlich auch für eine einzelne Zelle, die damit mehrere Spalten und mehrere Zeilen umspannt
| A | eine Zelle über zwei Spalten und zwei Zeilen | |
| B | ||
| C | D | E |
{| class="wikitable" style="float:right;"
|| A
|colspan="2" rowspan="2"| eine Zelle über zwei Spalten und zwei Zeilen
|-
|| B
|-
|| C
|| D
|| E
|}
- Ein Tipp
- Für verbundene Zellen hilft es bei komplexen Situationen sich die Zieltabelle aufzuzeichnen. Dann klappt es auch mit Arthur Elds Stammbaum.
Formatierungen I - Klassen
Mit Hilfe von Klassen können Tabellen einheitlich vorformatiert werden, ohne alle Formatierungsangaben einzeln anzugeben. Hier im KingWiki benutzen wir vor allem die Klasse wikitable. Die wird mit Hilfe von class="wikitable" hinter dem Start der Tabelle eingebunden. Mit Hilfe der Vorformatierung entsteht folgender Effekt:
| Mit Klassifizierung | Ohne Klassifizierung | ||||||||
|---|---|---|---|---|---|---|---|---|---|
{|class="wikitable"
!|Überschriftenzeile 1
!|Überschriftenzeile 2
|-
| 1 || 2
|}
|
{|
!|Überschriftenzeile 1
!|Überschriftenzeile 2
|-
|1 ||2
|}
| ||||||||
| Ergebnis | |||||||||
|
| ||||||||
Weitere Klassen können der wikitable hinzugefügt werden in dem man sie, durch Leerzeichen getrennt mit dahinter schreibt. So hat class="wikitable mw-datatable" folgenden Effekt:
| Quelltext | Ergebnis | ||||
|---|---|---|---|---|---|
{|class="wikitable mwdatatable"
!|Überschriftenzeile
|-
| Zelle 1
|-
|Zelle 2
|-
|Zelle 3
|}
|
|
Zeilen, über die der Mauszeiger fährt, werden hervorgehoben. Der Einsatz dieser Option ist gut zu überlegen, weil sie unter umständen beim Leser als störend empfunden werden kann.
Eine für große Tabellen hilfreiche klasse ist die class="sortable". Damit lässt sich die Tabelle Alphabetisch nach den Einträgen einer Spalte sortieren.
| Quelltext | Ergebnis | ||||||||
|---|---|---|---|---|---|---|---|---|---|
{|class="wikitable sortable"
!|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|-
|d ||12
|}
|
|
Die Sortierung erfolgt streng alphabetisch. Das bedeutet beispielsweise bei Datumsangaben, dass der 7. eines Monats unterhalb des 12. einsortiert wird. Man kann dies mit führenden Nullen umgehen. Um einzelne Spalten von der Sortierung auszunehmen, kann man bei der Kopfzeile der Spalte class="unsortable" eingeben.
Formatierungen II - Formatierungen der gesamten Tabelle
Nicht immer ist die Standartformatierung erwünscht. In vielen Fällen soll die Tabelle nicht linksbündig dargestellt werden, sondern in der Mitte oder auf der rechten Seite. Wenn Tabellen genutzt werden um mehrere Bilder darzustellen ist der Einsatz sogenannter unsichtbarer Tabellen hilfreich oder Tabellen mit anderen Rand- und Hintergrundfarben. Setzt man nicht die Standardklasse ein, ist es auch wichtig, die Abstände zwischen den Zellen oder die Abstände zwischen Inhalt und Zellenrand anzupassen.
Formatierungen III - Formatierungen von Tabellenzellen und -Zeilen
Die zuvor gezeigten Formatierungen verändern das Verhalten der gesamten Tabelle. Es gibt aber auch Mittel und Wege, um das Verhalten einzelner Zellen und ganzer Tabellenzeilen zu verändern. Zu den am häufigsten verwendeten Mitteln gehören:
- Änderung der Hintergrundfarbe mit
style="background-color:#111111;" - Änderung der Breite mit
width="150px" - Änderung der Horizontalen oder Vertikalen Ausrichtung mit
align="right/center/left"beziehungsweisevalign="top/center/bottom"
Um einzelne Zeilen zu formatieren werden die entsprechenden Befehle hinter das |- geschrieben. Soll nur eine Zelle geändert werden, so folgen die Befehle zwischen den beiden Pipes ||. Gehen wir es Stück für Stück durch.
Hintergrundfarben
Zum farblichen Hervorheben besonderer Zeilen oder Zellen gibt es verschiedene Möglichkeiten. Die Angabe im Hexadezimalcode in der Form #RRGGBB, oder als Name. Hilfe:Farben dient hier als Orientierung.
| Quelltext | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{|
!style="background:#00ff00;"|Überschrift
!|2. Überschrift
|-style="background:yellow;"
|a ||38
|-
|z ||25
|}
|
|
Breiten
Zellenbreiten werden wie bei der gesamten Tabelle über width="100px" oder style="width:100px;" angegeben. Ein paar Tipps:
- Auch prozentuale Angaben sind möglich. So kann mit
width="50%"festgelegt werden, dass die Zelle 50% der Breite des übergeordneten Elements einnimmt. Dies ist meistens die Breite des Artikels. Oder, wenn die Breite der Tabelle vorgegeben wurde, entsprechend diese Breite. - Auch relative Angaben sind möglich, um sich der Zoomstufe des Browsers anzupassen. Dies wird mit
style="width:120em;"erreicht. In diesem Fall wird die Zelle so breit 120 im Text geschriebenemhintereinander. - Breiten für Spalten müssen nicht in jeder Zelle erneut angegeben werden. Es reicht, wenn in der obersten Zelle die Breite definiert wird.
- Zu eng definierte Breiten überschreiben keine Wörter. Ist zum Beispiel eine Spalte mit 12px definiert, aber es wird ein langes Wort dargestellt, so passt sich die Breite auf dem Bildschirm dem Wort an.
- Nicht jede Spalte braucht eine Breite. Man muss bei prozentualen Angaben beispielsweie nicht dafür sorgen, dass die Summe 100% ergibt.
Beispiele:
| Quelltext | Ergebnis | ||||||
|---|---|---|---|---|---|---|---|
{|style="width:600px;" class="wikitable"
!style="width:120px;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
|
| ||||||
{|style="width:600px;" class="wikitable"
!style="width:50%;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
|
| ||||||
{|style="width:600px;" class="wikitable"
!style="width:2px;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
|
|
Ausrichtungen
Wie es schon aufgefallen sein dürfte, werden standardmäßig Texte linksbündig und mittig in einer Zelle positioniert. Dies lässt sich folgendermaßen ändern:
| Quelltext | Ergebnis | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|style="width:500px;" class="wikitable"
!style="width:20px;"|Überschrift
!style="width:460px;"|2. Überschrift
!|Noch eine Überschrift
|-
||schrecklich viel Text um viele Zeilen zu erzeugen
|valign="top"|Text oben positioniert
|valign="bottom"|unten
|-
||z
|align="center"|Text in der Mitte
||25
|-
||d
|align="right"|Text am rechten Rand
||38
|}
|
|
Beide Optionen können miteinander kombiniert und hintereinander weg geschrieben werden.
Kombinieren und miteinander verwenden
Alle Optionen können natürlich kombiniert und ergänzend eingesetzt werden. Ein Hinweis hier: Je näher eine Formatierung einer Zelle kommt, desto höher ist ihre Priorität. Das bedeutet, eine farbliche Vorgabe einer Zelle 'schlägt' das Format einer Zeile und das wiederum die Vorgabe für eine ganze Tabelle. Das gleiche gilt bei Ausrichtungen. Ein Beispiel:
| Quelltext | Ergebnis | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|style="background-color:#00ff00; color:#111111; width:600px;"
border="1px" align="center" cellpadding="3px" cellspacing="0px"
!style="width:33%;"|Spalte 1
!style="width:33%;"|Spalte 2
!style="width:33%;"|Spalte 3
|-
||Zelle 1
||Zelle 2
||Zelle 3
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
||Zelle 4
||Zelle 5
||Zelle 6
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
|style="background:#ad0000; color:white; font-weight:normal;" align="right"|Zelle 7
||Zelle 8
|align="left"|Zelle 9
|}
|
|
| |||||||||
| |||||||||
