70.0% aller Heft-Artikel enthalten bereits eine Handlungszusammenfassung! Hilf mit und erstelle auch für die restlichen Romane eine Inhaltsangabe!

  

Hilfe:Tabellen

Aus Maddraxikon
Zur Navigation springen Zur Suche springen

Handbuch  →   Problemlösungen



Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten.

Auch die gute Beeinflussung der graphischen Gestaltung mit Hilfe von Tabellen sorgt für deren reichliche Verwendung, auch wenn dies nicht ihrer Idee entspricht: Tabellen sollten verwendet werden, 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, z. B. nach Jahreszahlen oder mit alphabetischer Anordnung.

Andererseits sind Tabellen komplizierter zu überarbeiten als normaler Text. Deshalb sollten sie nur in Fällen eingesetzt werden, wo mit ihrer Hilfe tatsächlich eine bessere Übersicht erzielt wird oder in denen die Sortierung klar ist.

Die hier vorgestellten Beispiele können auch von Benutzern ohne besondere Kenntnisse in HTML, CSS und Javascript angewendet werden.

Grundgerüst

Wiki-Code für ein einfaches Grundgerüst, deren Formatierung bereits durch die Klasse wikitable voreingestellt ist. Diese Klasse funktioniert auch in anderen Wikis:

Kopfzeile Überschrift Spalte 1 Kopfzeile Überschrift Spalte 2
Zeile 1, Zelle 1 Zeile 1, Zelle 2
Zeile 2, Zelle 1 Zeile 2, Zelle 2
{| class="wikitable" border="1"
|-
! Kopfzeile Überschrift Spalte 1
! Kopfzeile Überschrift Spalte 2
|-
| Zeile 1, Zelle 1
| Zeile 1, Zelle 2
|-
| Zeile 2, Zelle 1
| Zeile 2, Zelle 2
|-
|}


Maddraxikon-Standard-Tabelle

Die maddraxikon standard table ist eine Klasse, die extra für das Maddraxikon geschrieben wurde. Das bedeutet, dass sie einerseits nur im Maddraxikon angewendet werden kann und andererseits für ein einheitliches Erscheinungsbild sorgt und keine umfangreiche Einzelformatierung benötigt. Andere Wikis können mit diesem Quelltext nichts anfangen. Es gibt sie in zwei Ausführungen: einfach (maddraxikon_std_table) und sortierbar nach Spalten (maddraxikon_std_table sortable).

Bei beiden Ausführungen erfolgt die Sortierung innerhalb der Spalten stets nach Anfangsbuchstaben bzw. Zahlen. Die Tabellenbreite ist auf 100% festgelegt, unabhängig von der Spaltenbreite.


Spaltenbreite variabel

Im folgenden Beispiel ist die Spaltenbreite nicht festgelegt und passt sich automatisch an:

Name Volk Auftritt Quellen
Agat'ol (†) Hydrit Mar'os-Jünger MX 184
Angelis, Leto Jolar (†) Marsianer Mitglied der Erd-Mission MX 150
Aruula Barbarin Begleiterin von Matthew Drax, Königin der Dreizehn Inseln MX 001
{| class="maddraxikon_std_table sortable"
!Name
!Volk
!Auftritt
!Quellen
|----
|[[Agat'ol]] (†)
|[[Hydrit]]
|[[Mar'os (Legende)|Mar'os]]-Jünger
|[[Quelle:MX184|MX 184]]
|----
|[[Leto Jolar Angelis|Angelis, Leto Jolar]] (†)
|[[Marsianer]]
|Mitglied der [[Erd-Mission]]
|[[Quelle:MX150|MX 150]]
|----
|[[Aruula]]
|[[Barbar]]in
|Begleiterin von [[Matthew Drax]], Königin der [[Dreizehn Inseln]]
|[[Quelle:MX001|MX 001]]
|----
|}


Spaltenbreite festgelegt

Möchte man die Spaltenbreite festlegen, sieht der Quelltext folgendermaßen aus:

Name Volk Auftritt Quellen
Agat'ol (†) Hydrit Mar'os-Jünger MX 184
Angelis, Leto Jolar (†) Marsianer Mitglied der Erd-Mission MX 150
Aruula Barbarin Begleiterin von Matthew Drax, Königin der Dreizehn Inseln MX 001
{| class="maddraxikon_std_table sortable"
!width="20%" | Name
!width="20%" | Volk
!width="40%" | Auftritt
!width="20%" | Quellen
|----
|[[Agat'ol]] (†)
|[[Hydrit]]
|[[Mar'os (Legende)|Mar'os]]-Jünger
|[[Quelle:MX184|MX 184]]
|----
|[[Leto Jolar Angelis|Angelis, Leto Jolar]] (†)
|[[Marsianer]]
|Mitglied der [[Erd-Mission]]
|[[Quelle:MX150|MX 150]]
|----
|[[Aruula]]
|[[Barbar]]in
|Begleiterin von [[Matthew Drax]], Königin der [[Dreizehn Inseln]]
|[[Quelle:MX001|MX 001]]
|----
|}


Zeilen zusammenfassen

Beispiel 1

Zugehörigkeit Beschreibungen Quellen
Text,
den man einfügen könnte
Unterbegriff oben Quelle:MX001
Unterbegriff unten Quelle:HC001
anderer Begriff seine Beschreibung seine Quelle
{| class="madraxikon_std_table"
!width="30%" | Zugehörigkeit
!width="50%" | Beschreibungen 
!width="20%" | Quellen
|---
| rowspan="2" |Text, <br>den man einfügen könnte
|Unterbegriff oben
|Quelle:MX001
|---
|Unterbegriff unten
|Quelle:HC001
|---
|anderer Begriff 
|seine Beschreibung
|seine Quelle
|---
|}


Beispiel 2

Zugehörigkeit Beschreibungen Quellen
A Beschreibung von A Quelle:MX001
B Beschreibung von B Text,
den man einfügen könnte
C Beschreibung von C
D Beschreibung von D
{| class="maddraxikon_std_table"
!width="30%" | Zugehörigkeit
!width="50%" | Beschreibungen 
!width="20%" | Quellen
|---
|A
|Beschreibung von A
|Quelle:MX001
|---
|B
|Beschreibung von B
| rowspan="3" |Text, <br>den man einfügen könnte
|---
|C
|Beschreibung von C
|---
|D
|Beschreibung von D
|---
|}


Spalten und Zeilen zusammenfassen

Ein komplexeres Beispiel zeigt der Quelltext des Artikels Zyklen und Großzyklen.


Text in Spalten unterteilen

Wenn man viele kurze Zeilen hat, kann man sie in Spalten nebeneinander darstellen. Zwischen die Spalten mit Text sollte man Spalten der Breite 0% und ohne Text einfügen. Dadurch werden die anderen Spalten auf Abstand gehalten.

Spaltenanzahl und Spaltenbreite können leicht angepasst werden. Soll es sich um Spalten mit gleicher Breite handeln, so ist ein entsprechender Teil von 100% anzusetzen – bei drei Spalten also 33%. VORSICHT: Wenn eine Zeile zuviel Text enthält, wird er nicht richtig dargestellt.

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
{| valign="top" border="0" cellpadding="5" cellspacing="2"
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* A
* B
* C
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* D
* E
* F
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* G
* H
* I
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* J
* K
* L
|}
Parameter Bedeutung Notwendig Vorgabe
width Gesamtbreite (Tabellenkopf) nein "100%"
border Rahmen (Tabellenkopf) nein "0"
padding Innenabstand (Spalten) nein "10"
valign Vertikale Ausrichtung (Spalten) nein "top"
align Horizontale Ausrichtung (Spalten) nein "left"
col1 Inhalt der 1. Spalte ja – keine –
col2 Inhalt der 2. Spalte ja – keine –
col3 bis col10 Inhalt der 3. bis 10. Spalte nein – leer (fehlt dann) –

Bitte die "|" zwischen "width", "valign", "align", "padding" und "border" beachten. Die Werte für diese Parameter sind mit HTML identisch.

Nicht notwendige Parameter können ganz weggelassen werden.


Weblinks



Handbuch  →   Problemlösungen