MosaPedia:Tabellen

Aus MosaPedia

Wechseln zu: Navigation, Suche

Tabellen sind ein wichtiges Gestaltungsmittel für MosaPedia-Artikel. Der folgende Artikel soll regelmäßig wiederkehrende Tabellenformatierungen erklären und MosaPedia-typische Beispiele liefern. Wirklich erschöpfende Auskunft über die Möglichkeiten der Arbeit mit Tabellen findet man in den Wikipedia-Artikeln Hilfe:Tabellen und Hilfe:Tabellen für Fortgeschrittene.

Inhaltsverzeichnis

Grundlagen

Eine einfache Tabelle

Um eine Tabelle zu erzeugen, gibt es einige einfache Befehle. Eine Tabelle beginnt immer mit {| und endet mit |}. Eine neue Zelle eröffnet man mit | in einer neuen Textzeile oder || in derselben Textzeile, eine neue Tabellenzeile erzeugt man mit |- (bei der allerersten Tabellenzeile ist dies fakultativ). Von Hause aus sind Tabellen unsichtbar. Ein einfaches Beispiel:

{|
| Das
| ist
| das
|-
| Haus
| vom
| Nikolaus.
|}
{|
|-
| Das || ist || das
|-
| Haus || vom
| Nikolaus.
|}

Ergeben beide:

Das ist das
Haus vom Nikolaus.

Unsichtbare Tabellen können beim Layout von Artikeln sehr nützlich sein, Beispiele dafür findet man weiter unten. Üblicherweise soll eine Tabelle aber natürlich sichtbar sein - dafür wird in der MosaPedia die Formatvorlage {{prettytable}} eingesetzt, die direkt in die erste Textzeile der Tabelle nach dem {| geschrieben wird. Dasselbe Beispiel wie eben:

{| {{prettytable}}
| Das || ist || das
|-
| Haus || vom || Nikolaus.
|}

Ergibt:

Das ist das
Haus vom Nikolaus.

In die erste Textzeile können noch viele weitere Befehle eingetragen werden, die sich auf die gesamte Tabelle beziehen sollen. Hier nur ein Beispiel, wie man eine Tabelle mit dem Befehl align="right" an den rechten Bildschirmrand setzt:

{| {{prettytable}} align="right"
| Das || ist || das
|-
| Haus || vom || Nikolaus.
|}

Ergibt:

Das ist das
Haus vom Nikolaus.


Formatieren von Zellen und Tabellenzeilen

Man kann einzelne Zellen oder ganze Tabellenzeilen separat formatieren, um sie z.B. farbig zu gestalten, ihre Breite oder Höhe festzulegen oder die Bündigkeit des Textes zu variieren:

  • bgcolor="#12345" (alternativ: style="background-color:#12345")
  • width="50"
  • height="30"
  • align="right/center/left"
  • valign="top/center/bottom".

Um eine ganze Tabellenzeile zu formatieren, setzt man die entsprechenden Befehle nach das jeweilige |-. Um eine einzelne Zelle zu formatieren, fügt man die Befehle nach dem einleitenden | ein und trennt sie mit einem weiteren | vom eigentlichen Zelleninhalt. Breite und Höhe werden nicht bei der Tabellenzeile eingetragen, sondern in einer beispielgebenden Zelle - die restlichen Zellen der betreffenden Spalte bzw. Zeile passen sich dann an.

Standardmäßig ist der Inhalt von Tabellenzellen linksbündig und in der Vertikalen zentral. Bei den Farben kann man die vordefinierten Grundfarben wie red, blue, yellow etc. eintragen, oder man holt sich aus der MosaPedia:Farbtabelle die Hexadezimalcodes (#A23BF etc.) der gesamten Farbpalette.

{| {{prettytable}}
|- align="right"
| bgcolor="#1C86EE" | Das || width="200" | ist || bgcolor="red" width="100" | das
|- bgcolor="#EECBAD"
|  height="50" | Haus || valign="top" align="center" | vom || valign="bottom" | Nikolaus.
|}

oder

{| {{prettytable}}
|- align="right"
| bgcolor="#1C86EE" | Das
| width="200" | ist
| bgcolor="red" width="100" | das
|- bgcolor="#EECBAD"
| height="50" | Haus
| valign="top" align="center" | vom
| valign="bottom" | Nikolaus.
|}

Ergeben:

Das ist das
Haus vom Nikolaus.

Dabei gilt, dass die Formatierung einer Zelle die Formatierung einer Tabellenzeile "überstimmt", diese wiederum die Formatierung der Gesamttabelle. Im folgenden Beispiel wird die gesamte Tabelle rot eingefärbt, im Widerspruch dazu die zweite Zeile in grün und im Widerspruch dazu schließlich deren linke Zelle gelb. Außerdem ist die erste Zeile rechtsbündig formatiert, im Widerspruch dazu die rechte Zelle aber linksbündig:

{| {{prettytable}} style="background-color:red"
|- align="right"
| Das || ist || align="left" | das
|- bgcolor="green"
| bgcolor="yellow" | Haus || vom || Nikolaus.
|-
| Tri || tra || trullala.
|}

Ergibt:

Das ist das
Haus vom Nikolaus.
Tri tra trullala.



Die relative Breite der einzelnen Tabellenspalten zueinander kann auch in Prozent der Gesamtbreite angegeben werden. Soweit es die Bildschirmbreite zulässt, wird diese Gesamtbreite der Tabelle dann auf der Grundlage derjenigen Spalte berechnet, deren Mindestbreite unabhängig von der Prozentzahl festgelegt ist (z.B. automatisch durch die Länge eines Wortes, das in einer ihrer Zellen steht, oder durch die zusätzliche Angabe einer absoluten Breite).

Im folgenden Beispiel betragen die Spaltenbreiten 5%, 25% und 70% der Breite der gesamten Tabelle. Dabei kann man auf die Angabe bei einer der Spalten verzichten, da sie sich aus der Differenz zu 100% ergibt. Die Referenzspalte in diesem Fall ist die erste Spalte - durch die Länge des Wortes "Haus" in der mittleren Zelle und die Prozentangabe wird festgelegt, wie viel 5% der Gesamttabelle ausmachen, und daraus errechnet sich die absolute Breite der Tabelle.

{| {{prettytable}}
|- bgcolor="#FFF8DC"
| width="5%" | Das 
| width="25%" | ist
| width="70%" | das
|-
| Haus || des || Nikolaus.
|-
| Tri
| tra
| trullala.
|}
{| {{prettytable}}
|- bgcolor="#FFF8DC"
| width="5%" | Das 
| ist
| width="70%" | das
|-
| Haus || des || Nikolaus.
|-
| Tri
| tra
| trullala.
|}

Ergeben beide:

Das ist das
Haus des Nikolaus.
Tri tra trullala.

Zellen über mehrere Zeilen oder Spalten

Um einzelne Zellen über mehrere Zeilen oder Spalten zu ziehen, benutzt man die Befehle rowspan="..." bzw. colspan="...". Die durch diese Zellvergrößerungen überflüssigen Zellen werden entsprechend in der Tabellenkonstruktion ausgelassen. Beispiel:

{| {{prettytable}}
|-
| rowspan="4" | Das
| colspan="2" | ist
| colspan="2" | das
|-
| rowspan="3" | Haus
| colspan="2" rowspan="2" | vom
| Ni
|-
| ko
|-
| laus
| Tritra
| trullala
|}

Ergibt:

Das ist das
Haus vom Ni
ko
laus Tritra trullala

Einbetten von zusätzlichen Formatvorlagen in Tabellenzellen

Manchmal ist es hilfreich, wenn man den Inhalt der Tabellenzellen genauso layouten kann, wie normalen Quelltext; z.B. eine weitere Tabelle in eine Zelle einbauen, oder eine normale Überschrift, oder eine Liste. Das geht, indem man nach dem zellenöffnenden | erst in der nächsten Textzeile beginnt. Die auf diese Weise erzeugten Überschriften werden von der Wikisoftware ganz normal behandelt, tauchen also oben im Inhaltsverzeichnis auf und können über den "Bearbeiten"-Knopf separat geändert werden. Beispiele:

{| {{prettytable}}
|-
| Das
|
{| {{prettytable}}
|-
| ist
| das
|-
| colspan="2" | Haus
|}
| vom
|-
| colspan="3" | Nikolaus.
|}
{| {{prettytable}}
|-
|
==== Erste Hälfte ====
Das ist
|
==== Zweite Hälfte ====
das Haus
|-
| colspan="2" |
==== Dritte Hälfte ====
vom Nikolaus.
|}
{| {{prettytable}}
|-
| bgcolor="yellow" |
* Das
* ist
* das
|
# Haus
# vom
# Nikolaus.
|-
| colspan="2" | Tritratrullala.
|}

Ergeben:

Das
ist das
Haus
vom
Nikolaus.

Erste Hälfte

Das ist

Zweite Hälfte

das Haus

Dritte Hälfte

vom Nikolaus.

  • Das
  • ist
  • das
  1. Haus
  2. vom
  3. Nikolaus.
Tritratrullala.

Bilder lassen sich hingegen ganz normal in Tabellen einbinden. Beispiel:

{| {{prettytable}}
|- bgcolor="pink"
| [[Bild:Tb 1-76.jpg|x100px]]
| [[Bild:Tb 2-76.jpg|x100px]]
| rowspan="2" | [[Bild:Tb 5-76.jpg]]
|-
| [[Bild:Tb 3-76.jpg|x100px]]
| [[Bild:Tb 4-76.jpg|x100px]]
|}

Ergibt:

Bild:Tb 5-76.jpg

Tabellenüberschriften

Um eine Tabellenzelle hervorzuheben, was vor allem für die Kopfzeile immer wieder wichtig ist, ersetzt man den einleitenden | durch ein Ausrufungszeichen. Dadurch wird der Inhalt der Zelle fett und (zumindest bei den meisten Browsern) zentriert dargestellt. Ordnet man die Einzelzellen im Quelltext in einer Zeile an, gilt diese Fett/Zentriert-Schreibung für die ganze entstehende Tabellenzeile; ordnet man die Zellen im Quelltext untereinander an, kann man sie einzeln mit ! versehen. Außerdem kann man eine Tabelle mit einer zusätzlichen, zentrierten, über der eigentlichen Tabelle "schwebenden" Überschrift versehen, indem man die erste Zeile mit |+ beginnen lässt. Diese schwebende Überschrift passt sich automatisch der Tabellenbreite an. Beispiel:

{| {{prettytable}}
|+ Wunderschönes Haus des Nikolaus
|- bgcolor="green"
! Das || ist || das
|-
| Haus || des || Nikolaus.
|-
| Tri
| tra
! trullala.
|}

Ergibt:

Wunderschönes Haus des Nikolaus
Das ist das
Haus des Nikolaus.
Tri tra trullala.

Sortierbare Tabellen

Manchmal kann es sinnvoll sein, Tabelleninhalte nach wechselnden Kriterien anordnen zu lassen. Dafür gibt es den Befehl class="sortable", der in die erste Tabellen-Quelltextzeile eingetragen wird. Dadurch entstehen in den Zellen der Kopfzeile kleine Kästchen, die man anklicken und damit die Sortierkriterien der Tabelle ändern kann. Wichtig: Nur völlig regelmäßige Tabellen lassen sich sortieren - es darf keine Zellen über mehrere Zeilen oder Spalten geben. Beispiel:

{| {{prettytable}} class="sortable"
|- bgcolor="yellow"
! Spalte A || Spalte B || Spalte C
|-
| 123 || DEF || !"§
|-
| 456 || GHI || $%&
|-
| 789 || ABC || /()
|}

Ergibt:

Spalte A Spalte B Spalte C
123 DEF  !"§
456 GHI $%&
789 ABC /()

Beispiele für häufig benutzte Tabellen

Bestimmte Tabellenarten werden in der MosaPedia immer wieder eingesetzt. Man kann sie sich von hier in den Artikel kopieren und entsprechend anpassen.

Stammdatentabelle mit einem Bild

{| {{Prettytable}} align="right"
| colspan="3" align="center" bgcolor="#FEDBCA" | '''Stammdaten'''
|-
| bgcolor="#F0FFF0" align="center" | '''Titelbild'''
| '''Erschienen''' || Monat Jahr
|-
| bgcolor="#F0FFF0" rowspan="9" width="170" | [[bild:Bildfehlt.jpg|center]]
| '''Nachdruck''' || ___
|-
| '''Umfang''' || __ Seiten
|-
| '''Panel''' || __ + Titelbild
|-
| '''Katalog''' || ___
|- bgcolor="#FFFFE0"
| rowspan="3" | '''Serie'''
| Liste aller ___
|-
| bgcolor="#FFFFE0" | '''Hauptserie:''' ___
|-
| bgcolor="#FFFFE0" | '''Kapitel:''' ___
|- bgcolor="#BFEFFF"
| '''Heft davor''' || ___
|- bgcolor="#CFCFCF"
| '''Heft danach''' || ___
|}

Stammdaten

Titelbild Erschienen Monat Jahr
Nachdruck ___
Umfang __ Seiten
Panel __ + Titelbild
Katalog ___
Serie Liste aller ___
Hauptserie: ___
Kapitel: ___
Heft davor ___
Heft danach ___


Stammdatentabelle mit zwei Bildern

{| {{Prettytable}} align="right"
| colspan="2" bgcolor="#F0FFF0" align="center" | '''Umschlaggestaltung'''
|-
| colspan="2" bgcolor="#F0FFF0" |
{| align="center" style="background:#F0FFF0"
! Bild 1
! Bild 2
|-
| [[Datei:Bildfehlt.jpg|center]]
| [[Datei:Bildfehlt.jpg|center]]
|}
|-
| colspan="2" align="center" bgcolor="#FEDBCA" | '''Stammdaten'''
|-
| '''Erschienen''' || ___ ____
|-
| '''Nachdruck''' || ___
|-
| '''Umfang''' || __ Seiten
|-
| '''Panel''' || __ + Titelbild
|-
| '''Katalog''' || ___
|- bgcolor="#FFFFE0"
| rowspan="3" | '''Serie'''
| Liste aller ___
|-
| bgcolor="#FFFFE0" | '''Hauptserie:''' ___
|-
| bgcolor="#FFFFE0" | '''Kapitel:''' ___
|-  bgcolor="#BFEFFF"
| '''Heft davor''' || ___
|- bgcolor="#CFCFCF"
| '''Heft danach''' || ___
|}
Umschlaggestaltung
Bild 1 Bild 2
Stammdaten
Erschienen ___ ____
Nachdruck ___
Umfang __ Seiten
Panel __ + Titelbild
Katalog ___
Serie Liste aller ___
Hauptserie: ___
Kapitel: ___
Heft davor ___
Heft danach ___

Inhaltsverzeichnis

Ein schönes Beispiel für eine unsichtbare Tabelle. Ein Teil der Tabellensyntax ist in der Vorlage:Inhalt verborgen.

{|
{{Inhalt|1|2|Autor: ''Titel''}}
{{Inhalt|3|4|Autor: ''Titel''}}
{{Inhalt|5||Autor: ''Titel''}}
{{Inhalt|6||Autor: ''Titel''}}
{{Inhalt|7|10|Autor: ''Titel''}}
|}
S. 1−2 ... Autor: Titel
S. 3−4 ... Autor: Titel
S. 5 ... Autor: Titel
S. 6 ... Autor: Titel
S. 7−10 ... Autor: Titel

Platzsparend angeordnete Listen mit Überschriften

{|
| valign="top" |
==== Überschrift 1 ====
*
*
| width="20" |
| valign="top" |
==== Überschrift 2 ====
*
*
*
|-
| valign="top" |
==== Überschrift 3 ====
*
*
*
*
|
| valign="top" |
==== Überschrift 4 ====
*
*
*
*
*
|}

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Persönliche Werkzeuge