Hilfe:Tabellen: Unterschied zwischen den Versionen

Werbung (Nur für Gäste)
Zeile 5: Zeile 5:
  
  
−
Die vom Tamriel-Almanach verwendete MediaWiki-Software bietet eine eigene Syntax um Tabellen darzustellen. Diese Syntax ist zwar an das verbreitete HTML angelehnt, erleichtert jedoch durch eine vereinfachte Schreibweise die Arbeit an komplizierteren Tabellen.
+
Diese Seite beschreibt die Verwendung von '''Tabellen''' im Tamriel-Almanach. Solltest du Probleme beim Erstellen einer Tabelle haben, wird dir auf der [[Hilfe_Diskussion:Tabellen|Diskussionsseite]] oder im [[Spezial:Webchat|Chat]] von den Mitautoren gerne und in der Regel auch schnell geholfen.
  
−
Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabellen als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Insbesondere kann das '''style'''-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Zwar lassen sich auch einzelne Zeilen einer Tabelle formatieren, möchte man jedoch ein Attribut an eine bestimmte Spalte vergeben, so muss dies zellenweise geschehen.
+
== Einführung ==
 +
=== Vorteil von Tabellen ===
 +
Tabellen sind eine spezielle, strukturierte Form von Datenlisten. Im Gegensatz zu normalen Listen ermöglichen sie eine differenziertere, mehrdimensionale und übersichtlichere Darstellung mit vielen Informationen pro Eintrag und, falls gewünscht, auch eine Sortierbarkeit der einzelnen Spalten. Hierbei kann der Leser Daten numerisch nach Größe sortieren lassen, Begriffe können alphabetisch oder beides nach Rangordnung sortiert werden. Dadurch kann auch Mehrfachdarstellung vermieden werden. Alles Wissen kann übersichtlich in ''einer'' Tabelle verknüpft werden; Wissen wird zunehmend auch maschinenlesbar und Informationen können automatisch miteinander verknüpft werden.
  
−
== Wann Tabellen einsetzen? ==
+
=== Links und Bilder in Tabellen ===
 +
Durch Links können in der Tabelle weiterführende oder vertiefende Artikel übersichtlich mit einzelnen Begriffen verknüpft werden. Ein Bild sagt mehr als tausend Worte gilt oft auch für Tabellen, exzessive Bildverwendungen können eine Tabelle jedoch auch unübersichtlich machen und überladen.
  
−
Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.
+
== Technische Grundlagen ==
 +
Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Wir verwenden hier im Almanach einheitliche Tabellen, weswegen hauptsächlich mit dem <tt>class</tt>-Attribut gearbeitet werden sollte. In Einzelfällen kann auch das <tt>style</tt>-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.
  
−
Andererseits sind Tabellen komplizierter als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen. Überlege immer, ob du die Informationen nicht auch in einer einfachen Liste unterbringen kannst (siehe [[Hilfe:Textgestaltung]]).
+
Die meisten Tabellen sollten die Klasse '''wikitable''' besitzen (''class="wikitable"''), da sie so dem Schema der hier verwendeten Tabellen entsprechen.
  
−
== Tabellensyntax ==
+
=== Einfache Tabelle ===
 +
In der MediaWiki-Syntax beginnt jede Tabelle mit einer geschweiften Klammer '''{''' gefolgt von einem senkrechten Strich '''<nowiki>|</nowiki>''' und endet mit einem Strich '''<nowiki>|</nowiki>''' gefolgt von einer geschweiften Klammer '''}'''. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen.
  
−
Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer '''<nowiki>{</nowiki>''' gefolgt von einem senkrechten Strich '''<nowiki>|</nowiki>''' und endet mit einem Strich '''<nowiki>|</nowiki>''' gefolgt von einer geschweiften Klammer '''<nowiki>}</nowiki>'''. Die öffnende Klammer '''muss''' als erstes Zeichen der Zeile stehen.
+
Jede Zelle innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute. Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden, um die Tabellenstruktur übersichtlich zu halten. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.
−
 
 
−
=== Einfache Tabellen ===
 
−
 
 
−
Jede Zeile innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute (z. B. Rowspanning – siehe unten). Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.
 
  
 
Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:
 
Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 
<nowiki>{|</nowiki><br />
 
<nowiki>{|</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
Zeile 35: Zeile 37:
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{|  
+
{|
 
| Zelle 1
 
| Zelle 1
 
| Zelle 2
 
| Zelle 2
Zeile 44: Zeile 46:
  
 
Bitte beachten:
 
Bitte beachten:
−
<div style="border:1px solid #000000; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
+
<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| | Zelle |}</nowiki>
+
<nowiki>{| |Einzelzelle |}</nowiki>
 
</div>
 
</div>
 
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.
 
funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.
  
−
==== Tabelle mit mehreren Tabellenzeilen ====
+
=== Tabelle mit mehreren Tabellenzeilen ===
  
−
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten '''-''' setzt.
+
Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten ''-'' setzt.
 
Dies lässt sich beliebig oft wiederholen.
 
Dies lässt sich beliebig oft wiederholen.
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 
<nowiki>{|</nowiki><br />
 
<nowiki>{|</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
Zeile 67: Zeile 70:
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
 
{|
 
{|
 
| Zelle 1
 
| Zelle 1
Zeile 78: Zeile 81:
 
|}
 
|}
  
−
Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit '''<nowiki>||</nowiki>''' trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:
+
Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit '''||''' trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
! colspan=3; style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! colspan="3" | Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 
<nowiki>{|</nowiki><br />
 
<nowiki>{|</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
Zeile 97: Zeile 101:
 
</div>
 
</div>
 
| bzw.
 
| bzw.
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 
<nowiki>{|</nowiki><br />
 
<nowiki>{|</nowiki><br />
 
<nowiki>| Zelle 1 || Zelle 2</nowiki><br />
 
<nowiki>| Zelle 1 || Zelle 2</nowiki><br />
Zeile 106: Zeile 110:
 
<nowiki>|}</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
 
{|
 
{|
 
| Zelle 1
 
| Zelle 1
Zeile 120: Zeile 124:
 
|}
 
|}
  
−
==== Tabellen im Schreibmaschinenstil ohne Formatierungen ====
+
== Komplexere Tabellen ==
  
−
Die einfachste und schnellste Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch [[Hilfe:Textgestaltung|Textgestaltung – vorformatierter Text mit einem Leerzeichen am Zeilenanfang]]). Dazu stellt man jeder Tabellenzeile ein Leerzeichen voran. Spalten und Layout werden visuell im Bearbeitungsmodus angepasst. Das Ergebnis entspricht anschließend genau der Ansicht im Bearbeitungsmodus. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreitet (ca. 780px bei Normalschriftgröße) und auf kleineren Bildschirmen, PDAs etc. ärgerlich sein kann).
+
=== Rahmen ===
  
−
'''Beispiel und Ergebnis:'''
+
Bis jetzt haben unsere Tabellen eine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''{|''') festgelegt. Es kann eingestellt werden, ob ein Rahmen existieren soll oder nicht. Dafür werden die Klassen '''border_0''' (kein Rahmen) und '''border_1''' (Rahmen) verwendet. Für besondere Fälle kann die Rahmenstärke auch mit dem Argument '''border="x"''', wobei '''x''' die Stärke des Rahmens ist, eingestellt werden.
−
 
 
−
Klimatabelle
 
−
Monat                    JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ
 
−
-------------------------------------------------------------------------
 
−
Ø Tagestemperatur in °C    21  21  22  23  24  25  27  29  28  26  24  22
 
−
Ø Nachttemperatur in °C    15  15  15  16  17  18  20  21  20  19  18  16
 
−
Ø Sonnenstunden pro Tag    6  6  7  8  9  9  9  9  8  7  6  5
 
−
Ø Regentage pro Monat      6  4  3  2  2  1  0  0  2  5  6  7
 
−
Ø Wassertemperatur in °C  19  18  18  18  19  20  21  22  23  23  21  20
 
−
 
 
−
=== Komplexere Tabellen ===
 
−
 
 
−
==== Rahmen ====
 
−
 
 
−
Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem '''<nowiki>{|</nowiki>''') festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden – mit dem Argument: '''<nowiki>border="x"</nowiki>''', wobei „x“ die Stärke des Rahmens ist (siehe aber auch [[#Formatierungen|Formatierungen]]).
 
  
 
Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
 
Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| class="border_1"</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 2</nowiki><br />
 
<nowiki>| Zelle 2</nowiki><br />
Zeile 159: Zeile 149:
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</div>
 
</div>
−
|<div align=center style="margin:1em;">
+
|<div align="center" style="margin:1em">
−
{| border="1"
+
{| class="border_1"
 
| Zelle 1
 
| Zelle 1
 
| Zelle 2
 
| Zelle 2
Zeile 170: Zeile 160:
 
| Zelle 6
 
| Zelle 6
 
|}
 
|}
−
Mit ''border="3"'' erhält man:
+
Mit ''class="border_0"'' erhält man:
−
{| border="3"
+
{| class="border_0"
 
| Zelle 1
 
| Zelle 1
 
| Zelle 2
 
| Zelle 2
Zeile 184: Zeile 174:
 
|}
 
|}
  
−
==== Titelzeilen ====
+
=== Titelzeilen ===
  
−
Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit '''<nowiki>!</nowiki>''' statt '''<nowiki>|</nowiki>''' eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett:
+
Eine Tabelle mit Titelzeile (Spaltenköpfe) erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett.
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| class="wikitable"</nowiki><br />
 
<nowiki>! Was</nowiki><br />
 
<nowiki>! Was</nowiki><br />
 
<nowiki>! Warum</nowiki><br />
 
<nowiki>! Warum</nowiki><br />
Zeile 207: Zeile 198:
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{| class="wikitable"
 
! Was
 
! Was
 
! Warum
 
! Warum
Zeile 224: Zeile 215:
 
|}
 
|}
  
−
==== Rowspanning und Colspanning ====
+
=== Spalten- und zeilenübergreifende Darstellung ===
  
−
Mit der Wiki-Syntax ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes '''rowspan''' bzw. '''colspan'''. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip
+
Auch mit der neuen Wiki-Syntax ist es, genauso wie bei HTML, möglich, dass eine Zelle über mehrere Spalten reicht ''(colspan)'' oder Zeilen überspannt ''(rowspan)''. Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip
  
−
<div style="border:1px solid #000000; border-collapse:collapse; margin:10px 0; padding:5px; font-family:monospace; font-size:95%;">
+
<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 
<nowiki>| Attribute | Inhalt</nowiki>
 
<nowiki>| Attribute | Inhalt</nowiki>
 
</div>
 
</div>
  
−
Eine Tabelle mit einer Zelle, die über zwei Spalten geht ('''<nowiki>colspan="2"</nowiki>''') sieht so aus:
+
Eine Tabelle mit einer Zelle, die über zwei Spalten geht ''(colspan="2")'' sieht so aus:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| class="wikitable"</nowiki><br />
 
<nowiki>! A</nowiki><br />
 
<nowiki>! A</nowiki><br />
 
<nowiki>! B</nowiki><br />
 
<nowiki>! B</nowiki><br />
Zeile 245: Zeile 237:
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
−
<nowiki>| colspan="2" align="center" | Zelle 2</nowiki><br />
+
<nowiki>| colspan="2" | Zelle 2</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>| Zelle 3</nowiki><br />
 
<nowiki>| Zelle 3</nowiki><br />
Zeile 252: Zeile 244:
 
<nowiki>|}</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{| class="wikitable"
 
! A
 
! A
 
! B
 
! B
Zeile 259: Zeile 251:
 
|-
 
|-
 
| Zelle 1
 
| Zelle 1
−
| colspan="2" align="center" | Zelle 2
+
| colspan="2" | Zelle 2
 
|-
 
|-
 
| Zelle 3
 
| Zelle 3
Zeile 268: Zeile 260:
 
|}
 
|}
  
−
Eine Tabelle mit einer Zelle, die über zwei Zeilen geht ('''<nowiki>rowspan="2"</nowiki>''') sieht so aus:
+
Eine Tabelle mit einer Zelle, die über zwei Zeilen geht ''(rowspan="2")'' sieht so aus:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| class="wikitable"</nowiki><br />
 
<nowiki>! A</nowiki><br />
 
<nowiki>! A</nowiki><br />
 
<nowiki>! B</nowiki><br />
 
<nowiki>! B</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| rowspan="2" align="center" | Zelle 1</nowiki><br />
+
<nowiki>| rowspan="2" | Zelle 1</nowiki><br />
 
<nowiki>| Zelle 2</nowiki><br />
 
<nowiki>| Zelle 2</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
Zeile 285: Zeile 278:
 
<nowiki>|}</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{| class="wikitable"
 
! A
 
! A
 
! B
 
! B
 
|-
 
|-
−
| rowspan="2" align="center" | Zelle 1
+
| rowspan="2" | Zelle 1
 
| Zelle 2
 
| Zelle 2
 
|-
 
|-
Zeile 298: Zeile 291:
 
|}
 
|}
  
−
==== Leere Zellen in Tabellen mit Rahmen ====
+
Und kombiniert:
−
 
+
{| class="wikitable"
−
Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen '''&amp;nbsp;''' setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:
 
−
 
 
−
{| border="1"
 
−
! colspan="4" align="center" | 'normal'
 
 
|-
 
|-
−
| Zelle 1
+
! Eingabe
−
| Zelle 2
+
! Ergebnis
−
|
 
−
|
 
 
|-
 
|-
−
|
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
|
+
<nowiki>{| class="wikitable"</nowiki><br />
−
|
+
<nowiki>! A</nowiki><br />
−
|
+
<nowiki>! B</nowiki><br />
−
|-
+
<nowiki>! C</nowiki><br />
−
| Zelle 9
 
−
|
 
−
|
 
−
| Zelle 12
 
−
|-
 
−
| Zelle 13
 
−
| Zelle 14
 
−
| Zelle 15
 
−
| Zelle 16
 
−
|}
 
−
 
 
−
 
 
−
Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:
 
−
 
 
−
{| class="prettytable" border="1"
 
−
!style="background-color: #d1d4e0;" | Eingabe
 
−
!style="background-color: #d1d4e0;" | Ergebnis
 
−
|-
 
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
 
−
<nowiki>{| border="1"</nowiki><br />
 
−
<nowiki>!colspan="4" align="center" | 'sicherer'</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Zelle 1</nowiki><br />
+
<nowiki>| rowspan="2" colspan="2" | A1 & B1 & A2 & B2</nowiki><br />
−
<nowiki>| Zelle 2</nowiki><br />
+
<nowiki>| C1</nowiki><br />
−
<nowiki>| &amp;nbsp;</nowiki><br />
 
−
<nowiki>| &amp;nbsp;</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| &amp;nbsp;</nowiki><br />
+
<nowiki>| C2</nowiki><br />
−
<nowiki>| &amp;nbsp;</nowiki><br />
 
−
<nowiki>| &amp;nbsp;</nowiki><br />
 
−
<nowiki>| &amp;nbsp;</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Zelle 9</nowiki><br />
+
<nowiki>| A3</nowiki><br />
−
<nowiki>| &amp;nbsp;</nowiki><br />
+
<nowiki>| B3</nowiki><br />
−
<nowiki>| &amp;nbsp;</nowiki><br />
+
<nowiki>| C3</nowiki><br />
−
<nowiki>| Zelle 12</nowiki><br />
+
<nowiki>|}</nowiki><br />
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| Zelle 13</nowiki><br />
 
−
<nowiki>| Zelle 14</nowiki><br />
 
−
<nowiki>| Zelle 15</nowiki><br />
 
−
<nowiki>| Zelle 16</nowiki><br />
 
−
<nowiki>|}</nowiki>
 
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{| class="wikitable"
−
! colspan="4" align="center" | 'sicherer'
+
! A
−
|-
+
! B
−
| Zelle 1
+
! C
−
| Zelle 2
 
−
| &nbsp;
 
−
| &nbsp;
 
 
|-
 
|-
−
| &nbsp;
+
| rowspan="2" colspan="2" | A1 & B1 & A2 & B2
−
| &nbsp;
+
| C1
−
| &nbsp;
 
−
| &nbsp;
 
 
|-
 
|-
−
| Zelle 9
+
| C2
−
| &nbsp;
 
−
| &nbsp;
 
−
| Zelle 12
 
 
|-
 
|-
−
| Zelle 13
+
| A3
−
| Zelle 14
+
| B3
−
| Zelle 15
+
| C3
−
| Zelle 16
 
 
|}
 
|}
 
</div>
 
</div>
 
|}
 
|}
  
−
==== Verschachtelte Tabellen ====
+
=== Verschachtelte Tabellen ===
  
−
Das Verschachteln ist mit der Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
+
Das Verschachteln ist mit der neuen Wiki-Syntax sehr einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise ''kein'' senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|-
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
 
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>| Zelle 1</nowiki><br />
 
<nowiki>|</nowiki><br />
 
<nowiki>|</nowiki><br />
−
<nowiki> {| border="2"</nowiki><br />
+
<nowiki> {|</nowiki><br />
 
<nowiki> | Zelle A</nowiki><br />
 
<nowiki> | Zelle A</nowiki><br />
 
<nowiki> |-</nowiki><br />
 
<nowiki> |-</nowiki><br />
Zeile 405: Zeile 351:
 
<nowiki>|}</nowiki>
 
<nowiki>|}</nowiki>
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{|  
 
| Zelle 1
 
| Zelle 1
 
|
 
|
−
  {| border="2"
+
  {|  
 
  | Zelle A
 
  | Zelle A
 
  |-
 
  |-
Zeile 419: Zeile 365:
 
|}
 
|}
  
−
==== Beschriftung ====
+
=== Aufzählungszeichen ===
  
−
Mit der Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus '''+''' zu setzen. Innerhalb der Beschriftung kann man ganz normal mit der Wiki-Syntax formatieren.
+
Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.
−
 
 
−
Eine Tabelle mit Beschriftung sieht im Text so aus:
 
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
 
−
!style="background-color: #d1d4e0;" | Ergebnis
 
−
|-
 
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
 
−
<nowiki>{| border="1"</nowiki><br />
 
−
<nowiki>|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.</nowiki><br />
 
−
<nowiki>| Zelle 1</nowiki><br />
 
−
<nowiki>| Zelle 2</nowiki><br />
 
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| Zelle 3</nowiki><br />
 
−
<nowiki>| Zelle 4</nowiki><br />
 
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1"
 
−
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
 
−
| Zelle 1
 
−
| Zelle 2
 
 
|-
 
|-
−
| Zelle 3
+
! Eingabe
−
| Zelle 4
+
! Ergebnis
−
|}
 
−
</div>
 
−
|}
 
−
 
 
−
==== Aufzählungszeichen ====
 
−
 
 
−
Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.
 
−
 
 
−
{| class="prettytable" border="1"
 
−
!style="background-color: #d1d4e0;" | Eingabe
 
−
!style="background-color: #d1d4e0;" | Ergebnis
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| </nowiki><br />
 
<nowiki>|* erster Eintrag</nowiki><br />
 
<nowiki>|* erster Eintrag</nowiki><br />
 
<nowiki>* zweiter Eintrag</nowiki><br />
 
<nowiki>* zweiter Eintrag</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{|  
 
|* erster Eintrag
 
|* erster Eintrag
 
* zweiter Eintrag
 
* zweiter Eintrag
Zeile 472: Zeile 387:
 
</div>
 
</div>
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| </nowiki><br />
 
<nowiki>|</nowiki><br />
 
<nowiki>|</nowiki><br />
 
<nowiki>* erster Eintrag</nowiki><br />
 
<nowiki>* erster Eintrag</nowiki><br />
Zeile 479: Zeile 394:
 
<nowiki>|}</nowiki><br />
 
<nowiki>|}</nowiki><br />
 
</div>
 
</div>
−
|<div style="margin:1em;">
+
|<div style="margin:1em">
−
{| border="1"
+
{|  
 
|
 
|
 
* erster Eintrag
 
* erster Eintrag
Zeile 488: Zeile 403:
 
|}
 
|}
  
−
== Formatierungen ==
+
== Sortierbare Tabellen ==
 +
Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss <tt>class="sortable"</tt> im Tabellenkopf angegeben werden.
  
−
Farben, Ränder, Abstände und Spaltenbreiten können durch CSS-Styles vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die Notwendigkeit des Unterfangens nachgedacht haben und auch Bestrebungen zur Vereinheitlichung berücksichtigen.
+
Eine sortierbare Tabelle erkennt man daran, dass sie in den Spaltenköpfen kleine Doppelpfeilsymbole zeigt. Bei Anklicken werden die Zeilen der Tabelle nach den Werten der jeweiligen Spalte sortiert.  
  
−
=== Spaltenbreiten ===
+
{| class="wikitable"
−
 
+
|-
−
Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln sinnvoll nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
+
! Eingabe
−
 
+
! Ergebnis
−
{| class="prettytable" border="1"
 
−
!style="background-color: #d1d4e0;" | Eingabe
 
−
!style="background-color: #d1d4e0;" | Ergebnis
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| <div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{| border="1"</nowiki><br />
+
<nowiki>{| class="wikitable sortable"</nowiki><br />
−
<nowiki>! width="10%" | 10&amp;nbsp;%</nowiki><br />
+
<nowiki>! Spalte 1</nowiki><br />
−
<nowiki>! width="20%" | 20&amp;nbsp;%</nowiki><br />
+
<nowiki>! Spalte 2</nowiki><br />
−
<nowiki>! width="40%" | 40&amp;nbsp;%</nowiki><br />
+
<nowiki>! Spalte 3</nowiki><br />
 +
<nowiki>|-</nowiki><br />
 +
<nowiki>| 12346</nowiki><br />
 +
<nowiki>| € 234,44</nowiki><br />
 +
<nowiki>| fghij</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| A</nowiki><br />
+
<nowiki>| 98765</nowiki><br />
−
<nowiki>| B</nowiki><br />
+
<nowiki>| € 77,55</nowiki><br />
−
<nowiki>| C</nowiki><br />
+
<nowiki>| abcde</nowiki><br />
−
<nowiki>|}</nowiki>
+
<nowiki>|}</nowiki><br />
−
</div>
+
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
−
|<div style="margin:1em;">
+
{| class="wikitable sortable"
−
{| border="1"
+
! Spalte 1
−
! width="10%" | 10&nbsp;%
+
! Spalte 2
−
! width="20%" | 20&nbsp;%
+
! Spalte 3
−
! width="40%" | 40&nbsp;%
 
−
|-
 
−
| A
 
−
| B
 
−
| C
 
−
|}
 
−
</div>
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| 12346
−
<nowiki>{| border="1"</nowiki><br />
+
| € 234,44
−
<nowiki>! width="50" | 50</nowiki><br />
+
| fghij
−
<nowiki>! width="100" | 100</nowiki><br />
 
−
<nowiki>! width="200" | 200</nowiki><br />
 
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| A</nowiki><br />
 
−
<nowiki>| B</nowiki><br />
 
−
<nowiki>| C</nowiki><br />
 
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1"
 
−
! width="50" | 50
 
−
! width="100" | 100
 
−
! width="200" | 200
 
 
|-
 
|-
−
| A
+
| 98765
−
| B
+
| € 77,55
−
| C
+
| abcde
 
|}
 
|}
 
</div>
 
</div>
 
|}
 
|}
  
−
=== Zellenabstände mit ''cellspacing'' und ''cellpadding'' ===
+
''Einschränkungen:'' Bei komplexen Tabellen (d.&nbsp;h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.
 +
 
 +
Das Sortieren funktioniert nur bei aktivem JavaScript – weil der Leser das unter Umständen ausgeschaltet hat, und auch, weil der Artikel noch druckfähig sein soll, muss die Tabelle bei der Eingabe im WikiCode schon sinnvoll sortiert sein.
 +
 
 +
Der Datentyp der obersten Zelle bestimmt den Sortierungsmodus. Erkannt werden einfache Datumsangaben, Währungen, Prozentwerte und Zahlen. Passt keiner dieser Datentypen, wird der Text in Kleinbuchstaben gewandelt und ''alphabetisch'' nach der Reihenfolge des Unicode sortiert
  
−
Mit '''cellspacing''' kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit '''cellpadding''' bestimmt man den Abstand des Zellinhaltes vom Zellrahmen. Das CSS-Attribut '''<nowiki>style="border-collapse:collapse;"</nowiki>''' lässt zusammenfallende Zellumrandungen verschwinden.
+
=== Zellen von der Sortierung ausschließen ===
 +
==== Eine Spalte nicht sortieren ====
 +
Man kann eine Spalte unsortierbar machen durch einfügen von <code>class="unsortable"</code> in den Attributen der Kopfzeile.
  
−
{| class="prettytable" border="1"
+
{| class="wikitable"
−
!style="background-color: #d1d4e0;" | Eingabe
+
|- class="hintergrundfarbe6"
−
!style="background-color: #d1d4e0;" | Ergebnis
+
! Eingabe
 +
! Ergebnis
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
−
<nowiki>{|</nowiki><br />
+
<nowiki>{| class="wikitable sortable"</nowiki><br />
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
+
<nowiki>! Zahlen !! Alphabet !! Datum</nowiki><br />
 +
<nowiki>! Währung !! <b style="color:red">class="unsortable" |</b> Unsortierbar</nowiki><br />
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
+
<nowiki>| 1 || Z || 02-02-2004 || 5,00 || Diese</nowiki><br />
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{|
 
−
| Alpha || Beta || Gamma
 
−
|-
 
−
| Delta || Epsilon || Zeta
 
−
|}
 
−
</div>
 
−
|-
 
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
 
−
<nowiki>{| border="1"</nowiki><br />
 
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
+
<nowiki>| 2 || y || 13-apr-2005 || || Spalte</nowiki><br />
−
<nowiki>|}</nowiki><br />
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1"
 
−
| Alpha || Beta || Gamma
 
−
|-
 
−
| Delta || Epsilon || Zeta
 
−
|}
 
−
</div>
 
−
|-
 
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
 
−
<nowiki>{| border="1" cellspacing="10" cellpadding="0"</nowiki><br />
 
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
+
<nowiki>| 3 || X || 17.aug.2006 || 6,50 || ist</nowiki><br />
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1" cellspacing="10" cellpadding="0"
 
−
| Alpha || Beta || Gamma
 
−
|-
 
−
| Delta || Epsilon || Zeta
 
−
|}
 
−
</div>
 
−
|-
 
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
 
−
<nowiki>{| border="1" cellspacing="0" cellpadding="10"</nowiki><br />
 
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
 
 
<nowiki>|-</nowiki><br />
 
<nowiki>|-</nowiki><br />
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
+
<nowiki>| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar</nowiki><br />
−
<nowiki>|}</nowiki><br />
+
<nowiki>|-</nowiki>
−
</div>
+
<nowiki>| 5 || V || 05/12/2006 || 7,15 || wie man sieht.</nowiki><br />
−
|<div style="margin:1em;">
+
<nowiki>|}</nowiki><br /></div>
−
{| border="1" cellspacing="0" cellpadding="10"
+
| <div style="margin-left:1em"><!-- linker Rand für die Ergebnistabelle-->
−
| Alpha || Beta || Gamma
+
{|class="wikitable sortable"
 +
! Zahlen !! Alphabet !! Datum !! Währung !! class="unsortable" | Unsortierbar
 
|-
 
|-
−
| Delta || Epsilon || Zeta
+
| 1 || Z || 02-02-2004 || 5,00 || Diese
−
|}
 
−
</div>
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| 2 || y || 13-apr-2005 || || Spalte
−
<nowiki>{| border="1" cellspacing="10" cellpadding="10"</nowiki><br />
 
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
 
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
 
−
<nowiki>|}</nowiki><br />
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1" cellspacing="10" cellpadding="10"
 
−
| Alpha || Beta || Gamma
 
 
|-
 
|-
−
| Delta || Epsilon || Zeta
+
| 3 || X || 17.aug.2006 || 6,50 || ist
−
|}
 
−
</div>
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar
−
<nowiki>{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"</nowiki><br />
 
−
<nowiki>| Alpha || Beta || Gamma</nowiki><br />
 
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| Delta || Epsilon || Zeta</nowiki><br />
 
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
 
−
| Alpha || Beta || Gamma
 
 
|-
 
|-
−
| Delta || Epsilon || Zeta
+
| 5 || V || 05/12/2006 || 7,15 || wie man sieht.
 
|}
 
|}
 
</div>
 
</div>
 
|}
 
|}
  
−
=== Ausrichtung ===
+
==== Die letzte Zeile nicht sortieren ====
 +
Manchmal ist es erwünscht, die letzte Tabellenzeile von der Sortierung auszuschließen. Das kann mit <code>class="sortbottom"</code> in der entsprechenden Tabellenzeile erreicht werden.
 +
Alle Zeilen, die mit <code>class="sortbottom"</code> versehen sind, werden unten in der Tabelle angeordnet und untereinander sortiert.
  
−
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das '''valign''' gilt jeweils für die ganze Zeile, das '''align''' nur für die jeweilige Zelle.
+
{| class="wikitable"
−
 
+
|-
−
{| class="prettytable" border="1"
+
! Eingabe
−
!style="background-color: #d1d4e0;" | Eingabe
+
! Ergebnis
−
!style="background-color: #d1d4e0;" | Ergebnis
+
|-
 +
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
 +
<nowiki>{|class="wikitable sortable"</nowiki><br />
 +
<nowiki>! Name !! Vorname !! Größe</nowiki><br />
 +
<nowiki>|-</nowiki><br />
 +
<nowiki>| John || Smith || 1,85</nowiki><br />
 +
<nowiki>|-</nowiki><br />
 +
<nowiki>| Ron || Ray || 1,89</nowiki><br />
 +
<nowiki>|-</nowiki><br />
 +
<nowiki>| Mario || Bianchi || 1,72</nowiki><br />
 +
<nowiki>|- <b style="color:red">class="sortbottom"</b></nowiki><br />
 +
<nowiki>| colspan="2" | Durchschnitt: || 1,82</nowiki><br />
 +
<nowiki>|}</nowiki></div>
 +
| <div style="margin-left:1em"><!--linker Rand für die Ergebnistabelle-->
 +
{| class="wikitable sortable"
 +
! Name !! Vorname !! Größe
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| John || Smith || 1,85
−
<nowiki>{| border="1" cellspacing="0"</nowiki><br />
 
−
<nowiki>!</nowiki><br />
 
−
<nowiki>! align="left" | Links</nowiki><br />
 
−
<nowiki>! align="center" | Zentriert</nowiki><br />
 
−
<nowiki>! align="right" | Rechts</nowiki><br />
 
−
<nowiki>|- valign="top" </nowiki><br />
 
−
<nowiki>! height="38" | Oben</nowiki><br />
 
−
<nowiki>| align="left" | xx</nowiki><br />
 
−
<nowiki>| align="center" | xxx</nowiki><br />
 
−
<nowiki>| align="right" | xx</nowiki><br />
 
−
<nowiki>|- valign="middle" </nowiki><br />
 
−
<nowiki>! height="38" | Mitte</nowiki><br />
 
−
<nowiki>| align="left" | x</nowiki><br />
 
−
<nowiki>| align="center" | x</nowiki><br />
 
−
<nowiki>| align="right" | x</nowiki><br />
 
−
<nowiki>|- valign="bottom" </nowiki><br />
 
−
<nowiki>! height="38" | Unten</nowiki><br />
 
−
<nowiki>| align="left" | x</nowiki><br />
 
−
<nowiki>| align="center" | x</nowiki><br />
 
−
<nowiki>| align="right" | x</nowiki><br />
 
−
<nowiki>|}</nowiki>
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{| border="1" cellspacing="0"
 
−
!
 
−
! align="left" | Links
 
−
! align="center" | Zentriert
 
−
! align="right" | Rechts
 
−
|- valign="top"
 
−
! height="38" | Oben
 
−
| align="left" | xx
 
−
| align="center" | xxx
 
−
| align="right" | xx
 
−
|- valign="middle"
 
−
! height="38" | Mitte
 
−
| align="left" | x
 
−
| align="center" | x
 
−
| align="right" | x
 
−
|- valign="bottom"
 
−
! height="38" | Unten
 
−
| align="left" | x
 
−
| align="center" | x
 
−
| align="right" | x
 
−
|}
 
−
</div>
 
−
|}
 
−
 
 
−
=== Andere HTML-Formatierungen ===
 
−
 
 
−
Es ist auch möglich, andere HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen ('''<nowiki>style="background:#204B2C;"</nowiki>'''; ''siehe:'' [[Hilfe:Farben|Farbtabelle]]) oder Rahmen andere Farben zu geben.
 
−
 
 
−
{| class="prettytable" border="1"
 
−
!style="background-color: #d1d4e0;" | Eingabe
 
−
!style="background-color: #d1d4e0;" | Ergebnis
 
 
|-
 
|-
−
|<div style="border:1px solid #000000; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%;">
+
| Ron || Ray || 1,89
−
<nowiki>{|</nowiki><br />
 
−
<nowiki>| style="background:#d1d4e0;" | A</nowiki><br />
 
−
<nowiki>| B</nowiki><br />
 
−
<nowiki>|-</nowiki><br />
 
−
<nowiki>| C</nowiki><br />
 
−
<nowiki>| D</nowiki><br />
 
−
<nowiki>|}</nowiki><br />
 
−
</div>
 
−
|<div style="margin:1em;">
 
−
{|
 
−
| style="background:#d1d4e0;" | A
 
−
| B
 
 
|-
 
|-
−
| C
+
| Mario || Bianchi || 1,72
−
| D
+
|- class="sortbottom"
 +
| colspan="2" | Durchschnitt: || 1,82
 
|}
 
|}
 
</div>
 
</div>

Version vom 9. Juli 2012, 16:45 Uhr

Hilfe > Tabellen


Diese Seite beschreibt die Verwendung von Tabellen im Tamriel-Almanach. Solltest du Probleme beim Erstellen einer Tabelle haben, wird dir auf der Diskussionsseite oder im Chat von den Mitautoren gerne und in der Regel auch schnell geholfen.

Einführung

Vorteil von Tabellen

Tabellen sind eine spezielle, strukturierte Form von Datenlisten. Im Gegensatz zu normalen Listen ermöglichen sie eine differenziertere, mehrdimensionale und übersichtlichere Darstellung mit vielen Informationen pro Eintrag und, falls gewünscht, auch eine Sortierbarkeit der einzelnen Spalten. Hierbei kann der Leser Daten numerisch nach Größe sortieren lassen, Begriffe können alphabetisch oder beides nach Rangordnung sortiert werden. Dadurch kann auch Mehrfachdarstellung vermieden werden. Alles Wissen kann übersichtlich in einer Tabelle verknüpft werden; Wissen wird zunehmend auch maschinenlesbar und Informationen können automatisch miteinander verknüpft werden.

Links und Bilder in Tabellen

Durch Links können in der Tabelle weiterführende oder vertiefende Artikel übersichtlich mit einzelnen Begriffen verknüpft werden. Ein Bild sagt mehr als tausend Worte gilt oft auch für Tabellen, exzessive Bildverwendungen können eine Tabelle jedoch auch unübersichtlich machen und überladen.

Technische Grundlagen

Um die Zellen einer Tabelle zu formatieren, lassen sich sowohl für die Tabelle als Ganzes als auch für einzelne Zellen HTML-Attribute angeben. Wir verwenden hier im Almanach einheitliche Tabellen, weswegen hauptsächlich mit dem class-Attribut gearbeitet werden sollte. In Einzelfällen kann auch das style-Attribut verwendet werden, wodurch sich beliebige CSS-Formatierungen realisieren lassen. Einzelne Zeilen einer Tabelle lassen sich ebenfalls formatieren, einzelne Spalten jedoch nicht, dies muss zellenweise geschehen.

Die meisten Tabellen sollten die Klasse wikitable besitzen (class="wikitable"), da sie so dem Schema der hier verwendeten Tabellen entsprechen.

Einfache Tabelle

In der MediaWiki-Syntax beginnt jede Tabelle mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.

Jede Zelle innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute. Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden, um die Tabellenstruktur übersichtlich zu halten. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.

Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|}

Zelle 1 Zelle 2

Bitte beachten:

{| |Einzelzelle |}

funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.

Tabelle mit mehreren Tabellenzeilen

Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten - setzt. Dies lässt sich beliebig oft wiederholen.

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit || trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

 bzw.

{|
| Zelle 1 || Zelle 2
|-
| Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Komplexere Tabellen

Rahmen

Bis jetzt haben unsere Tabellen eine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {|) festgelegt. Es kann eingestellt werden, ob ein Rahmen existieren soll oder nicht. Dafür werden die Klassen border_0 (kein Rahmen) und border_1 (Rahmen) verwendet. Für besondere Fälle kann die Rahmenstärke auch mit dem Argument border="x", wobei x die Stärke des Rahmens ist, eingestellt werden.

Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:

Eingabe Ergebnis

{| class="border_1"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Mit class="border_0" erhält man:

Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Titelzeilen

Eine Tabelle mit Titelzeile (Spaltenköpfe) erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett.

Eingabe Ergebnis

{| class="wikitable"
! Was
! Warum
|-
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Was Warum
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Spalten- und zeilenübergreifende Darstellung

Auch mit der neuen Wiki-Syntax ist es, genauso wie bei HTML, möglich, dass eine Zelle über mehrere Spalten reicht (colspan) oder Zeilen überspannt (rowspan). Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip

| Attribute | Inhalt

Eine Tabelle mit einer Zelle, die über zwei Spalten geht (colspan="2") sieht so aus:

Eingabe Ergebnis

{| class="wikitable"
! A
! B
! C
|-
| Zelle 1
| colspan="2" | Zelle 2
|-
| Zelle 3
| Zelle 4
| Zelle 5
|}
A B C
Zelle 1 Zelle 2
Zelle 3 Zelle 4 Zelle 5

Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (rowspan="2") sieht so aus:

Eingabe Ergebnis

{| class="wikitable"
! A
! B
|-
| rowspan="2" | Zelle 1
| Zelle 2
|-
| Zelle 4
|}
A B
Zelle 1 Zelle 2
Zelle 4

Und kombiniert:

Eingabe Ergebnis

{| class="wikitable"
! A
! B
! C
|-
| rowspan="2" colspan="2" | A1 & B1 & A2 & B2
| C1
|-
| C2
|-
| A3
| B3
| C3
|}
A B C
A1 & B1 & A2 & B2 C1
C2
A3 B3 C3

Verschachtelte Tabellen

Das Verschachteln ist mit der neuen Wiki-Syntax sehr einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

Eingabe Ergebnis

| Zelle 1
|
{|
| Zelle A
|-
| Zelle B
|}
| Zelle 3
|}

Zelle 1
Zelle A
Zelle B
Zelle 3

Aufzählungszeichen

Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.

Eingabe Ergebnis

{|
|* erster Eintrag
* zweiter Eintrag
|}
* erster Eintrag
  • zweiter Eintrag

{|
|
* erster Eintrag
* zweiter Eintrag
|}
  • erster Eintrag
  • zweiter Eintrag

Sortierbare Tabellen

Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss class="sortable" im Tabellenkopf angegeben werden.

Eine sortierbare Tabelle erkennt man daran, dass sie in den Spaltenköpfen kleine Doppelpfeilsymbole zeigt. Bei Anklicken werden die Zeilen der Tabelle nach den Werten der jeweiligen Spalte sortiert.

Eingabe Ergebnis

{| class="wikitable sortable"
! Spalte 1
! Spalte 2
! Spalte 3
|-
| 12346
| € 234,44
| fghij
|-
| 98765
| € 77,55
| abcde
|}
Spalte 1 Spalte 2 Spalte 3
12346 € 234,44 fghij
98765 € 77,55 abcde

Einschränkungen: Bei komplexen Tabellen (d. h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.

Das Sortieren funktioniert nur bei aktivem JavaScript – weil der Leser das unter Umständen ausgeschaltet hat, und auch, weil der Artikel noch druckfähig sein soll, muss die Tabelle bei der Eingabe im WikiCode schon sinnvoll sortiert sein.

Der Datentyp der obersten Zelle bestimmt den Sortierungsmodus. Erkannt werden einfache Datumsangaben, Währungen, Prozentwerte und Zahlen. Passt keiner dieser Datentypen, wird der Text in Kleinbuchstaben gewandelt und alphabetisch nach der Reihenfolge des Unicode sortiert

Zellen von der Sortierung ausschließen

Eine Spalte nicht sortieren

Man kann eine Spalte unsortierbar machen durch einfügen von class="unsortable" in den Attributen der Kopfzeile.

Eingabe Ergebnis

{| class="wikitable sortable"
! Zahlen !! Alphabet !! Datum
! Währung !! <b style="color:red">class="unsortable" |</b> Unsortierbar
|-
| 1 || Z || 02-02-2004 || 5,00 || Diese
|-
| 2 || y || 13-apr-2005 || || Spalte
|-
| 3 || X || 17.aug.2006 || 6,50 || ist
|-
| 4 || w || 01.Jan.2005 || 4,20 || unsortierbar
|- | 5 || V || 05/12/2006 || 7,15 || wie man sieht.

|}
Zahlen Alphabet Datum Währung Unsortierbar
1 Z 02-02-2004 5,00 Diese
2 y 13-apr-2005 Spalte
3 X 17.aug.2006 6,50 ist
4 w 01.Jan.2005 4,20 unsortierbar
5 V 05/12/2006 7,15 wie man sieht.

Die letzte Zeile nicht sortieren

Manchmal ist es erwünscht, die letzte Tabellenzeile von der Sortierung auszuschließen. Das kann mit class="sortbottom" in der entsprechenden Tabellenzeile erreicht werden. Alle Zeilen, die mit class="sortbottom" versehen sind, werden unten in der Tabelle angeordnet und untereinander sortiert.

Eingabe Ergebnis

{|class="wikitable sortable"
! Name !! Vorname !! Größe
|-
| John || Smith || 1,85
|-
| Ron || Ray || 1,89
|-
| Mario || Bianchi || 1,72
|- <b style="color:red">class="sortbottom"</b>
| colspan="2" | Durchschnitt: || 1,82

|}
Name Vorname Größe
John Smith 1,85
Ron Ray 1,89
Mario Bianchi 1,72
Durchschnitt: 1,82


Diese Seite basiert auf der Seite Hilfe:Tabellen aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.

Diese Seite basiert auf der Seite Hilfe:Tabellen-Referenz aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.
Abgerufen von „https://www.elderscrollsportal.de/wiki/index.php?title=Hilfe:Tabellen&oldid=116431“
  • Namensnennung 2.5
  • Powered by MediaWiki
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden