Hilfe:Tabellen

Aus PlusPedia
Wechseln zu: Navigation, Suche
Coin Übrigens: Die PlusPedia ist NICHT die Wikipedia.
Wir sind ein gemeinnütziger Verein, PlusPedia ist werbefrei. Wir freuen uns daher über eine kleine Spende!

1
Handbuch PlusPedia


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 definierte Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung. Die Gestaltungsmöglichkeiten richten sich nach dem jeweiligen Thema.

2 Grundlagen

Jede Tabelle beginnt 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.

Eine neue Tabellenzeile wird mit |- erzeugt. Innerhalb jeder Zeile können beliebig viele Zellen stehen. Eine Zelle wird mit einem senkrechten Strich am Zeilenanfang (|) eingeleitet. Mit zwei senkrechten Strichen (||) können mehrere Zellen in einer Textzeile zusammengeschrieben werden.

Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus:

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

Und stellt sich so dar:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

3 Gestaltung

3.1 Rahmen

Viele Tabellen haben keine oder eine kaum sichtbare Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {| ) festgelegt, dabei ist zu beachten, eine Leerstelle zu lassen. Meist kann nur die Rahmenstärke festgelegt werden, mit dem Argument: border="n" wobei n die Stärke des Rahmens ist. Ohne diesen Parameter wird der Standardwert auf border=0 gesetzt. Die Rahmenstärke bei class="wikitable" ergibt einen dünnen Rahmen. Die Farbe des Rahmens ist standardmäßig hellgrau, erscheint aber vor einem farbigen Hintergrund, der mit bgcolor verändert werden kann, etwas anders.

3.1.1 Beispiele

Das Beispiel border=1 sieht mit Rahmen im Quelltext so aus:

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

und stellt sich so dar:

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


Bei Verwendung von class="wikitable" sieht der Rahmen so aus:

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

Der Text in der Überschriftzeile wird fett angezeigt.

 {| 
 ! Zelle A !! Zelle B  
 |-
 |Zelle 1
 |Zelle 2
 |-
 |Zelle 3
 |Zelle 4
 |-
 |Zelle 5
 |Zelle 6
 |}
  

und stellt sich dann so dar:

Zelle A Zelle B
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6


3.1.2 Sortierbare Tabellen

Um die Zeilen einer Tabelle sortieren zu können, wird der Parameter "sortable" verwendet. Dabei können alle oder einzelne Spalten sortiert werden. Im Quelltext sieht es aus wie folgt:

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

Daraus wird dann

Zelle A Zelle B
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Bei Zahlen ist zu beachten, dass Umlaute sowie die US-amerikanische Verwendung von Punkt und Komma zu falschen Sortierungen führen können.

3.2 Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden.

3.2.1 Prozentual

Bei prozentualen Spaltenbreiten ist die Angabe der Breiten nur bei jeweils einer Zelle pro Spalte notwendig und sinnvoll. Die Summe der Spaltenbreiten sollte 100 Prozent ergeben.

{| class="wikitable"
 ! width="15%" | Spaltenbreite 15 %
 ! width="60%" | Spaltenbreite 60 %
 ! width="25%" | Spaltenbreite 25 %
 |-
 | Zelle A
 | Zelle B
 | Zelle C
 |}

und stellt sich so dar:

Spaltenbreite 15 % Spaltenbreite 60 % Spaltenbreite 25 %
Zelle A Zelle B Zelle C

3.2.2 Pixel

Auch bei absoluten Spaltenbreiten ist die Angabe der Breiten nur bei jeweils einer Zelle pro Spalte notwendig und sinnvoll.

{| border="1"
 ! width="400" | Spaltenbreite 400 Pixel
 ! width="200" | Spaltenbreite 200 Pixel
 ! width="100" | Spaltenbreite 100 Pixel
 |-
 | Zelle A
 | Zelle B
 | Zelle C
 |}

und stellt sich so dar:

Spaltenbreite 400 Pixel Spaltenbreite 200 Pixel Spaltenbreite 100 Pixel
Zelle A Zelle B Zelle C

3.3 Rowspanning und Colspanning

Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich, eine Zelle über mehrere Zeilen reichen zu lassen, ein so genanntes rowspan. Um rowspan einzuschalten, muss man vor der betreffenden Zelle, aber unbedingt in der gleichen Zeile, das rowspan-Argument einfügen, etwa in der Form rowspan=n wobei n für die Anzahl der Zeilen steht, über die die Zelle reichen soll. Soll eine Zelle über mehrere Spalten reichen benutze man colspan.

3.3.1 Beispiel

Eine Tabelle, in der Zelle 2 über zwei Spalten reicht, sieht im Text so aus:

{| border=1
 |Zelle 1 
 |rowspan=2 | Zelle 2, mit rowspan
 |Zelle 3
 |- 
 |Zelle 4
 |Zelle 5
 |}

und stellt sich so dar:

Zelle 1 Zelle 2, mit rowspan Zelle 3
Zelle 4 Zelle 5

3.4 Verschachtelte Tabellen

Das Verschachteln ist mit den neuen Wiki-Befehlen 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. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf!

3.4.1 Beispiel

Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

{| border=1
 |Zelle 1
 |
 {| border=2
 |Zelle A
 |-
 |Zelle B
 |}
 |Zelle 3
 |}

und stellt sich so dar:

Zelle 1
Zelle A
Zelle B
Zelle 3

3.5 Beschriftung

Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. 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 Wiki-Befehlen formatieren.

3.5.1 Beispiel

Eine Tabelle, mit Beschriftung, sieht im Text so aus:

{| border=1
 |+ Dies ist eine '''Beschriftung''', die ''ziemlich'' lang ist.
 |Zelle 1
 |Zelle 2
 |-
 |Zelle 3
 |Zelle 4
 |}

und stellt sich so dar:

Dies ist eine Beschriftung, die ziemlich lang ist.
Zelle 1 Zelle 2
Zelle 3 Zelle 4

3.6 Farbgestaltung

Für die farbliche Gestaltung einer Tabelle gibt es mehrere Möglichkeiten, wobei man sowohl jede einzelne Tabellenzelle als auch die gesamte Tabelle mit einem beliebigen Farbhintergrund aus dem Spektrum der RGB-Farbcodes gestalten kann, was durch Mischen der drei Grundfarben erfolgt. Zur Auswahl von RGB-Farbcodes stehen im Web verschiedene Seiten zur Verfügung.[1] Wer aus einem Bildschirmbild den RGB-Code seiner Wunschfarbe ermitteln will, kann sogenannte Color-Picker verwenden, die pixelgenau den Farbcode aus einem Bild ermitteln können.[2] Die Syntax mit jedem Parameter kann die Nummer des RGB-Farbcodes verwenden.

  • Mit dem Parameter bgcolor ist es am einfachsten:
 {| class="wikitable sortable"
 |- 
 !Farbe
 !Farbname
 |-
 | bgcolor="FF0000" | 
 | [[Rot]]
 |-
 | bgcolor="00FF00" | 
 | [[Grün]] 
 |-
 | bgcolor="0000FF" | 
 | [[Blau]] 
|}

Gegenstand Untergruppe
Rot
Grün
Blau


  • Innerhalb einer Tabelle können 9 Hintergrundfarben definiert werden. Hierzu verwendet man die Syntax: class="hintergrundfarbex"| am Anfang der Tabellenzelle, wobei "x" für die Ziffern 1-9 steht.
{| class="wikitable"
 ! Hintergrundfarbe
 ! RGB-Farbcode
 |-
 | hintergrundfarbe1
 | class="hintergrundfarbe1"| #F9F9F9
 |-
 | hintergrundfarbe2
 | class="hintergrundfarbe2"| #FFFFFF
 |-
 | hintergrundfarbe3
 | class="hintergrundfarbe3"| #FFFF40
 |-
 | hintergrundfarbe4
 | class="hintergrundfarbe4"| #FFAA00
 |-
 | hintergrundfarbe5
 | class="hintergrundfarbe5"| #E0E0E0
 |-
 | hintergrundfarbe6
 | class="hintergrundfarbe6"| #B3B7FF
 |-
 | hintergrundfarbe7
 | class="hintergrundfarbe7"| #FFCBCB
 |-
 | hintergrundfarbe8
 | class="hintergrundfarbe8"| #FFEBAD
 |-
 | hintergrundfarbe9
 | class="hintergrundfarbe9"| #B9FFC5
 |}

erzeugt folgende Tabelle:

Hintergrundfarbe RGB-Farbcode
hintergrundfarbe1 #F9F9F9
hintergrundfarbe2 #FFFFFF
hintergrundfarbe3 #FFFF40
hintergrundfarbe4 #FFAA00
hintergrundfarbe5 #E0E0E0
hintergrundfarbe6 #B3B7FF
hintergrundfarbe7 #FFCBCB
hintergrundfarbe8 #FFEBAD
hintergrundfarbe9 #B9FFC5
  • Eine weitere Möglichkeit zur farblichen Gestaltung besteht per css-style. Die nachfolgende Tabelle ist übrigens ein Beispiel dafür, dass man Tabellen nicht nur oben mit Überschriften oder hervorgehobenen Beschriftungen versehen kann, sondern auch links, rechts, unten und auch mittendrin. Solche Farben wie im folgenden Beispiel sind auch für oder anstelle von Navigationsleisten oder Infoboxen hilfreich.
{| class="wikitable"
 ! Hintergrundfarbe
 ! Farbe
 ! RGB-Farbcode
 ! Hintergrundfarbe
 |-
 ! Blue-Violet
 | style="background-color:#8a2be2"|
 | 8A2BE2
 ! BlueViolet
 |-
 ! Aquamarine1
 | style="background-color:#7fffd4"|
 | 7FFFD4
 ! Aquamarine1
 |-
 ! RosyBrown1
 | style="background-color:#ffc1c1"|
 | FFC1C1
 ! RosyBrown1
 |-
 ! Chocolate
 | style="background-color:#d2691e"|
 | D2691E
 ! Chocolate
 |-
 ! Grey57
 | style="background-color:#919191"|
 | 919191
 ! Grey57
 |-
 ! OlivDrab1
 | style="background-color:#c0ff3e"|
 | C0FF3E
 ! OlivDrab1
 |-
 ! LightCoral
 | style="background-color:#f08080"|
 | F08080
 ! LightCoral
 |-
 ! Maroon1
 | style="background-color:#ff34b3"|
 | FF34B3
 ! Maroon1
 |-
 ! NavajoWhite
 | style="background-color:#ffdead"|
 | FFDEAD
 ! NavajoWhite
 |}

erzeugt folgende Tabelle:

Hintergrundfarbe Farbe RGB-Farbcode Hintergrundfarbe
Blue-Violet 8A2BE2 BlueViolet
Aquamarine1 7FFFD4 Aquamarine1
RosyBrown1 FFC1C1 RosyBrown1
Chocolate D2691E Chocolate
Grey57 919191 Grey57
OlivDrab1 C0FF3E OlivDrab1
LightCoral F08080 LightCoral
Maroon1 FF34B3 Maroon1
NavajoWhite FFDEAD NavajoWhite

3.7 Bilder und Tabellen

Bilder in Tabellen zu formatieren ist mit den neuen Wiki-Befehlen einfacher geworden. Möglich wird dies mit class-Argumenten. Class-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen, siehe oben) oder am Anfang einer Zelle. Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften. Die beiden üblichen class-Argumente sind flag und rimage. Sie werden mittels eines class=flag, bzw. class=rimage eingebunden. Mit class=rimage wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben. Mit class=flag wird der Text zwar ebenfalls zentriert, aber nicht verkleinert und auch nicht auf die rechte Seite verschoben. Dies wird im folgenden Beispiel gezeigt.

3.8 Aufzählungen

Listen bzw. Aufzählungen sind in Tabellen ebenfalls möglich. Wichtig ist lediglich, dass die Aufzählungszeichen "*" oder "#" innerhalb einer Zelle unbedingt am Anfang der Zeile stehen:

{| class="wikitable"
! Phase
! Monate
|-
| Blütezeit
|
#[[Januar]]
#[[Februar]]
|}

erzeugt folgende Tabelle:

Phase Monate
Blütezeit
  1. Januar
  2. Februar

Mit Bildern ist folgendes möglich:

{| class="wikitable"
! Blütenfarbe
! Art
! Habitus
! Blüte
! Frucht/Samen
! Information
|-
| style="background-color:#ffffff"| weiß
| [[Schneeglöckchen]]<br>''Galanthus nivalis''<br>Blüte: Feb-Mrz
| [[Datei:Schneeglöckchen 01.jpg|thumb|150px]]
| [[Datei:Schneeglöckchen4.JPG|thumb|150px]]
| [[Datei:Schneeglöckchen1.jpg|thumb|150px]]
| 
* Ausdauernde mehrjährige Zwiebelpflanze.
* Bis 15 cm groß.
* Dreizählige Blüte mit drei freien äußeren und drei inneren, verwachsenen Blütenhüllblättern.
* Insektenbestäubung
* Kapselfrüchte mit Samen.
* Ameisenverbreitung
|-
|}

erzeugt folgende Tabelle:

Blütenfarbe Art Habitus Blüte Frucht/Samen Information
weiß Schneeglöckchen
Galanthus nivalis
Blüte: Feb-Mrz
Schneeglöckchen 01.jpg
Schneeglöckchen4.JPG
Schneeglöckchen1.jpg
  • Ausdauernde mehrjährige Zwiebelpflanze.
  • Bis 15 cm groß.
  • Dreizählige Blüte mit drei freien äußeren und drei inneren, verwachsenen Blütenhüllblättern.
  • Insektenbestäubung
  • Kapselfrüchte mit Samen.
  • Ameisenverbreitung

4 Probleme und weitere Hinweise

Bestimmte Sonderzeichen führen zu Problemen bei der Darstellung und müssen daher vermieden werden. Die automatische Zählung von Zeilen funktioniert z.B. nicht, sondern nur innerhalb der jeweiligen Zelle. Weitere Gestaltungsmöglichkeiten zeigen folgende Beispiele:

Eigenschaft Bedeutung Einheit
Sdp.20 Siedepunkt bei einem Druck von 20 mm Hg Grad Celsius [°C]
d20°/15° Dichte bei 20°C, bezogen auf Wasser bei 15°C [g/cm3]
ηD15 Brechzahl für Na- Linie bei 15°C
Schmp. Schmelzpunkt Grad Celsius [°C]
[α]D20 spez. Drehung der Polarisationsebene bei 20°C Grad [°]

5 Einzelnachweise

  1. Farb-Tabelle.de
  2. Freeware:Pixie

6 Quellen

Diesen Artikel melden!
Verletzt dieser Artikel deine Urheber- oder Persönlichkeitsrechte?
Hast du einen Löschwunsch oder ein anderes Anliegen? Dann nutze bitte unser Kontaktformular

PlusPedia Impressum
Diese Seite mit Freunden teilen:
Mr Wong Digg Delicious Yiggit wikio Twitter
Facebook




Bitte Beachte:
Sämtliche Aussagen auf dieser Seite sind ohne Gewähr.
Für die Richtigkeit der Aussagen übernimmt die Betreiberin keine Verantwortung.
Nach Kenntnissnahme von Fehlern und Rechtsverstößens ist die Betreiberin selbstverständlich bereit,
diese zu beheben.

Verantwortlich für jede einzelne Aussage ist der jeweilige Erstautor dieser Aussage.
Mit dem Ergänzen und Weiterschreiben eines Artikels durch einen anderen Autor
werden die vorhergehenden Aussagen und Inhalte nicht zu eigenen.
Die Weiternutzung und Glaubhaftigkeit der Inhalte ist selbst gegenzurecherchieren.


Typo3 Besucherzähler - Seitwert blog counter
java hosting vpn norway