Diese Seite beschreibt die Verwendung von Tabellen in Wikipedia-Seiten und richtet sich speziell an Newcomer.
Solltest du Probleme beim Erstellen einer Tabelle haben, wird dir auf Wiki: Fragen zur Wiki von den Mitautoren gerne und in der Regel auch schnell geholfen.
Für Fortgeschrittene existieren die Seiten Hilfe:Tabellen für Fortgeschrittene und /Sortierung.
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 (Redundanz) vermieden werden (z. B. Päpste alphabetisch, nach Alter, nach Amtszeit, nach Land). Alles Wissen kann übersichtlich in einer Tabelle verknüpft werden, wodurch sie in der Wikipedia einen Schritt in Richtung Semantisches Web mit semantischen Netzen bilden können; Wissen wird zunehmend auch maschinenlesbar und Informationen können automatisch miteinander verknüpft werden.
Tabellen sollte man jedoch aufgrund ihres relativ komplizierten Quelltextes und mit Rücksicht auf die Darstellung auf mobilen Geräten nur dann einsetzen, wenn die Informationsdarstellung dadurch wirksam übersichtlicher wird. Der Einsatz als rein grafisches Gestaltungsmittel ist nicht erwünscht; man sollte deshalb immer überlegen, ob die Informationen nicht besser in einer einfachen Liste unterzubringen sind (siehe Hilfe:Textgestaltung und Hilfe:Listen).
Die einfachste und schnellste Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil. Dazu wird jeder Tabellenzeile ein Leerzeichen vorangestellt. Spalten und Layout werden optisch im Quelltextbearbeitungsmodus angepasst. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreiten soll (ca. 780 px bei Normalschriftgröße) und auf kleineren Bildschirmen ärgerlich sein kann. Die Zeilen verhalten sich anders als eine richtige Tabelle, da sie bei Überschreitung der Fensterbreite unkontrolliert umbrechen und so unübersichtlich werden können. Die in diesem Beispiel gezeigte Tabelle wäre schon zu breit, wenn man das Browser-Fenster schmaler setzt. Auch in der mobilen Ansicht könnte sie zu breit sein und unleserlich werden.
Derartige Tabellen werden geduldet, wenn sie von jemand eingefügt werden, der keine besseren Formatierungsmöglichkeiten beherrscht; sie sollten aber im Lauf der Zeit von erfahrenen Wikipedianern in richtige Tabellen umgewandelt werden.
Beispiel und Ergebnis:
Klimatabelle
Monat JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ ------------------------------------------------------------------------- Ø Tagestemperatur in °C 21 21 22 23 24 25 27 29 28 26 24 22 Ø Nachttemperatur in °C 15 15 15 16 17 18 20 21 20 19 18 16 Ø Sonnenstunden pro Tag 6 6 7 8 9 9 9 9 8 7 6 5 Ø Regentage pro Monat 6 4 3 2 2 1 0 0 2 5 6 7 Ø Wassertemperatur in °C 19 18 18 18 19 20 21 22 23 23 21 20
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 }
.
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. Insbesondere kann 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.
Ohne jegliche Zuweisung (Klassen, Styles oder Tabellenattribute) ist eine Tabelle zunächst transparent, lediglich die Formatierung unter- oder nebeneinander liegender Inhalte wird umgesetzt.
Quelltext:
Zeilen
{| |- | Zelle 1 |- | Zelle 2 |- | Zelle 3 |}
Spalten
{| |- | Zelle 1 | Zelle 2 | Zelle 3 |}
Zeilen und Spalten
{| |- | Zelle 1/1 | Zelle 2/1 |- | Zelle 1/2 | Zelle 2/2 |}
Spalten alternativ
{| |- | Zelle 1 || Zelle 2 || Zelle 3 |}
Es ist möglich, eine Gesamt-Überschrift über der Tabelle anzugeben.
wikitable table-responsive
auch fett).Quelltext:
|+ Tabellenüberschrift
Für eine Kopfzelle wird der senkrechte Strich durch ein Ausrufezeichen !
ersetzt. Text in einer solchen Zeile wird zentriert und fett dargestellt.
Als erste Zeile einer Datentabelle ist eine Kopfzeile aus Kopfzellen üblich.
Kopfzellen unterscheiden sich nicht nur optisch; sie werden auch von Software als Überschriften für die Spalte (bzw. auch Zeile) erkannt und ausgewertet.
Quelltext:
|- ! Name !! Regierungszeit !! Abstammung
– nicht verfügbar, die Zelleninhalte können bearbeitet, ihre Eigenschaften jedoch nicht visuell geändert werden.
Anker (Sprungziele) sollten in Tabellen, soweit möglich, direkt über Angabe von id="…"
eingetragen werden.
Folgender Quelltext ist optimal:
|- id="meinSprungziel" | Inhalt || Inhalt || Inhalt
Damit wird die gesamte Tabellenzeile als Ziel angesprochen und zusammen mit der oberen Rahmenlinie im Browser dargestellt. id="…"
definiert in beliebigen Elementen ein Fragment. Es ist nicht möglich, mehrere ID hinter einem Trenner zu platzieren; wenn nötig, kann man aber jeder Tabellenzelle eine weitere ID zuordnen.
Weniger günstig wäre es, ein Linkziel mit der Vorlage:Anker zu definieren, indem Textinhalt markiert wird. Dann wird auch exakt bis auf diese Buchstaben positioniert. Ist diese Textzeile nicht oben bündig ausgerichtet, kann es leicht sein, dass von ihren Nachbarzellen die oberen Zeilen nicht im Sichtbereich erscheinen, weil dieser am tiefer liegenden Anker ausgerichtet wurde. In jedem Fall müsste die Rahmenlinie außerhalb des sichtbaren Bereichs liegen und den Lesern fällt die Orientierung schwerer.
Hier ein Beispiel, wo diese Sprungziele innerhalb einer Tabelle stehen könnten;
springe zu #ganz_oben, #Ü-id, #K-id, #Sprungziel1, #Sprungziel2, #Sprungziel3:
Kopfzelle (K-id) | ||
---|---|---|
Zeile 1 | Sprungziel 1 (mit ID in Zeile) | Inhalt mit Umbruch |
Zeile 2 | Sprungziel 2 (mit ID in Zelle) | Inhalt mit Umbruch |
Zeile 3 | Sprungziel 3 (mit Anker- Vorlage in Zelle) | Inhalt mit Umbruch, man landet mittendrin (abhängig von Zellenhöhe) "Sprungziel3" |
Quelltext dieser Tabelle:
{| class="wikitable table-responsive " id="ganz_oben" |+ id="Ü-id" | Überschrift (Ü-id) |- id="K-id" !colspan="3"| Kopfzelle (K-id) |- id="Sprungziel1" | Zeile 1 || Sprungziel 1<br /> (mit ID<br /> in Zeile) || Inhalt<br /> mit<br /> Umbruch |- | Zeile 2 ||id="Sprungziel2"| Sprungziel 2<br /> (mit ID<br /> in Zelle) || Inhalt<br /> mit<br /> Umbruch |- | Zeile 3 || {{Anker|Sprungziel3}} Sprungziel 3<br /> (mit Anker-<br /> Vorlage<br /> in Zelle) || Inhalt mit<br /> Umbruch,<br /> man landet <br /> mittendrin<br /> (abhängig von <br /> Zellenhöhe)<br /> "Sprungziel3" |}
Zu beachten ist, dass innerhalb einer ID kein Leerzeichen vorkommen darf, stattdessen ist der Unterstrich zu benutzen (die Vorlage führt diese Ersetzung automatisch durch). In Wikisyntax kann das Sprungziel trotzdem mit Leerzeichen angegeben werden: #ganz oben (Quelltext: [[#ganz oben]]
).
Um Tabellen sowohl in ihren Inhalten als auch bereits im Kopfbereich weitgehend frei von Elementen zu halten, die die Darstellungsweise betreffen, wurden für das global wirksame CSS einige Klassen entwickelt, die es erlauben, wichtige Stile mit wenigen anschaulichen Anweisungen festzulegen. Die einfache Tabelle ohne Zuweisungen ist rahmenlos und hat einen transparenten Hintergrund.
Mehrere Namen von Klassen können in einer durch Leerzeichen voneinander getrennten Aufzählung im Attribut class=
genannt werden. Klassen können einer ganzen Tabelle oder einer ganzen Zeile oder einer einzelnen Zelle zugewiesen werden, um eine bestimmte Gestaltung oder Eigenschaft zu bewirken.
Oben wurden bereits Klassen für die Ausrichtung der Tabelle genannt. Speziell an ganze Tabellen sind die in den nachstehenden Abschnitten beschriebenen Klassen adressiert.
Quelltext:
{| class="wikitable table-responsive "
"hintergrundfarbe1"
)"hintergrundfarbe5"
)class="duhoc-de hintergrundfarbe2"
erlaubtUm die Kohärenz der Stilmittel zwischen den verschiedenen Wikipedias zu fördern, soll die Klasse prettytable
nicht mehr verwendet werden.
– nicht veränderbar
class="duhoc-de zebra"
ist eine spezielle Eigenschaft der Tabelle class="duhoc-de wikitable table-responsive "
, sie ist nur gemeinsam mit dieser Klasse wirksam.
Quelltext:
{| class="wikitable table-responsive zebra"
#FFFFFF
) hervorgehoben (diese Farbe ist so festgelegt und wirkt sich nur auf Inhaltszellen aus)rowspan=""
richtet sich die Farbe jeder Zelle nach der ersten Zeile, zu der die Zelle gehört.– nicht veränderbar
class="duhoc-de tabelle-zeile-aktiv"
ist eine spezielle Eigenschaft der Tabelle class="duhoc-de wikitable table-responsive "
, sie ist nur gemeinsam mit dieser Klasse wirksam. Damit die erforderlichen Stildefinitionen bereitstehen, muss die Vorlage {{Tabellenstile}} auf der Seite eingebunden sein.
Quelltext:
{{Tabellenstile}} {| class="wikitable table-responsive tabelle-zeile-aktiv"
Nachteil:
Die bis März 2022 für den Hervorhebungseffekt zu verwendende Klasse mw-datatable
nutzte Stildefinitionen direkt aus dem Anwendungspaket von MediaWiki, was Mitte 2021 unterbunden wurde. mw-datatable
war nicht auf Mobilgeräten verfügbar und sorgte darüber hinaus auch für eine abweichende Formatierung der Tabelle (Rahmen, Hintergrundfarben), die zwecks Vereinheitlichung der Tabellenstile nicht in die neue Klasse tabelle-zeile-aktiv
übernommen wurde.
– nicht veränderbar
class="duhoc-de tabelle-kopf-fixiert"
ist eine spezielle Eigenschaft der Tabelle class="duhoc-de wikitable table-responsive "
, sie ist nur gemeinsam mit dieser Klasse wirksam. Damit die erforderlichen Stildefinitionen bereitstehen, muss die Vorlage {{Tabellenstile}} auf der Seite eingebunden sein.
Quelltext:
{{Tabellenstile}} {| class="wikitable table-responsive tabelle-kopf-fixiert"
Bei langen Tabellen kann der Tabellenkopf beim Scrollen am oberen Bildschirmrand fixiert werden, sodass er immer sichtbar bleibt. Dies funktioniert auch, wenn in der gleichen Tabelle mehrere Kopfzeilen vorhanden sind, jedoch wird immer nur die später definierte Kopfzeile angezeigt.
Für Mobilgeräte stand diese Funktionalität viele Jahre nicht zur Verfügung; ist dort erst seit Juli 2022 wirksam.
Quelltext:
{| class="sortable"
besser
{| class="wikitable table-responsive sortable"
sortable
erlaubt die Sortierung der Tabelle nach wählbaren Spalten. Jeweils rechts in den zugehörigen Kopfzellen erscheinen Pfeilsymbole.
an das Ende.class="duhoc-de unsortable"
in der zugehörigen Kopfzeile davon ausgenommen werden, sie haben dann keine Sortiersymbole.class="duhoc-de sortbottom"
hinter dem zur Zeile gehörenden Zeilentrenner von der Sortierung ausgenommen werden (|- class="duhoc-de sortbottom"
); sie werden dann an das Ende der Tabelle gesetzt.Für Mobilgeräte steht diese Funktionalität (Stand 2023) nicht zur Verfügung (auf Mobilgeräten werden allerdings die Inhalte der Abschnitte des Artikels unter der jeweiligen Abschnittsüberschrift eingeklappt angezeigt).
[Einklappen]
und [Ausklappen]
mw-collapsed
ist die Tabelle beim Laden des Artikels eingeklapptmw-collapse
ist die Tabelle beim Laden des Artikels ausgeklappt, dies entspricht der Funktion class="duhoc-de mw-collapsible"
ohne ZusatzZu beachten:
– nicht veränderbar
style="vertical-align:top"
ebenfalls nach oben ausgerichtet werden.Die genannten Klassen lassen sich teilweise kombinieren. Hierbei sollte Augenmaß gewahrt werden, nicht jede Eigenschaft ist immer passend. Sinnvolle Kombinationen wären:
class="duhoc-de wikitable table-responsive sortable"
class="duhoc-de wikitable table-responsive toptextcells"
class="duhoc-de wikitable table-responsive sortable toptextcells"
Für Mobilgeräte steht diese Funktionalität (Stand Mai 2020) nicht zur Verfügung. Einzig class="duhoc-de wikitable table-responsive center"
hat eine Auswirkung.
– nicht veränderbar
Normalerweise werden Tabellen in Artikeln linksbündig ohne Textumfluss dargestellt.
Um Tabellen mit Textumfluss darzustellen, können CSS-Klassen oder Style-Zuweisungen genutzt werden:
1em
nach oben, unten und der dem Rand gegenüberliegenden Seite.Syntax:
{| class="wikitable table-responsive float-left" {| class="wikitable table-responsive " style="float:left;"
Syntax:
{| class="wikitable table-responsive float-right" {| class="wikitable table-responsive " style="float:right;"
Um den Textumfluss zu beenden, das heißt zu verhindern, dass die Tabelle in den nächsten Abschnitt, oder dass die folgende Überschrift neben die Tabelle rutscht, sollte das float
aufgehoben werden.
Für die einfache Zentrierung einer Tabelle stehen zwei CSS-Klassen zur Verfügung:
Syntax:
{| class="wikitable table-responsive center"
Syntax:
{| class="wikitable table-responsive centered"
Zellen verbinden: Eine Zelle kann die rechts oder unten angrenzenden Zellen überspannen, dafür gibt es zwei unterschiedliche Anweisungen:
Die Syntax kann sowohl für Kopfzellen als auch für Inhaltszellen eingesetzt werden.
Mehrere Zellen markieren, verbinden, teilen – Der visuelle Editor bietet eine einfache Möglichkeit Zellen zu verbinden oder verbundene Zellen zu wieder trennen.
Syntax:
|- !colspan="3"| Zwischenüberschrift |- |colspan="2"| Zelle 1/1 bis Zelle 2/1 || Zelle 3/1 |- | Zelle 1/2 ||colspan="2"| Zelle 2/2 bis Zelle 3/2
Der Wert für das colspan
sollte nicht größer sein als die Anzahl der Zellen in einer Zeile.
Syntax:
|- !rowspan="2"| Kopfzelle !! Kopfzelle oben !!rowspan="2"| Kopfzelle |- ! Kopfzelle unten |- | Zelle 1/1 ||rowspan="2"| Zelle 2/1 bis Zelle 2/2 || Zelle 3/1 |- | Zelle 1/2 || bis Zelle 3/2
Der Wert für das rowspan
sollte nicht größer sein als die Anzahl der Zellen in einer Spalte, es könnte sonst zu Darstellungsfehlern führen.
Kombinationen können bei der Quelltextbearbeitung recht unübersichtlich sein, hier kann die visuelle Bearbeitung vorteilhafter sein, weil man sich nicht um die Syntax kümmern muss.
Syntax:
|- |colspan="3" rowspan="2"| Inhalt verbundener Zellen
Zur Gestaltung der Tabellenrahmen und Zellenränder siehe Rahmen und Zellenränder
Die Inhalte von Tabellen können innerhalb der Zellen vertikal und horizontal ausgerichtet werden. Zudem lässt sich die Breite der Spalten oder Höhe der Zeilen einstellen.
Dabei ist zu beachten, …
abhängig von der Spaltenbreite getrennt werden.nowrap
oder geschützte Leerzeichen
zwischen den Wörtern am Zeilenumbruch gehindert werden, wirken sich ebenfalls auf die Spaltenbreite aus.Dies kann sich bei unterschiedlicher Bildschirmbreite, auf unterschiedlichen Endgeräten, bei individuell voreingestellten Schriftarten oder Bildgrößen oder bei unterschiedlichen Browsern auf des Layout der Tabelle auswirken.
– nicht veränderbar
Die Spaltenbreite kann als Angabe in %
(Anteil an der Gesamtbreite der Tabelle) oder mit festen Werten px
oder besser em
erfolgen. Auf Angaben mit der Einheit px
sollte verzichtet werden; es sei denn, es werden ausschließlich Grafiken erwartet. Statt dessen sollte für Text mit der Einheit em
gearbeitet werden, wobei 1em
ungefähr der Breite des Großbuchstabens „M“ in der umgebenden Schriftgröße entspricht.
Grundsätzlich ist es besser, wenn die Browser der Leser nach den momentanen Gegebenheiten (Bildschirmplatz, Schriftart) dynamisch die Spaltenbreiten verteilen. Sie machen das in der Regel sinnvoller als die Autoren der Artikel. Die meisten im Bestand vorgegebenen expliziten Spaltenbreiten sind völlig überflüssig.
Nur wenn mehrere Tabellen gleicher Art in der Seite vorkommen und diese gleiches Aussehen haben sollen, ist eine Festlegung regelmäßig sinnvoll; oder wenn Spalten mit gleichartigem Inhalt gleichmäßig aussehen sollen.
Für die breiteste Spalte sollte kein Wert explizit vorgegeben werden, sondern die Browser sollten deren Breite selbst errechnen. Überbestimmte Vorgaben für alle Spalten können durch Rundungsfehler zu Darstellungsfehlern führen; etwa wenn Prozentsätze addiert werden, deren Summe scheinbar 100 % ergibt. Bei der Darstellung wird jedoch mit physischen Einheiten gerechnet, die nicht exakt auf einzelne Prozentpunkte abgebildet sind.
Auch für die komplette Tabelle lässt sich ein Wert vorgeben. Für eher schmale Tabellen mit nur wenigen Spalten sollte daher eine Tabelle nicht auf einen Wert style="width:100%"
gesetzt werden, weil die Inhalte dann bei breiten Bildschirmen weit auseinander liegen würden.
%
Die Angabe in %
richtet sich immer auch nach der Breite der einzelnen Zelleninhalte. Durch Änderungen in einer Spalte kann sich so das Layout der gesamten Tabelle verändern. Die beabsichtigten Prozentangaben der einzelnen Spalten müssen in der Summe 100% ergeben, auch dann, wenn für die komplette Tabelle beispielsweise eine Breite von style="width:50%"
definiert wurde. Um Darstellungsfehler zu vermeiden, sollte für eine (meist die breiteste) Spalte kein Prozentwert angegeben werden; diese Breite wird besser vom Browser errechnet.
Syntax:
|- |style="width:20%;"| Spalte mit 20 % der Gesamtbreite der Tabelle
em
Die Breite kann auch in festen Werten vorgegeben werden. Dabei gilt es zu beachten, dass die Gesamtbreite einer Tabelle mit festen Werten, je nach Bildschirmbreite das Betrachters, über den rechten Rand hinauslaufen kann.
Syntax:
|- |style="width:20em;"| Spalte mit fester Breite von 20em
Bei mehreren, dicht untereinander stehenden Tabellen mit ähnlichen Inhalten und Überschriften kann es vorteilhaft sein, die Breite für die Spalten einheitlich festzulegen. Das funktioniert nur, wenn die Inhalte die Werte für die Breiten nicht überschreiten.
– nicht veränderbar
Um den Text in allen Inhaltszellen einer Tabelle horizontal auszurichten, kann die CSS-Anweisung am Tabellenbeginn gesetzt werden, zum Beispiel:
{| class="wikitable table-responsive " style="text-align:center;"
Um den Text in allen Inhaltszellen einer Tabelle vertikal auszurichten gibt es die Möglichkeit
{| class="wikitable table-responsive " style="vertical-align:top;"
Alternativ eine Klasse toptextcells.
{| class="wikitable table-responsive toptextcells"
– nicht veränderbar
bgcolor="#RRGGBB"
sollte nicht verwendet werden, siehe auch Hilfe:CSS #Veraltete AnweisungenKlassenname | Farbe in allen Skins |
---|---|
hintergrundfarbe1 | #F8F9FA |
hintergrundfarbe2 | #FFFFFF |
hintergrundfarbe3 | #FFFF40 |
hintergrundfarbe4 | #FFAA00 |
hintergrundfarbe5 | #EAECF0 |
hintergrundfarbe6 | #B3B7FF |
hintergrundfarbe7 | #FFCBCB |
hintergrundfarbe8 | #FFEBAD |
hintergrundfarbe9 | #B9FFC5 |
Es kann eine der 9 Wiki-Standardfarben vergeben werden. class="duhoc-de hintergrundfarbeX"
– X
= 1 bis 9
Alle Inhaltszellen der Tabelle einfärben
{| class="hintergrundfarbeX"
Komplette Inhaltszeilen einfärben
|- class="duhoc-de hintergrundfarbeX"
Einzelne Zellenhintergründe einfärben
|class="duhoc-de hintergrundfarbeX"| Zelleninhalt
Einzelne Kopfzellen einfärben
!class="duhoc-de hintergrundfarbeX"| Kopfzelle
Den Zellen kann direkt eine beliebige Farbe zugewiesen werden. style="background:#RRGGBB"
– Werte von #000000
(schwarz) bis #FFFFFF
(weiß)
#FF0000
_ Rot, #00FF00
_ Grün und #0000FF
_ Blau.#FF8C00
_ Orange. Es sollte bei der Farbgebung beachtet werden, dass Farben nicht zu grell gewählt werden, die Inhalte müssen gut lesbar bleiben.Alle Inhaltszellen der Tabelle einfärben
{| style="background:#RRGGBB"
Komplette Inhaltszeilen einfärben
|- style="background:#RRGGBB"
Einzelne Zellenhintergründe einfärben
|style="background:#RRGGBB"| Zelleninhalt
Einzelne Kopfzellen einfärben
! style="background:#RRGGBB"| Kopfzelle
an jeder Bruchstelle innerhalb einer und derselben Zeile des Quelltextes erzeugt werden. Eine alternative Möglichkeit besteht darin, für jede Zeile des Eintrags eine neue Quelltext-Zeile zu beginnen, ebenfalls mit
an den Bruchstellen am jeweiligen Zeilenende, wie im nachfolgenden Beispiel (2. Spalte) gezeigt wird. Das ist bei längeren Zeilen des umbrochenen Tabelleneintrags übersichtlicher, kann allerdings zu einer etwas veränderten vertikalen Anordnung des Zelleninhalts führen; auch können dann nicht in direktem Anschluss daran weitere Zellen innerhalb derselben Quelltext-Zeile hinzugefügt werden (wie in /Wikisyntax#Elemente beschrieben).
an den Zeilenenden entfallen hier, da die Aufzählungszeichen *
oder #
, die alle direkt am Anfang der jeweiligen Quelltext-Zeile stehen müssen, hinreichend den Zeilenwechsel markieren.Eine QT-Zeile | Individuelle QT-Zeilen | ||
---|---|---|---|
|
| * | # |
Zeile 1 Zeile 2 Zeile 3 | Zeile 1 |
|
|
QT = Quelltext
Quelltext dieser Tabelle:
{| class="wikitable table-responsive toptextcells" |- ! ''Eine'' QT-Zeile !!colspan="3"| Individuelle QT-Zeilen |- ! <br />
!! <br />
!! *
!! #
|- |Zeile 1<br /> Zeile 2<br /> Zeile 3 | Zeile 1<br /> Zeile 2<br /> Zeile 3 | * Zeile 1 * Zeile 2 * Zeile 3 | # Zeile # Zeile # Zeile |}
– nicht veränderbar
Eine Texteinrückung, d. h. eine Darstellung, bei der der Text nicht am linken Rand beginnt (bei linksseitiger Ausrichtung) bzw. nicht am rechten Rand endet (bei rechtsseitiger Ausrichtung), sondern etwas eingerückt wird, kann über das cell padding („Zellen-Auspolsterung“)-Attribut erreicht werden:
style="padding-…;"
Linksbündig ohne Einrückung | 1 |
Linksbündig mit Einrückung | 2 |
Rechtsbündig ohne Einrückung | 3 |
Rechtsbündig mit Einrückung | 4 |
Quelltext dieser Tabelle:
{| class="wikitable table-responsive " |- | Linksbündig<br /> ohne Einrückung || 1 |- |style="padding-left:2em"| Linksbündig<br /> mit Einrückung || 2 |- |style="text-align:right"| Rechtsbündig<br /> ohne Einrückung || 3 |- |style="text-align:right; padding-right:2em"| Rechtsbündig<br /> mit Einrückung || 4 |}
Der gesamte Tabelleninhalt wird rechtsbündig, wenn man im Tabellenkopf {| style="text-align:right;"
eingibt. Spaltenweise ist leider nicht möglich.
Die Mindestbreite einer Spalte richtet sich nach dem längsten Wort. Um der darstellenden Software zu signalisieren, wo eine Worttrennung möglich ist, kann in besonders langen Wörtern das Entity
in den Quelltext eingefügt werden. Dann erfolgt bei Bedarf an dieser Stelle Silbentrennung. Das sollte jedoch nur sparsam genutzt werden.
Die von unseren Lesern verwendeten Endgeräte können sich unterscheiden, insbesondere unterschiedlich breit sein: PC auf dem Schreibtisch, Smartphone, Großbildschirme. Gute Seiten passen sich den individuellen Verhältnissen bei momentanen Lesern an. Siehe dazu Layoutfluss.
– nicht veränderbar
Bei der Verwendung von style="float:…;"
sollte immer auch ein Abstand margin-…:
angegeben werden, damit der umfließende Inhalt der Seite nicht abstandslos an die Tabelle stößt.
Um den Textumfluss zu beenden, sollte das float
aufgehoben werden. Dafür gibt es entsprechende Anweisungen zum Zurücksetzen, beispielsweise:
{{Absatz}}
(gleichbedeutend mit
) nach der Tabellestyle="…;"
im Tabellenkopf einer nachfolgenden TabelleIn den folgenden Beispielen fordert jeweils die linke Tabelle einen kleinen Abstand nach rechts.
style="float:left;"
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
Inhalt linksbündig | vertikal zentriert |
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
Inhalt linksbündig | vertikal zentriert |
Quelltext der Tabellen: mit Abstand nach rechts
{| class="wikitable table-responsive " style="float:left; margin-right:1em;" |+ Tabelle 1 |- ! Kopfzelle !! Kopfzelle |- | Inhaltszelle || Inhaltszelle |- | Inhalt<br /> linksbündig || vertikal zentriert |} {| class="wikitable table-responsive " style="float:left;" |+ Tabelle 2 |- ! Kopfzelle !! Kopfzelle |- | Inhaltszelle || Inhaltszelle |- | Inhalt<br /> linksbündig || vertikal zentriert |} <div style=" ">div>
style="float:right;"
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
Inhalt linksbündig | vertikal zentriert |
Kopfzelle | Kopfzelle |
---|---|
Inhaltszelle | Inhaltszelle |
Inhalt linksbündig | vertikal zentriert |
Quelltext der Tabellen; die linke Tabelle erhält einen kleinen Abstand nach rechts
{| class="wikitable table-responsive " style="float:right;" |+ Tabelle 1 |- ! Kopfzelle !! Kopfzelle |- | Inhaltszelle || Inhaltszelle |- | Inhalt<br /> linksbündig || vertikal zentriert |} {| class="wikitable table-responsive " style="float:right; margin-right:1em;" |+ Tabelle 2 |- ! Kopfzelle !! Kopfzelle |- | Inhaltszelle || Inhaltszelle |- | Inhalt<br /> linksbündig || vertikal zentriert |} <div style="">div>
-Anweisung wie folgt verwendet werden:Quelltext dieser Tabelle:
{| class="wikitable table-responsive " |- ! Spalte 1 ! Spalte 2 |- | Zelle 1{{FN|1}} | Zelle 2 |- | Zelle 3 | Zelle 4<ref group="Anm.">Eine Anmerkung <code><ref>code>ref> |} '''Anmerkungen''' <references group="Anm." /> {{FNBox| {{FNZ|1|Text der Anmerkung {{Vorlage|FN}}}} }}
Siehe Wiki: Datumskonventionen #Datumsangaben in Tabellen.
Eine „automatische“ Nummerierung der Zeilen einer Tabelle, so wie es etwa bei einer nummerierten Liste mit dem Zeichen # geschieht, ist bei Tabellen ebenfalls möglich. Dies geschieht durch Einfügung einer zusätzlichen vorangestellten Spalte, die eine Zählung der Zeilen ermöglicht und die zugehörige Zeilennummer anzeigt. Die Syntax wird auf /Zählung beschrieben.
In den 1990er Jahren war es einmal Mode, mittels Tabellen alle Elemente der Seite in einem fest vorgegebenen Schema anzuordnen: die sogenannten Layout-Tabellen. Typisch war dann der Hinweis „Optimiert für 1024×768 Pixel“ – alle Leser mit kleinerem Bildschirm oder die sich die Webseite nicht als Vollbild ansehen wollten, hatten Pech und bekamen eine durcheinandergewürfelte oder unvollständige Darstellung angezeigt.
Heute gibt es Mobilgeräte mit relativ kleinem, zumindest aber begrenztem Bildschirm (global erfolgen rund die Hälfte aller Lesezugriffe auf eine Wikipedia über Mobilgeräte). Andere Leser verwenden HD-Bildschirme, scherzhaft als Kinoleinwand bezeichnet, und könnten extrem viele Elemente nebeneinander anzeigen (wobei es dem Verständnis und der Lesbarkeit auch nicht dienlich wäre, 1000 Buchstaben in einer einzigen Zeile anzuzeigen).
Webseiten sollen sich heutzutage am „Responsiven Webdesign“ orientieren. Sie sollen eine den Umständen bei den Lesern entsprechende übersichtliche und sinnvolle Darstellung erzeugen. Das können Browser auch, wenn ihnen dazu Freiraum gelassen wird. Layout-Vorgaben sollten sich auf inhaltlich notwendige Forderungen beschränken und keine bestimmte Präsentation vorschreiben. Viele Wikipedia-Autoren der ersten Jahre hatten nur mit relativ großen „Desktop“-Darstellungen gearbeitet und vorausgesetzt, dass sich jeder Leser ähnlich viel Bildschimplatz verschaffen könne, und dies auch durch ein statisches Layout zwingend vorgegeben. Würde umgekehrt ein schmales Design für Mobilgeräte fest definiert werden, wird bei Lesern mit breiterem Bildschirm viel Platz rechts daneben verschenkt; inhaltlich zusammengehörige Elemente sind hier nicht mehr gleichzeitig sichtbar, obwohl dafür Platz vorhanden wäre. Auch dies ist eine unübersichtliche Darstellung.
Um Tabellen je nach Fenstergröße bei genügend Platz nebeineinander anzuordnen, und bei wenig Raum untereienander, siehe den Abschnitt Dynamisches Layout.
Tabellen sollten nur dazu verwendet werden, um einzelne Datenelemente übersichtlich strukturiert anzuordnen. Das ist auch ein wichtiger Aspekt für die Barrierefreiheit. Für die Präsentation gibt es andere Möglichkeiten:
Vermieden werden sollte generell:
100%
oder 50%
) in Bezug zur Bildschirmbreite. nowrap
, geschützte Leerzeichen) wo nicht wirklich erforderlich. Bei schmaler Bildschirmbreite muss an geeigneten Stellen umbrochen werden können.This article uses material from the Wikipedia Deutsch article Hilfe:Tabellen, which is released under the Creative Commons Attribution-ShareAlike 3.0 license ("CC BY-SA 3.0"); additional terms may apply (view authors). Abrufstatistik Der Inhalt ist verfügbar unter CC BY-SA 4.0, sofern nicht anders angegeben. Images, videos and audio are available under their respective licenses.
®Wikipedia is a registered trademark of the Wiki Foundation, Inc. Wiki Deutsch (DUHOCTRUNGQUOC.VN) is an independent company and has no affiliation with Wiki Foundation.