41.613
Bearbeitungen
Änderungen
Aus KingWiki
Die Seite wurde neu angelegt: „{{Portal/Hilfe}}Mit diesem Artikel beschreiben wir die Verwendung von Tabellen für Einsteiger. Für komplexe und erweiterte Informationen folgt demnächst ein…“
{{Portal/Hilfe}}Mit diesem Artikel beschreiben wir die Verwendung von Tabellen für Einsteiger. Für komplexe und erweiterte Informationen folgt demnächst eine weitere Unterstützung.
== 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 [[Hilfe:Formatierungen#Listen|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 <code>'''{'''</code>, gefolgt von einem senkrechten Strich <code>'''|'''</code>. Sie endet mit einem Strich <code>'''<nowiki>|</nowiki>'''</code> gefolgt von einer geschweiften Klammer <code>'''}'''</code>. 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 <code>'''|'''</code>, wenn dieser am Zeilenanfang steht, oder mit zwei senkrechten Strichen <code>'''||'''</code>, 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:
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
| Zelle 1
| Zelle 2
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1
| Zelle 2
|}
</div>
|}
Eine neue Tabellenzeile wird mit dem senkrechten Strich gefolgt von einem Bindestreich <code>'''|-'''</code> erzeugt.
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
</div>
|}
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 <code>'''||'''</code>. Mehrere Zeilen mit mehreren Spalten sehen so aus:
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
||Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
</div>
|}
; Hinweis
: Zum Abschluss der Tabelle braucht es keine Darstellung einer Tabellenzeile <code>'''|-'''</code> vor einem <code>'''|}'''</code> ist also falsch und sollte vermieden werden.
Will man einige Zellen als Überschriften gestalten, so geht das mit einem Ausrufezeichen <code>'''!'''</code> 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]]:
{|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]]
|}
Der entsprechende Quelltext sieht so aus:
<pre>
{|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]]
|}
</pre>
Zwei Besonderheiten gibt es hier außerdem:
* Durch <code>'''class="wikitable"'''</code> 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 <code>'''&nbsp;'''</code> 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 [[Hilfe:CSS|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" style="float:right;"
|-
| A
| B
| C
|-
| colspan="3" | eine Zeile
|}
<pre style="width:45%">
{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}
</pre>
'''rowspan''': Zeilen überspannend
{| class="wikitable" style="float:right;"
|| A
| rowspan="3" | eine Spalte
|-
|| B
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable"
| A
| rowspan="3"| eine Spalte
|-
| B
|-
| C
|}
</pre>
{| class="wikitable" style="float:right;"
|rowspan="3"| führende Spalte
|| A
|-
|| B
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable"
| rowspan="3"| führende Spalte
| A
|-
| B
|-
| C
|}
</pre>
'''colspan und rowspan kombiniert'''
{| class="wikitable" style="float:right;"
|colspan="2"| A
|-
|| B
| rowspan="2"| eine Spalte
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable" style="text-align:center"
|colspan="2"| A
|-
| B
| rowspan="2"| eine Spalte
|-
| C
|}
</pre>
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
|}
<pre style="width:45%;">
{| class="wikitable" style="float:right;"
|| A
|colspan="2" rowspan="2"| eine Zelle über zwei Spalten und zwei Zeilen
|-
|| B
|-
|| C
|| D
|| E
|}
</pre>
; Ein Tipp
: Für verbundene Zellen hilft es bei komplexen Situationen sich die Zieltabelle aufzuzeichnen. Dann klappt es auch mit [[Arthur Eld]]s Stammbaum.
=== Formatierungen I - Klassen ===
{{weiterführend 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 [[Hilfe:Formatierungen#Listen|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 <code>'''{'''</code>, gefolgt von einem senkrechten Strich <code>'''|'''</code>. Sie endet mit einem Strich <code>'''<nowiki>|</nowiki>'''</code> gefolgt von einer geschweiften Klammer <code>'''}'''</code>. 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 <code>'''|'''</code>, wenn dieser am Zeilenanfang steht, oder mit zwei senkrechten Strichen <code>'''||'''</code>, 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:
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
| Zelle 1
| Zelle 2
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1
| Zelle 2
|}
</div>
|}
Eine neue Tabellenzeile wird mit dem senkrechten Strich gefolgt von einem Bindestreich <code>'''|-'''</code> erzeugt.
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}
</div>
|}
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 <code>'''||'''</code>. Mehrere Zeilen mit mehreren Spalten sehen so aus:
{| class="wikitable"
|-
! Quelltext
! Ergebnis
|-
|<pre style="border-style:solid; margin:1em; padding:5px;">
{|
||Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
</pre>
|<div style="margin:1em">
{|
| Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
</div>
|}
; Hinweis
: Zum Abschluss der Tabelle braucht es keine Darstellung einer Tabellenzeile <code>'''|-'''</code> vor einem <code>'''|}'''</code> ist also falsch und sollte vermieden werden.
Will man einige Zellen als Überschriften gestalten, so geht das mit einem Ausrufezeichen <code>'''!'''</code> 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]]:
{|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]]
|}
Der entsprechende Quelltext sieht so aus:
<pre>
{|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]]
|}
</pre>
Zwei Besonderheiten gibt es hier außerdem:
* Durch <code>'''class="wikitable"'''</code> 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 <code>'''&nbsp;'''</code> 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 [[Hilfe:CSS|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" style="float:right;"
|-
| A
| B
| C
|-
| colspan="3" | eine Zeile
|}
<pre style="width:45%">
{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}
</pre>
'''rowspan''': Zeilen überspannend
{| class="wikitable" style="float:right;"
|| A
| rowspan="3" | eine Spalte
|-
|| B
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable"
| A
| rowspan="3"| eine Spalte
|-
| B
|-
| C
|}
</pre>
{| class="wikitable" style="float:right;"
|rowspan="3"| führende Spalte
|| A
|-
|| B
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable"
| rowspan="3"| führende Spalte
| A
|-
| B
|-
| C
|}
</pre>
'''colspan und rowspan kombiniert'''
{| class="wikitable" style="float:right;"
|colspan="2"| A
|-
|| B
| rowspan="2"| eine Spalte
|-
|| C
|}
<pre style="width:45%">
{| class="wikitable" style="text-align:center"
|colspan="2"| A
|-
| B
| rowspan="2"| eine Spalte
|-
| C
|}
</pre>
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
|}
<pre style="width:45%;">
{| class="wikitable" style="float:right;"
|| A
|colspan="2" rowspan="2"| eine Zelle über zwei Spalten und zwei Zeilen
|-
|| B
|-
|| C
|| D
|| E
|}
</pre>
; Ein Tipp
: Für verbundene Zellen hilft es bei komplexen Situationen sich die Zieltabelle aufzuzeichnen. Dann klappt es auch mit [[Arthur Eld]]s Stammbaum.
=== Formatierungen I - Klassen ===
{{weiterführend Hilfe}}
