Hilfe:Tabellen: Unterschied zwischen den Versionen

Version vom 6. Januar 2016, 14:52 Uhr

Portal: Hilfe

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:

{|
| Zelle 1
| Zelle 2
|}

Eine neue Tabellenzeile wird mit dem senkrechten Strich gefolgt von einem Bindestreich |- erzeugt.

{|
| 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:

{|
||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

{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}

rowspan: Zeilen überspannend

{| class="wikitable"
| A
| rowspan="3"| eine Spalte
|-
| B
|-
| C
|}

{| class="wikitable"
| rowspan="3"| führende Spalte
| A
|-
| B
|-
| C
|}

colspan und rowspan kombiniert

{| 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

{| 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