41.613
Bearbeitungen
Änderungen
→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}}