Fandom


H:T   

Weitere Infos Bearbeiten

Leere Zellen in Tabellen mit Rahmen Bearbeiten

Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen   setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:

'normal'
Zelle 1 Zelle 2
Zelle 9 Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:

{| border="1"
!colspan="4" align="center"|'Titel'
|-
| Zelle 1
| Zelle 2
|  
|  
|-
|  
|  
|  
|  
|-
| Zelle 9
|  
|  
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}

und stellt sich so dar:

'sicherer'
Zelle 1 Zelle 2    
       
Zelle 9     Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Spaltenbreiten Bearbeiten

Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.

Eingabe Ergebnis

{| border="1"
! width="10%" | 10 %
! width="20%" | 20 %
! width="40%" | 40 %
|-
|A
|B
|C
|}

10 % 20 % 40 %
A B C

{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
|A
|B
|C
|}

50 100 200
A B C

Absolute Angaben in Pixeln sind eher bei Grafiken sinnvoll.

Zellenabstände mit cellspacing und cellpadding Bearbeiten

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.

Eingabe Ergebnis

{|
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="0"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="10"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

Ausrichtung Bearbeiten

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.

Eingabe Ergebnis

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

Links Zentriert Rechts
Oben xx xxx xx
Mitte x x x
Unten x x x

Andere HTML-Formatierungen Bearbeiten

Mit der neuen Wiki-Syntax ist es möglich, alte HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen (style="background:#ABCDEF;", Farbtabelle]) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.

Eingabe Ergebnis

{|
| style="background:#ABCDEF;" | A
|B
|-
|C
|D
|}

A B
C D

Beispieltabelle

Beispielhafte Tabelle in einem Wiki

Das Erstellen von Tabellen mit Wikisyntax kann mitunter eine große Herausforderung sein. Irgendwann aber kommt man nicht mehr drum rum, spätestens dann, wenn man zum Beispiel eine Infobox als Vorlage erstellen möchte.

Einfache Tabellen

Grundform

Eine Tabelle besteht grundsätzlich aus gleich großen Zellen. Sie wird im Wikitext zeilen- und zellenweise definiert, also erst alle Spalten für Zeile 1, dann alle Spalten für Zeile 2, usw. Es muss darauf geachtet werden, dass für jede Zeile die passende Anzahl an Zellen hinzugefügt wird.

Im Prinzip schreibt man pro Wikitextzeile eins der folgenden Syntaxelemente:

Element Erklärung
{| beginnt eine Tabelle
|} beendet eine Tabelle
| »blablabla« fügt an die aktuelle Zeile eine Zelle mit Inhalt an
! »blablabla« fügt an die aktuelle Zeile eine Überschriftenzelle mit Inhalt an
|- beginnt eine neue Zeile
|+ »blablabla« lässt über der Tabelle eine Überschrift anzeigen

Um Platz zu sparen, kann man die Inhalte einer Tabellenzeile (mit mehreren Zellen) direkt hintereinander schreiben, dabei werden dann die einzelnen Zellen mit zwei Strichen getrennt.

Beispiel
Eingabe Ergebnis

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Tabellenklassen

Standardmäßig hat eine Tabelle unsichtbare Ränder und einen durchsichtigen Hintergrund. Mithilfe von CSS-Klassen lassen sich Tabellen ohne aufwendiges Herumprobieren in ein einheitliches, ansprechendes Aussehen bringen.

Klassenzuweisungen erfolgen in der Kopfzeile einer Tabelle. Mehrere Klassen werden durch Leerzeichen getrennt zwischen die Anführungszeichen geschrieben. Die folgenden Klassen sind in jedem Wiki vordefiniert:

Eingabe Ergebnis

{| class="article-table"
! Überschrift 1 !! Überschrift 2
! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="wikitable"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="infobox"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Sortierbare Tabellen

Die Klasse sortable fügt den Spalten einer Tabelle Sortierknöpfe hinzu:[1]

Eingabe Ergebnis

{| class="wikitable sortable"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 6 || Zelle 9
|-
| Zelle 2 || Zelle 5 || Zelle 7
|-
| Zelle 3 || Zelle 4 || Zelle 8
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 6 Zelle 9
Zelle 2 Zelle 5 Zelle 7
Zelle 3 Zelle 4 Zelle 8

Siehe auch: Hilfe:sortierbare Tabellen

Einklappbare Tabellen

Die Klasse mw-collapsible lässt eine Tabelle per Klick zusammenklappen, sodass nur noch die erste Zeile angezeigt wird. Wenn die Tabelle von Anfang an zusammengeklappt sein soll, muss zusätzlich die Klasse mw-collapsed hinzugefügt werden:[1]

Eingabe Ergebnis

{| class="wikitable mw-collapsible mw-collapsed"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Siehe auch: mediawikiwiki:Manual:Collapsible elements

Inline-CSS

CSS-Stylings lassen sich auf die ganze Tabelle, einzelne Zeilen oder einzelne Zellen anwenden. Dabei werden die CSS-Anweisungen einem Style-Attribut zugeordnet, so wie man es auch innerhalb eines HTML-Tags machen würde.

  • Style für die gesamte Tabelle folgt rechts hinter den Tabellen-Seitenkopf.
  • Style für eine Tabellenzeile kommt hinter das Steuerzeichen, das die neue Zeile einleitet.
  • Bei einzelnen Zellen kommt die Style-Anweisung vor dem Zelleninhalt und wird mit einem einzelnen senkrechten Strich abgeschlossen und vom eigentlichen Inhalt getrennt.

Siehe Hilfe:Inline-CSS#Tabellen zu den eigentlichen Gestaltungsmöglichkeiten.

Beispiele:
Eingabe Ergebnis[2]

{| class="wikitable" style = "border: medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis[2]

{| class="wikitable"
|- style="border:medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|- style="border:medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="wikitable"
! Überschrift 1
! Überschrift 2 !! style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Überschrift 3
|-
| style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Zellen vereinen

Übergreifende Zellen lassen sich mit colspan="…" (über wieviele Spalten soll die Zelle nach rechts gehen?) und rowspan="…" (über wieviele Zeilen soll die Zelle nach unten gehen?) definieren. Diese Anweisungen kommen an dieselben Stellen wie Stylevorgaben für einzelne Zellen.

Beispiel

Beispiel
Eingabe Ergebnis

{| class="wikitable"
| colspan="3" | Zelle 1
|-
| Zelle 2
| rowspan="2" | Zelle 3
| Zelle 4
|-
| rowspan="2" | Zelle 5 || Zelle 6
|-
| colspan="2" | Zelle 7
|}

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

Erweitertes Beispiel

Das folgende erweiterte Beispiel zeigt einige Anwendungen in Kombination und nutzt ein paar Tricks:

  1. Die Tabelle besteht eigentlich aus zwei Tabellen.
  2. Statt einer einzeiligen und einspaltigen Tabelle werden die HTML-Tags <div style="…">…</div> genutzt, um eine Box zu modellieren.
Ein Beispiel-Layout
Erste Überschrift Zweite Überschrift
oben links rechte Seite
unten links unten mittig
RTE table RTE table
Willkommen in der Zwillingsstadt
{| border="1" style="border-collapse:collapse; width:330px"
|+'''Ein Beispiel-Layout'''
|-
!            style="background:#efefef; color:#111"| Erste Überschrift
!colspan="2" style="background:#ffdead; color:#111"| Zweite Überschrift
|-
| oben links
| <!-- leer -->
|rowspan="2"| rechte Seite
|-
| unten links
| unten mittig
|}

{| style="border:1px solid; border-top:none; width:330px;"
|-
| [[Datei:RTE table.png]]
| [[Datei:RTE table.png]]
|-
|style="text-align:center" colspan="2"| <div style="border:1px solid red;">Willkommen in der Zwillingsstadt</div>
|}

Links

  1. 1,0 1,1 Diese Funktion benötigt aktiviertes Javascript im Browser.
  2. 2,0 2,1 Der Hintergrund der Überschriftenzellen wird in den ersten beiden Beispielen nicht geändert, weil ihr Hintergrund über die Klasse "wikitable" vorgegeben ist und unsere Hintergrundvorgaben für Tabellen bzw. Zeilen überschreibt. Erst wenn wir tatsächlich den Hintergrund direkt für Zellen vorgeben, hat unsere händische Vorgabe Vorrang. Dies ist eine elementare Eigenschaft kaskadierender Stylesheets (Cascading stylesheets).

Mehr Hilfe

Nutzung von Community-Inhalten gemäß CC-BY-NC-ND-Lizenz , sofern nicht anders angegeben.