+++ Warnung! Dieses Wiki ist voller Spoiler. Lesen nur auf eigene Gefahr! +++

Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus KingWiki
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „{{Portal/Hilfe}}Mit diesem Artikel beschreiben wir die Verwendung von Tabellen für Einsteiger. Für komplexe und erweiterte Informationen folgt demnächst ein…“)
 
(→‎Formatierungen I - Klassen)
 
Zeile 271: Zeile 271:
  
 
=== Formatierungen I - Klassen ===
 
=== Formatierungen I - Klassen ===
 +
Mit Hilfe von Klassen können Tabellen einheitlich vorformatiert werden, ohne alle Formatierungsangaben einzeln anzugeben. Hier im KingWiki benutzen wir vor allem die Klasse <code>wikitable</code>. Die wird mit Hilfe von <code><nowiki>class="wikitable"</nowiki></code> hinter dem Start der Tabelle eingebunden. Mit Hilfe der Vorformatierung entsteht folgender Effekt:
  
 +
{|width="50%" align="center"
 +
!|Mit Klassifizierung
 +
! width="49%" |Ohne Klassifizierung
 +
|-
 +
||<pre><nowiki>
 +
{|class="wikitable"
 +
!|Überschriftenzeile 1
 +
!|Überschriftenzeile 2
 +
|-
 +
| 1 || 2
 +
|}
 +
</nowiki></pre>
 +
||<pre><nowiki>
 +
{|
 +
!|Überschriftenzeile 1
 +
!|Überschriftenzeile 2
 +
|-
 +
|1 ||2
 +
|}
 +
</nowiki></pre>
 +
|-
 +
|colspan="2"|Ergebnis
 +
|-
 +
||
 +
{|class="wikitable"
 +
!|Überschriftenzeile 1
 +
!|Überschriftenzeile 2
 +
|-
 +
|1 ||2
 +
|}
 +
||
 +
{|
 +
!|Überschriftenzeile 1
 +
!|Überschriftenzeile 2
 +
|-
 +
|1 ||2
 +
|}
 +
|}
 +
 +
Weitere Klassen können der wikitable hinzugefügt werden in dem man sie, durch Leerzeichen getrennt mit dahinter schreibt. So hat <code><nowiki>class="wikitable mw-datatable"</nowiki></code> folgenden Effekt:
 +
 +
{|width="50%" align="center"
 +
!|Quelltext
 +
! width="49%" |Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|class="wikitable mwdatatable"
 +
!|Überschriftenzeile
 +
|-
 +
| Zelle 1
 +
|-
 +
|Zelle 2
 +
|-
 +
|Zelle 3
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|class="wikitable mw-datatable"
 +
!|Überschriftenzeile
 +
|-
 +
|Zelle 1
 +
|-
 +
|Zelle 2
 +
|-
 +
|Zelle 3
 +
|}
 +
|}
 +
Zeilen, über die der Mauszeiger fährt, werden hervorgehoben. Der Einsatz dieser Option ist gut zu überlegen, weil sie unter umständen beim Leser als störend empfunden werden kann.
 +
 +
Eine für große Tabellen hilfreiche klasse ist die <code><nowiki>class="sortable"</nowiki></code>. Damit lässt sich die Tabelle Alphabetisch nach den Einträgen einer Spalte sortieren.
 +
 +
{|width="50%" align="center"
 +
!|Quelltext
 +
! width="49%" |Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|class="wikitable sortable"
 +
!|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|-
 +
|d ||12
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|class="wikitable sortable"
 +
!|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|-
 +
|d ||12
 +
|}
 +
|}
 +
Die Sortierung erfolgt streng alphabetisch. Das bedeutet beispielsweise bei Datumsangaben, dass der 7. eines Monats unterhalb des 12. einsortiert wird. Man kann dies mit führenden Nullen umgehen. Um einzelne Spalten von der Sortierung auszunehmen, kann man bei der Kopfzeile der Spalte <code><nowiki>class="unsortable"</nowiki></code> eingeben.
 +
 +
=== Formatierungen II - Formatierungen der gesamten Tabelle ===
 +
Nicht immer ist die Standartformatierung erwünscht. In vielen Fällen soll die Tabelle nicht linksbündig dargestellt werden, sondern in der Mitte oder auf der rechten Seite. Wenn Tabellen genutzt werden um mehrere Bilder darzustellen ist der Einsatz sogenannter unsichtbarer Tabellen hilfreich oder Tabellen mit anderen Rand- und Hintergrundfarben. Setzt man nicht die Standardklasse ein, ist es auch wichtig, die Abstände zwischen den Zellen oder die Abstände zwischen Inhalt und Zellenrand anzupassen.
 +
 +
=== Formatierungen III - Formatierungen von Tabellenzellen und -Zeilen ===
 +
Die zuvor gezeigten Formatierungen verändern das Verhalten der gesamten Tabelle. Es gibt aber auch Mittel und Wege, um das Verhalten einzelner Zellen und ganzer Tabellenzeilen zu verändern. Zu den am häufigsten verwendeten Mitteln gehören:
 +
 +
* Änderung der Hintergrundfarbe mit <code><nowiki>style="background-color:#111111;"</nowiki></code>
 +
* Änderung der Breite mit <code><nowiki>width="150px"</nowiki></code>
 +
* Änderung der Horizontalen oder Vertikalen Ausrichtung mit <code><nowiki>align="right/center/left"</nowiki></code> beziehungsweise <code><nowiki>valign="top/center/bottom"</nowiki></code>
 +
 +
Um einzelne Zeilen zu formatieren werden die entsprechenden Befehle hinter das <code>|-</code> geschrieben. Soll nur eine Zelle geändert werden, so folgen die Befehle zwischen den beiden Pipes <code>||</code>. Gehen wir es Stück für Stück durch.
 +
 +
==== Hintergrundfarben ====
 +
Zum farblichen Hervorheben besonderer Zeilen oder Zellen gibt es verschiedene Möglichkeiten. Die Angabe im ''Hexadezimalcode'' in der Form <code>#RRGGBB</code>, oder als Name. [[Hilfe:Farben]] dient hier als Orientierung.
 +
 +
{|width="60%" align="center"
 +
!|Quelltext
 +
! width="49%" |Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|
 +
!style="background:#00ff00;"|Überschrift
 +
!|2. Überschrift
 +
|-style="background:yellow;"
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|
 +
!style="background:#00ff00;"|Überschrift
 +
!|2. Überschrift
 +
|-style="background:yellow;"
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
|}
 +
 +
==== Breiten ====
 +
 +
Zellenbreiten werden wie bei der gesamten Tabelle über <code><nowiki>width="100px"</nowiki></code> oder <code><nowiki>style="width:100px;"</nowiki></code> angegeben. Ein paar Tipps:
 +
 +
* Auch prozentuale Angaben sind möglich. So kann mit <code><nowiki>width="50%"</nowiki></code> festgelegt werden, dass die Zelle 50% der Breite des übergeordneten Elements einnimmt. Dies ist meistens die Breite des Artikels. Oder, wenn die Breite der Tabelle vorgegeben wurde, entsprechend diese Breite.
 +
* Auch relative Angaben sind möglich, um sich der Zoomstufe des Browsers anzupassen. Dies wird mit <code><nowiki>style="width:120em;"</nowiki></code> erreicht. In diesem Fall wird die Zelle so breit 120 im Text geschriebene <code>m</code> hintereinander.
 +
* Breiten für Spalten müssen nicht in jeder Zelle erneut angegeben werden. Es reicht, wenn in der obersten Zelle die Breite definiert wird.
 +
* Zu eng definierte Breiten überschreiben keine Wörter. Ist zum Beispiel eine Spalte mit 12px definiert, aber es wird ein langes Wort dargestellt, so passt sich die Breite auf dem Bildschirm dem Wort an.
 +
* Nicht jede Spalte braucht eine Breite. Man muss bei prozentualen Angaben beispielsweie nicht dafür sorgen, dass die Summe 100% ergibt.
 +
 +
Beispiele:
 +
 +
{|width="60%" align="center"
 +
!|Quelltext
 +
! width="49%" |Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|style="width:600px;" class="wikitable"
 +
!style="width:120px;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|style="width:600px;" class="wikitable"
 +
!style="width:120px;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
|-
 +
||
 +
<pre><nowiki>{|style="width:600px;" class="wikitable"
 +
!style="width:50%;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|style="width:600px;" class="wikitable"
 +
!style="width:50%;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
|-
 +
||
 +
<pre><nowiki>{|style="width:600px;" class="wikitable"
 +
!style="width:2px;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|style="width:600px;" class="wikitable"
 +
!style="width:2px;"|Überschrift
 +
!|2. Überschrift
 +
|-
 +
|a ||38
 +
|-
 +
|z ||25
 +
|}
 +
|}
 +
==== Ausrichtungen ====
 +
Wie es schon aufgefallen sein dürfte, werden standardmäßig Texte linksbündig und mittig in einer Zelle positioniert. Dies lässt sich folgendermaßen ändern:
 +
 +
{|width="60%" align="center"
 +
!|Quelltext
 +
! width="49%" |Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|style="width:500px;" class="wikitable"
 +
!style="width:20px;"|Überschrift
 +
!style="width:460px;"|2. Überschrift
 +
!|Noch eine Überschrift
 +
|-
 +
||schrecklich viel Text um viele Zeilen zu erzeugen
 +
|valign="top"|Text oben positioniert
 +
|valign="bottom"|unten
 +
|-
 +
||z
 +
|align="center"|Text in der Mitte
 +
||25
 +
|-
 +
||d
 +
|align="right"|Text am rechten Rand
 +
||38
 +
|}
 +
</nowiki></pre>
 +
||
 +
{|style="width:500px;" class="wikitable"
 +
!style="width:20px;"|Überschrift
 +
!style="width:460px;"|2. Überschrift
 +
!|Noch eine Überschrift
 +
|-
 +
||schrecklich viel Text um viele Zeilen zu erzeugen
 +
|valign="top"|Text oben positioniert
 +
|valign="bottom"|unten
 +
|-
 +
||z
 +
|align="center"|Text in der Mitte
 +
||25
 +
|-
 +
||d
 +
|align="right"|Text am rechten Rand
 +
||38
 +
|}
 +
|}
 +
 +
Beide Optionen können miteinander kombiniert und hintereinander weg geschrieben werden.
 +
 +
==== Kombinieren und miteinander verwenden ====
 +
Alle Optionen können natürlich kombiniert und ergänzend eingesetzt werden. Ein Hinweis hier: Je näher eine Formatierung einer Zelle kommt, desto höher ist ihre Priorität. Das bedeutet, eine farbliche Vorgabe einer Zelle 'schlägt' das Format einer Zeile und das wiederum die Vorgabe für eine ganze Tabelle. Das gleiche gilt bei Ausrichtungen. Ein Beispiel:
 +
 +
{|align="center"
 +
!|Quelltext
 +
!|Ergebnis
 +
|-
 +
||<pre><nowiki>
 +
{|style="background-color:#00ff00; color:#111111; width:600px;"
 +
border="1px" align="center" cellpadding="3px" cellspacing="0px"
 +
!style="width:33%;"|Spalte 1
 +
!style="width:33%;"|Spalte 2
 +
!style="width:33%;"|Spalte 3
 +
|-
 +
||Zelle 1
 +
||Zelle 2
 +
||Zelle 3
 +
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
 +
||Zelle 4
 +
||Zelle 5
 +
||Zelle 6
 +
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
 +
|style="background:#ad0000; color:white; font-weight:normal;" align="right"|Zelle 7
 +
||Zelle 8
 +
|align="left"|Zelle 9
 +
|}</nowiki></pre>
 +
||
 +
{|style="background-color:#00ff00; color:#111111; width:600px;" border="1px" align="center" cellpadding="3px" cellspacing="0px"
 +
!style="width:33%;"|Spalte 1
 +
!style="width:33%;"|Spalte 2
 +
!style="width:33%;"|Spalte 3
 +
|-
 +
||Zelle 1
 +
||Zelle 2
 +
||Zelle 3
 +
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
 +
||Zelle 4
 +
||Zelle 5
 +
||Zelle 6
 +
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
 +
|style="background:#ad0000; color:white; font-weight:normal;" align="right"|Zelle 7
 +
||Zelle 8
 +
|align="left"|Zelle 9
 +
|}
 +
|}
 
{{weiterführend Hilfe}}
 
{{weiterführend Hilfe}}

Aktuelle Version vom 13. Januar 2016, 18:35 Uhr

Books.gif
 Portal: Hilfe
Mit diesem Artikel beschreiben wir die Verwendung von Tabellen für Einsteiger. Für komplexe und erweiterte Informationen folgt demnächst eine weitere Unterstützung.

Einführung - Warum wir Tabellen nutzen

Tabellen gehören zu den ältesten Methoden im Web um Informationen und Seitenelemente mehrdimensional anzuordnen. Damit ist es möglich Datenlisten strukturierter und übersichtlicher darzustellen als mit gewöhnlichen Listen. Gerade, wenn verschiedene Arten von Informationen zu einem Eintrag existieren, macht es Sinn, die in Tabellenform darzustellen.

Bis vor einigen Jahren war es auch üblich, mit Hilfe von Tabellen ganze Seiten zu designen. So konnten ursprünglich Seitenelemente nur mit Hilfe von Tabellen oder Frames nebeneinander dargestellt werden. Gerade die Tabellen waren so effektiv, dass noch heute viele Seiten so eingerichtet weren, obwohl es bessere Methoden gibt. Auch hier im KingWiki ist das unter Umständen noch der Fall. Jedoch soll und wird das Stück für Stück angepasst.

Der Quelltext für Tabellen wird jedoch sehr schnell sehr komplex. Daher sollte man sich den Einsatz gut überlegen. Mitunter ist auch eine einfache Liste hilfreich und leichter erstellt. In einigen Fällen lohnt es sich sogar, ganz auf eine Auflistung zu verzichten, und die Inhalte im Fließtext besser zu beschreiben.

Grundlagen - Die einfachen Tabellen

Jede Tabelle beginnt mit einer geschweiften Klammer {, gefolgt von einem senkrechten Strich |. Sie endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die beiden Zeichen müssen jeweils am Anfang einer Zeile stehen, sonst wird die Zeichenfolge nicht als Tabelle interpretiert.

Jede Zelle beginnt entweder mit einem einzelnen senkrechten Strich |, wenn dieser am Zeilenanfang steht, oder mit zwei senkrechten Strichen ||, wenn Attribute für die Zelle mitgegeben werden (siehe Layout und Formatierungen weiter unten), oder nicht am Anfang der Zeile stehen.

Die simpelste Form, eine Tabelle mit zwei Zellen sieht folgendermaßen aus:

Quelltext Ergebnis 
{|
| Zelle 1
| Zelle 2
|}
Zelle 1 Zelle 2

Eine neue Tabellenzeile wird mit dem senkrechten Strich gefolgt von einem Bindestreich |- erzeugt.

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

Will man etwas Platz sparen, kann man die einzelnen Zellen einer Tabellenzeile auch nebeneinander schreiben. In dem Fall benötigt es zwischen den Zellen aber zweier senkrechter Striche ||. Mehrere Zeilen mit mehreren Spalten sehen so aus:

Quelltext Ergebnis 
{|
||Zelle 1 || Zelle 2 || Zelle 3 || Zelle 4
|-
| Zelle 5 || Zelle 6 || Zelle 7 || Zelle 8
|-
| Zelle 9 || Zelle 10 || Zelle 11 || Zelle 12
|}
Zelle 1 Zelle 2 Zelle 3 Zelle 4
Zelle 5 Zelle 6 Zelle 7 Zelle 8
Zelle 9 Zelle 10 Zelle 11 Zelle 12
Hinweis
Zum Abschluss der Tabelle braucht es keine Darstellung einer Tabellenzeile |- vor einem |} ist also falsch und sollte vermieden werden.

Will man einige Zellen als Überschriften gestalten, so geht das mit einem Ausrufezeichen ! anstelle der senkrechten Striche. In dem Fall wird der Inhalt der Zelle fett und zentriert dargetstellt.

Ein Beispiel ist die vereinfachte Form der Opfer des Kirmesmörders:

Name Todeszeitpunkt Ort
Linda Gray Sommer 1969 Joyland Park, Heaven's Bay, North Carolina
Darlene Stamnacher 29. Juni 1967 Maxton, North Carolina
Eva Longbottom 04. Juli 1965 Santee, South Carolina
Claudine Sharp 02. August 1963 Rocky Mount, North Carolina
Delight Mowbray 31. August 1961 Waycross, Georgia

Der entsprechende Quelltext sieht so aus: 

{|class="wikitable"
|-
! Name 
! Todeszeitpunkt
! Ort
|-
! [[Linda Gray|Linda Gray]] 
| Sommer {{SKU|1969}} || [[Joyland Park]], [[Heaven's Bay]], [[North Carolina]]
|-
! [[Darlene Stamnacher|Darlene Stamnacher]]
| [[29. Juni]] {{SKU|1967}} || [[Maxton]], [[North Carolina]]
|-
! [[Eva Longbottom|Eva Longbottom]]
| [[04. Juli]] {{SKU|1965}} || [[Santee]], [[South Carolina]]
|-
! [[Claudine Sharp|Claudine Sharp]]
| [[02. August]] {{SKU|1963}} || [[Rocky Mount]], [[North Carolina]]
|-
! [[Delight Mowbray|Delight Mowbray]]
| [[31. August]] {{SKU|1961}} || [[Waycross]], [[Georgia]]
|}

Zwei Besonderheiten gibt es hier außerdem:

  • Durch class="wikitable" wird die Tabelle vorformatiert. Attribute wie Hintergrundfarben, Ausrichtung, Rahmenfarbe und -breite erhalten so einen einheitlichen Wert. Um alle Tabellen im KingWiki möglichst einheitlich darzustellen, sollte nach Möglichkeit diese Option immer mit verwendet werden. Ausnahmen sind zum Beispiel transparente Tabellen, also Tabellen ohne Rahmen oder fester Hintergrundfarbe. Mehr zu Formatierungen gibt es weiter unten.
  • Durch den Einsatz von &nbsp; wird verhindert, dass an der Stelle ein Leerzeichen, aber kein Zeichenumbruch erstellt wird. Hilfreich vor allem dann, wenn Elemente auf jeden Fall nebeneinander stehen sollen, egal wie klein die Tabellenzelle wird.

Das reicht auch schon als Einstieg. Die Mehrheit der Tabellen kann mit Hilfe der bislang vorgestellten Elemente erstellt werden. Die erweiterten Elemente wie Attribute, Klassen, Stylesheets und so weiter listen wir im folgenden Stück für Stück auf.

Tabellenlayouts

Hinweis
Grundkenntnisse im Bereich CSS sind ab dem Punkt Formatierungen von Nöten.

Verbundene Tabellenzellen

Manchmal ist es hilfreich, eine Zelle über mehrere Spalten oder mehrere Zeilen aufzuspannen. Dann, wenn zum Beispiel eine Überschrift für mehrere Spalten gilt, oder eine Zeile den oberen vom unteren Tabelleninhalt optisch abtrennen soll, ohne eine neue Tabelle erzeugen zu müssen.

colspan: Spalten überspannend

A B C
eine Zeile 
{| class="wikitable"
| A
| B
| C
|-
|colspan="3"| eine Zeile
|}

rowspan: Zeilen überspannend

A eine Spalte
B
C 
{| class="wikitable"
| A
| rowspan="3"| eine Spalte
|-
| B
|-
| C
|}


führende Spalte A
B
C 
{| class="wikitable"
| rowspan="3"| führende Spalte
| A
|-
| B
|-
| C
|}


colspan und rowspan kombiniert

A
B eine Spalte
C 
{| class="wikitable" style="text-align:center"
|colspan="2"| A
|-
| B
| rowspan="2"| eine Spalte
|-
| C
|}

Das gleiche geht natürlich auch für eine einzelne Zelle, die damit mehrere Spalten und mehrere Zeilen umspannt

A eine Zelle über zwei Spalten und zwei Zeilen
B
C D E 
{| class="wikitable" style="float:right;"
|| A
|colspan="2" rowspan="2"| eine Zelle über zwei Spalten und zwei Zeilen
|-
|| B
|-
|| C
|| D
|| E
|}
Ein Tipp
Für verbundene Zellen hilft es bei komplexen Situationen sich die Zieltabelle aufzuzeichnen. Dann klappt es auch mit Arthur Elds Stammbaum.

Formatierungen I - Klassen

Mit Hilfe von Klassen können Tabellen einheitlich vorformatiert werden, ohne alle Formatierungsangaben einzeln anzugeben. Hier im KingWiki benutzen wir vor allem die Klasse wikitable. Die wird mit Hilfe von class="wikitable" hinter dem Start der Tabelle eingebunden. Mit Hilfe der Vorformatierung entsteht folgender Effekt:

Mit Klassifizierung Ohne Klassifizierung 
{|class="wikitable"
!|Überschriftenzeile 1
!|Überschriftenzeile 2
|-
| 1 || 2
|}

{|
!|Überschriftenzeile 1 
!|Überschriftenzeile 2
|-
|1 ||2
|}
Ergebnis
Überschriftenzeile 1 Überschriftenzeile 2
1 2
Überschriftenzeile 1 Überschriftenzeile 2
1 2

Weitere Klassen können der wikitable hinzugefügt werden in dem man sie, durch Leerzeichen getrennt mit dahinter schreibt. So hat class="wikitable mw-datatable" folgenden Effekt:

Quelltext Ergebnis 
{|class="wikitable mwdatatable"
!|Überschriftenzeile
|-
| Zelle 1
|-
|Zelle 2
|-
|Zelle 3
|}
Überschriftenzeile
Zelle 1
Zelle 2
Zelle 3

Zeilen, über die der Mauszeiger fährt, werden hervorgehoben. Der Einsatz dieser Option ist gut zu überlegen, weil sie unter umständen beim Leser als störend empfunden werden kann.

Eine für große Tabellen hilfreiche klasse ist die class="sortable". Damit lässt sich die Tabelle Alphabetisch nach den Einträgen einer Spalte sortieren.

Quelltext Ergebnis 
{|class="wikitable sortable"
!|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|-
|d ||12
|}
Überschrift 2. Überschrift
a 38
z 25
d 12

Die Sortierung erfolgt streng alphabetisch. Das bedeutet beispielsweise bei Datumsangaben, dass der 7. eines Monats unterhalb des 12. einsortiert wird. Man kann dies mit führenden Nullen umgehen. Um einzelne Spalten von der Sortierung auszunehmen, kann man bei der Kopfzeile der Spalte class="unsortable" eingeben.

Formatierungen II - Formatierungen der gesamten Tabelle

Nicht immer ist die Standartformatierung erwünscht. In vielen Fällen soll die Tabelle nicht linksbündig dargestellt werden, sondern in der Mitte oder auf der rechten Seite. Wenn Tabellen genutzt werden um mehrere Bilder darzustellen ist der Einsatz sogenannter unsichtbarer Tabellen hilfreich oder Tabellen mit anderen Rand- und Hintergrundfarben. Setzt man nicht die Standardklasse ein, ist es auch wichtig, die Abstände zwischen den Zellen oder die Abstände zwischen Inhalt und Zellenrand anzupassen.

Formatierungen III - Formatierungen von Tabellenzellen und -Zeilen

Die zuvor gezeigten Formatierungen verändern das Verhalten der gesamten Tabelle. Es gibt aber auch Mittel und Wege, um das Verhalten einzelner Zellen und ganzer Tabellenzeilen zu verändern. Zu den am häufigsten verwendeten Mitteln gehören:

  • Änderung der Hintergrundfarbe mit style="background-color:#111111;"
  • Änderung der Breite mit width="150px"
  • Änderung der Horizontalen oder Vertikalen Ausrichtung mit align="right/center/left" beziehungsweise valign="top/center/bottom"

Um einzelne Zeilen zu formatieren werden die entsprechenden Befehle hinter das |- geschrieben. Soll nur eine Zelle geändert werden, so folgen die Befehle zwischen den beiden Pipes ||. Gehen wir es Stück für Stück durch.

Hintergrundfarben

Zum farblichen Hervorheben besonderer Zeilen oder Zellen gibt es verschiedene Möglichkeiten. Die Angabe im Hexadezimalcode in der Form #RRGGBB, oder als Name. Hilfe:Farben dient hier als Orientierung.

Quelltext Ergebnis 
{|
!style="background:#00ff00;"|Überschrift
!|2. Überschrift
|-style="background:yellow;"
|a ||38
|-
|z ||25
|}
Überschrift 2. Überschrift
a 38
z 25

Breiten

Zellenbreiten werden wie bei der gesamten Tabelle über width="100px" oder style="width:100px;" angegeben. Ein paar Tipps:

  • Auch prozentuale Angaben sind möglich. So kann mit width="50%" festgelegt werden, dass die Zelle 50% der Breite des übergeordneten Elements einnimmt. Dies ist meistens die Breite des Artikels. Oder, wenn die Breite der Tabelle vorgegeben wurde, entsprechend diese Breite.
  • Auch relative Angaben sind möglich, um sich der Zoomstufe des Browsers anzupassen. Dies wird mit style="width:120em;" erreicht. In diesem Fall wird die Zelle so breit 120 im Text geschriebene m hintereinander.
  • Breiten für Spalten müssen nicht in jeder Zelle erneut angegeben werden. Es reicht, wenn in der obersten Zelle die Breite definiert wird.
  • Zu eng definierte Breiten überschreiben keine Wörter. Ist zum Beispiel eine Spalte mit 12px definiert, aber es wird ein langes Wort dargestellt, so passt sich die Breite auf dem Bildschirm dem Wort an.
  • Nicht jede Spalte braucht eine Breite. Man muss bei prozentualen Angaben beispielsweie nicht dafür sorgen, dass die Summe 100% ergibt.

Beispiele:

Quelltext Ergebnis 
{|style="width:600px;" class="wikitable"
!style="width:120px;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
Überschrift 2. Überschrift
a 38
z 25 
{|style="width:600px;" class="wikitable"
!style="width:50%;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
Überschrift 2. Überschrift
a 38
z 25 
{|style="width:600px;" class="wikitable"
!style="width:2px;"|Überschrift
!|2. Überschrift
|-
|a ||38
|-
|z ||25
|}
Überschrift 2. Überschrift
a 38
z 25

Ausrichtungen

Wie es schon aufgefallen sein dürfte, werden standardmäßig Texte linksbündig und mittig in einer Zelle positioniert. Dies lässt sich folgendermaßen ändern:

Quelltext Ergebnis 
{|style="width:500px;" class="wikitable"
!style="width:20px;"|Überschrift
!style="width:460px;"|2. Überschrift
!|Noch eine Überschrift
|-
||schrecklich viel Text um viele Zeilen zu erzeugen
|valign="top"|Text oben positioniert
|valign="bottom"|unten
|-
||z
|align="center"|Text in der Mitte
||25
|-
||d
|align="right"|Text am rechten Rand
||38
|}
Überschrift 2. Überschrift Noch eine Überschrift
schrecklich viel Text um viele Zeilen zu erzeugen Text oben positioniert unten
z Text in der Mitte 25
d Text am rechten Rand 38

Beide Optionen können miteinander kombiniert und hintereinander weg geschrieben werden.

Kombinieren und miteinander verwenden

Alle Optionen können natürlich kombiniert und ergänzend eingesetzt werden. Ein Hinweis hier: Je näher eine Formatierung einer Zelle kommt, desto höher ist ihre Priorität. Das bedeutet, eine farbliche Vorgabe einer Zelle 'schlägt' das Format einer Zeile und das wiederum die Vorgabe für eine ganze Tabelle. Das gleiche gilt bei Ausrichtungen. Ein Beispiel:

Quelltext Ergebnis 
{|style="background-color:#00ff00; color:#111111; width:600px;"
border="1px" align="center" cellpadding="3px" cellspacing="0px"
!style="width:33%;"|Spalte 1
!style="width:33%;"|Spalte 2
!style="width:33%;"|Spalte 3
|-
||Zelle 1
||Zelle 2
||Zelle 3
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
||Zelle 4
||Zelle 5
||Zelle 6
|-style="background:#0000ad; color:#888888; font-weight:bold;" align="center"
|style="background:#ad0000; color:white; font-weight:normal;" align="right"|Zelle 7
||Zelle 8
|align="left"|Zelle 9
|}
Spalte 1 Spalte 2 Spalte 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
V E Alle Hilfe-Artikel auf einem Blick
Portal:Hilfe
Von „https://kingwiki.de/index.php?title=Hilfe:Tabellen&oldid=122959“