Hilfe:Tabellen: Unterschied zwischen den Versionen

Zeile 529: Zeile 529:
== Formatierungen ==
== Formatierungen ==
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.
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.
=== Tabellenbreiten ===
Tabellenbreiten können relativ und absolut als Klasse angegeben werden. '''class="w50rel"''' wäre beispielsweise die halbe Breite des Browsers bzw. des Bereichs, in dem die Tabelle eingefügt wurde und '''class="w200abs"''' eine Breite von 200 Pixeln.
{| class="wikitable"
|-
! Eingabe
! 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 w50rel"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>| D</nowiki><br />
<nowiki>|}</nowiki>
</div>
|<div style="margin:1em">
{| class="wikitable w50rel"
! A
! B
|-
| C
| D
|}
</div>
|-
|<div style="background:#F9F9F9; border:1px solid #AAAAAA; border-collapse:collapse; margin:1em; padding:5px; font-family:monospace; font-size:95%">
<nowiki>{| class="wikitable w200abs"</nowiki><br />
<nowiki>! A</nowiki><br />
<nowiki>! B</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| C</nowiki><br />
<nowiki>| D</nowiki><br />
<nowiki>|}</nowiki>
</div>
|<div style="margin:1em">
{| class="wikitable w200abs"
! A
! B
|-
| C
| D
|}
</div>
|}


=== Spaltenbreiten ===
=== Spaltenbreiten ===
Zeile 586: Zeile 633:
</div>
</div>
|}
|}
Die absolute Angabe in der Einheit [[em (Schriftsatz)|em]] sorgt bei allen Textgrößen für gleiche Darstellung. Die absolute Angabe in Pixeln mit <code>width="10"</code> oder <code>width="10px"</code> oder <code>style="width:10px"</code> soll nur beim Einbinden von Grafiken eingesetzt werden.


=== Ausrichtung ===
=== Ausrichtung ===

Version vom 10. Juli 2012, 22:36 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 !! class="unsortable" | 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
|- class="sortbottom"
| colspan="2" | Durchschnitt: || 1,82

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

Formatierungen

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.

Tabellenbreiten

Tabellenbreiten können relativ und absolut als Klasse angegeben werden. class="w50rel" wäre beispielsweise die halbe Breite des Browsers bzw. des Bereichs, in dem die Tabelle eingefügt wurde und class="w200abs" eine Breite von 200 Pixeln.

Eingabe Ergebnis

{| class="wikitable w50rel"
! A
! B
|-
| C
| D
|}

A B
C D

{| class="wikitable w200abs"
! A
! B
|-
| C
| D
|}

A B
C D

Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. Sind nur einige Spalten zu schmal oder zu breit, genügt eine relative Breitenangabe in nur diesen Spalten. Ist der Inhalt einer Zelle größer als die vorgegebene Spaltenbreite, dann wird die Spalte automatisch erweitert und die Vorgabe der Spaltenbreite damit unwirksam.

Für die unterschiedlichen Breiten wurden im Almanach Klassen angelegt.

Eingabe Ergebnis

{| class="wikitable"
! class="w10rel" | 10 %
! 30 %
! class="w60rel" | 60 %
|-
| A
| B
| C
|}

10 % 30 % 60 %
A B C

{| class="wikitable"
! class="w100abs" | 100px
! class="w150abs" | 150px
! class="w200abs" | 200px
|-
| A
| B
| C
|}

100px 150px 200px
A B C

Ausrichtung

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. Für die Ausrichtung wird der Einsatz von CSS-Befehlen empfohlen, das vertical-align gilt jeweils für die ganze Zeile, das text-align nur für die jeweilige Zelle.

Im Almanach werden jedoch Klassen für die Ausrichtung verwendet.

Eingabe Ergebnis

{| class="wikitable"
!
! style="text-align:left" | Links
! class="center" | Zentriert
! style="text-align:right" | Rechts
|- style="vertical-align:top"
! style="text-align:left; padding:1em" | Oben
| style="text-align:left" | xx
| class="center" | xxx
| style="text-align:right" | xx
|- style="vertical-align:middle"
! style="text-align:left; padding:1em" | Mitte
| style="text-align:left" | x
| class="center" | x
| style="text-align:right" | x
|- style="vertical-align:bottom"
! style="text-align:left; padding:1em" | Unten
| style="text-align:left" | x
| class="center" | x
| style="text-align:right" | x
|}

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



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.