LEMA-protol | PmWikiDe / Einfache Tabellen

für die Liste aller Seiten

Autoren (Grundlagen)

< Hochladen von Dateien | Dokumentations-Index | Tabellendirektiven >

Bei PmWiki gibt es zwei Arten von Formatierungsanweisungen für Tabellen. Die auf dieser Seite beschriebene Syntax ist nützlich, um einfache Tabellen mit vielen kleinen Zellen zu erzeugen. Die zweite verfügbare Syntax ist für größere Tabellen oder Tabellen mit mit komplexen Zellinhalten geeignet. Weitere Möglichkeiten, einfache Tabellen zu formatieren, finden sich in den Kochbuch-Rezepten Cookbook:RowspanInSimpleTables und Cookbook:FormattingTables (nur auf Englisch verfügbar).

Grundlagen zu Tabellen

Einfache Tabellen werden mit Hilfe des doppelten 'pipe'-Zeichens || definiert. (Auf deutschen Tastaturen befindet sich das 'pipe'-Zeichen in der Regel links unten auf der Taste mit den Zeichen '<' und '>'. Das 'pipe'-Zeichen lässt sich unter Windows oder Linux normalerweise durch gleichzeitiges Drücken der <AltGr>-Taste und der '<'-Taste erzeugen. Macintosh Nutzer verwenden Wahltaste+7.). Zeilen, die mit || beginnen, zeigen den Beginn einer Tabellenzeile an. Das Auftreten von || innerhalb einer Zeile markiert den Beginn einer neuen Tabellenzelle. Nachfolgende Tabelle enthält zur besseren Sichtbarkeit einen Rand (standardmäßig ist kein Rand sichtbar).

Die erste Zeile im Markup (doppelte senkrechte Striche "||" am Zeilenanfang) ist erforderlich. Nach den Zeichen "||" können Formatierungskommandos für die Tabelle folgen, z. B. border oder width.

Einfache Tabelle

|| border=1
|| Zelle 1 || Zelle 2 || Zelle 3 ||
|| Zelle 1 || Zelle 2 || Zelle 3 ||

Zelle 1	Zelle 2	Zelle 3
Zelle 1	Zelle 2	Zelle 3

Kopfzellen können gebildet werden, indem man ! als erstes Zeichen einer Zelle eingibt. Dies sind Tabellenköpfe, keine Überschriften, sodass !! und !!! keine Wirkung haben!

Tabelle mit Tabellenköpfe und Umrandung

|| border=1
||! Zelle 1 ||! Zelle 2 ||! Zelle 3 ||
||  Zelle 1 ||  Zelle 2 ||  Zelle 3 ||

Zelle 1	Zelle 2	Zelle 3
Zelle 1	Zelle 2	Zelle 3

Tabellen können eine Beschriftung besitzen: ||!Beschriftung!||. Jede Beschriftung muss vor den anderen Zeilen der Tabelle eingefügt werden.

Tabellenbeschriftung

|| border=1
||! Eine besondere Tabelle !||
||! Zelle 1 ||! Zelle 2 ||! Zelle 3 ||
||  Zelle 1 ||  Zelle 2 ||  Zelle 3 ||

Eine besondere Tabelle
Zelle 1	Zelle 2	Zelle 3
Zelle 1	Zelle 2	Zelle 3

Formatierung von Zellinhalten

Zellinhalte dürfen links-, rechtsbündig oder zentriert sein.

Um Inhalte nach links auszurichten, wird der Zelleninhalt ohne Leerzeichen direkt rechts neben das führende || geschrieben.
Um Inhalte zu zentrieren, wird jeweils ein Leerzeichen vor und nach dem Zelleninhalt gesetzt.
Für die rechtsbündige Ausrichtung wird der Zelleninhalt ohne Leerzeichen direkt links neben das folgende || gestellt, wobei vor dem Zelleninhalt ein Leerzeichen eingetippt wird.

Ausrichtung der Zellen

|| border=1 width=100%
||!Zelle 1      ||! Zelle 2  ||!     Zelle 3||
||linksbündig   || zentriert || rechtsbündig||

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Standardausrichtung der Zellen

|| border=1 width=100%
||!Zelle standard||!Zelle links ||
||bündig nach Standard||linksbündig ||

Zelle standard	Zelle links
bündig nach Standard	linksbündig

Es sei bemerkt, dass die Kopfzellen und die anderen Zellen verschiedene Voreinstellungen haben.

Damit eine Zelle mehrere Spalten überspannt, lassen Sie ihr leere Zellen folgen:

Überspannen von Spalten

|| border=1 width=100%
|| |||| rechte Spalte ||
|| || rechte zwei Spalten ||||
|| || mittlere Spalte || ||
|| linke Spalte || ||||
|| linke zwei Spalten |||| ||
|| gesamte Zeile ||||||
|| linke Spalte || mittlere Spalte || rechte Spalte ||

		rechte Spalte
	rechte zwei Spalten
	mittlere Spalte
linke Spalte
linke zwei Spalten
gesamte Zeile
linke Spalte	mittlere Spalte	rechte Spalte

Damit eine Zelle mehrere Zeilen überspannt, fügen Sie ++ nach dem Zelltext an (2 oder mehr Pluszeichen lassen die Zelle so viele Zeilen überspannen).

|| border=1
||Überspannt drei Zeilen+++ ||Reguläre Zelle ||
||Zelle 2te Spalte ||
||Zelle 2te Spalte ||
||Etwas Text       || Überspannt zwei Zeilen ++ ||
||Erste Spalte     ||

Überspannt drei Zeilen	Reguläre Zelle
	Zelle 2te Spalte
	Zelle 2te Spalte
Etwas Text	Überspannt zwei Zeilen
Erste Spalte	Überspannt zwei Zeilen

Wenn eine Zelle auf zwei oder mehr Pluszeichen enden soll, fügen Sie das Zeichen für einen leeren Platz [==] hinter ihnen ein.

Um die Zeilenspanne beim Bearbeiten besser sichtbar zu machen, können Sie eine Zelle mit nur Dachzeichen "^" einfügen, die dann ignoriert wird.

|| border=1
||Überspannt drei Zeilen+++ ||Reguläre Zelle   ||
||^^^^^^^^^^^^^^^^^^^^^^^^^^||Zelle 2te Spalte ||
||^^^^^^^^^^^^^^^^^^^^^^^^^^||Zelle 2te Spalte ||
||Etwas Text   || Überspannt zwei Zeilen ++ ||
||Erste Spalte ||^^^^^^^^^^^^^^^^^^^^^^^^^^^||

Überspannt drei Zeilen	Reguläre Zelle
	Zelle 2te Spalte
	Zelle 2te Spalte
Etwas Text	Überspannt zwei Zeilen
Erste Spalte	Überspannt zwei Zeilen

Tabelleneigenschaften

Jede Zeile, welche mit || beginnt, aber nicht mit || endet, setzt die Tabelleneigenschaften für jede der folgenden Tabellen. Diese Eigenschaften können Größe, Position, Rahmen, Hintergrundfarbe und die Zellenabstände in der Tabelle bestimmen. (Tatsächlich handelt es sich hier nur um die in den <table> Ausdruck gesetzten Standard-HTML-Eigenschaften.)

Mit dem width=-Attribut (in Prozent, als absoluter Wert oder als *) wird die Tabellenweite festgelegt.

Siehe auch $SimpleTableDefaultClassName.

Tabellenbreite

|| border=1 width=100% 
|| Zelle 1 || Zelle 2 || Zelle 3 ||
|| z1 || zellezellezellezelle2 || zelle 3 ||
|| border=1 width=400px 
|| Zelle 1 || Zelle 2 || Zelle 3 ||
|| z1 || zellezellezellezelle2 || zelle 3 ||
|| border=1 width=* 
|| Zelle 1 || Zelle 2 || Zelle 3 ||
|| z1 || zellezellezellezelle2 || zelle 3 ||

Zelle 1	Zelle 2	Zelle 3
z1	zellezellezellezelle2	zelle 3

Zelle 1	Zelle 2	Zelle 3
z1	zellezellezellezelle2	zelle 3

Zelle 1	Zelle 2	Zelle 3
z1	zellezellezellezelle2	zelle 3

Das border=-Attribut setzt die Größe der Tabellenränder.

Tabelle mit Rahmen

|| border=10 width=70% 
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Tabelle ohne Rahmen

|| border=0 width=70%
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Mit align=center, align=left, and align=right wird die Tabelle links-, rechtsbündig oder zentriert ausgerichtet. align=left und align=right erzeugen eine fließende (floating) Tabelle, so dass der Text um die Tabelle herumfließt.

|| border=1 align=center width=70%
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||
Eine mit [@align=center@] ausgerichtete Tabelle wird nicht vom Text umflossen.

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Eine mit align=center ausgerichtete Tabelle wird nicht vom Text umflossen.

Tabellenausrichtung: linksbündig

|| border=1 align=left width=70%
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||
Der Text fließt rechts um die links ausgerichtete Tabelle.

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Der Text fließt rechts um die links ausgerichtete Tabelle.

Tabellenausrichtung: rechtsbündig

|| border=1 align=right width=70%
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||
Der Text fließt links um die rechts ausgerichtete Tabelle.

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Der Text fließt links um die rechts ausgerichtete Tabelle.

Zu beachten ist, dass man CSS benötigt, um eine Tabelle zwar linksbündig auszurichten, aber als nicht-fließendes Element festzulegen.

||style="margin-left:0px;"

Das bgcolor=-Attribute legt die Hintergrundfarbe fest. Im Moment können keine individuellen Farben für Zeilen oder Spalten in einer Tabelle festgelegt werden (siehe aber auch das Kochbuch-Rezept Cookbook:FormattingSimpleTables (nur auf Englisch verfügbar)).

|| border=1 align=center bgcolor=yellow
||!Zelle 1      ||! Zelle 2  ||!       Zelle 3||
||linksbündig || zentriert || rechtsbündig||

Zelle 1	Zelle 2	Zelle 3
linksbündig	zentriert	rechtsbündig

Weitere Beispiele

Eine komplexere Tabelle

%define=sp padding-right:1em font-weight:bold%
|| border=1
|| [++Events Calendar++] ||||||||||
|| '''May 2005''' || '''June 2005''' || '''July 2005''' || '''August 2005''' || '''September 2005''' ||
||%sp%'''10'''%%6:30 - 8:30 Big Meeting[[<<]][[<<]]%sp%'''17'''%%7:00 - 8:30 Bigger Meeting[[<<]][[<<]]%sp%'''24'''%%7:00 - 8:30 Biggest Meeting|| || || || ||
|| '''October 2005''' || '''November 2005''' || '''December 2005''' || '''January 2006''' || '''February 2006''' ||
|| || || || || ||

Events Calendar
May 2005	June 2005	July 2005	August 2005	September 2005
106:30 - 8:30 Big Meeting 177:00 - 8:30 Bigger Meeting 247:00 - 8:30 Biggest Meeting
October 2005	November 2005	December 2005	January 2006	February 2006

Sortierbare Tabellen

Um Besuchern die Möglichkeit zu geben, eine Tabelle umzusortieren, geben Sie ihr das Attribut class="sortable":

|| class="sortable simpletable"
||!   m||!Geographic zone     ||!Highest point     ||!Country  ||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland ||
|| 8848||North Temperate Zone ||Mount Everest      ||Nepal     ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador   ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru      ||
|| 6960||South Temperate Zone ||Aconcagua          ||Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)    ||

m	Geographic zone	Highest point	Country
3700	Arctic	Gunnbjørn Fjeld	Greenland
8848	North Temperate Zone	Mount Everest	Nepal
5790	North Tropical Zone	Cayambe	Ecuador
6768	South Tropical Zone	Huáscarán	Peru
6960	South Temperate Zone	Aconcagua	Argentina
4892	Antarctic	Mount Vinson	(none)

Bemerkung:

Diese Möglichkeit muss in der lokalen Konfiguration aktiviert werden, siehe $EnableSortable. Es funktioniert dann sowohl mit einfachen Tabellen wie oben als auch mit Tabellendirektiven mit dem class="sortable"-Attribut.
Die optionale "simpletable"-Klasse ist im Standard-Skin und möglicherweise auch in anderen Skins verfügbar, sie sollte vernünftige Style für einfache Tabellen definieren.
Die erste Zeile der Tabelle muss Kopfzellen mit ||!-Separatoren enthalten, die zum Sortieren der Zeilen nach dieser Spalte angeklickt werden können.
Soll die letzte Zeile Ihrer Tabelle eine Fußzeile sein, die nicht sortiert werden soll, so benutzen Sie die Klasse "sortable-footer" anstatt "sortable". Wenn Sie ||!-Separatoren in der Fußzeile benutzen, kann diese Fußzeile zum Sortieren der Zeilen benutzt werden wie die Kopfzeile.

Datentypen: Per Voreinstellung werden die Zeilen numerisch sortiert, wenn die Zeilen unformatierte numerische Werte enthalten, sonst alphabetisch. Sie können den zu sortierenden Datentyp einer Spalte definieren, indem Sie der Kopfzeilenzelle ein leeres Wikistile-Element hinzufügen:

%sort-numeric-us%%% – die Zellen der Spalte enthalten US-formatierte Zahlen wie 1,234.56.
%sort-date%%% – die Zellen der Spalte enthalten SI-formatierte Zahlen wie 1 234,56.
%sort-date%%% – die Zellen der Spalte enthalten ein Datum oder eine Datum-Zeit, das/die vom Browser analysiert wird. Daten wie "2023-11-19" oder "2023-11-19 14:09:11" sollten korrekt erkannt werden, andere Daten in Englisch könnten korrekt erkannt werden oder auch nicht.
%sort-time%%% – die Zellen der Spalte enthalten ein <time datetime="..."></time> Element, dessen "datetime"-Wert soll zum Sortieren benutzt werden. Markup wie @2022-01-08T10:07:08Z oder {(ftime "%L" "{*$LastModifiedTime}")} würde ein <time>-Element in der Zeitzone des Besuchers ausgeben mit mehr oder weniger Präzision, abhängig von $EnableLocalTimes, doch die "datetime"-Attribute sollten zu präziser Sortierung führen.

FAQ

Wie erzeuge ich eine einfache Tabelle?

Tabellen werden unter Verwendung des doppelten 'Pipe'-Zeichens '||' erzeugt. Zeilen, die mit diesem Symbol beginnen, zeigen eine Tabellenzeile an; innerhalb solcher Zeilen wird das doppelte 'Pipe'-Zeichen benutzt, um Tabellenzellen zu begrenzen. In dem Beispiel hierunter sind Rahmen hinzugefügt zur Illustration (der Standard ist kein Rahmen).

Basic table

|| border=1 rules=rows frame=hsides
|| Zelle 1 || Zelle 2 || Zelle 3 ||
|| Zelle 1 || Zelle 2 || Zelle 3 ||

Zelle 1	Zelle 2	Zelle 3
Zelle 1	Zelle 2	Zelle 3

Wie erzeuge ich Spaltenköpfe?

Spaltenköpfe können erzeugt werden, indem man ein Ausrufezeichen an die erste Stelle einer Zelle setzt. Anmerkung: Dies sind Spaltenköpfe, keine Überschriften, '!!' oder '!!!' funktionieren nicht.

Table headers

|| border=1 rules=cols frame=vsides
||! Zelle 1 ||! Zelle 2 ||! Zelle 3 ||
|| Zelle 1 || Zelle 2 || Zelle 3 ||

Zelle 1	Zelle 2	Zelle 3
Zelle 1	Zelle 2	Zelle 3

Wie erhalte ich eine Tabelle mit dünnen Linien und mehr Abstand zum Inhalt?

"Dünne Linien" ist trickreich und browserabhängig, aber das Folgende funktioniert für Firefox und IE (Nov. 2009):

||border="1" cellpadding="10" style="border-collapse:collapse" width=66%
||!Spalte 1 ||! Spalte 2 ||!  Spalte 3||
||Zellen   ||  mit     || 'Padding'||
||und      || dünnen   ||    Linien||

Spalte 1	Spalte 2	Spalte 3
Zellen	mit	'Padding'
und	dünnen	Linien

Wie erzeuge ich eine erweiterte Tabelle?

Siehe unter Tabellendirektiven - komplexe Tabellen anlegen

Meine Tabellen sind standardmäßig zentriert. Wenn ich versuche, '||align=left' zu benutzen, werden sie nicht links ausgerichtet wie erwartet.

Sie benutzen vermutlich Firefox. Benutzen Sie ||style="margin-left:0px;" stattdessen.

Wie kann ich die Breite der Spalten angeben?

Sie können die Breite mit angepassten Stilen definieren, siehe Cookbook:FormattingTables und $TableCellAttrFmt. Fügen Sie in config.php ein:

$TableCellAttrFmt = 'class=col\$TableCellCount';

Und fügen Sie in pub/css/local.css hinzu :

table.column td.col1 { width: 120px; }
table.column td.col3 { width: 40px; }

Wie kann ich ein doppeltes 'Pipe'-Zeichen in einen Zelltext schreiben, wenn ich einfache Tabellen benutze?

Benutzen Sie || um '||' als ein spezielles Zeichen anzuzeigen. Alternativ dazu könnten Sie die 'Pipe'-Zeichen auch von der Interpretation durch PmWiki ausnehmen, wie das generell für derartige Konflikte möglich ist, schreiben Sie [=||=], um '||' anzuzeigen.

Wie wendet man Stile auf Elemente einer Tabelle an wie eine ID für die Tabellenzeile, oder eine Klasse / einen Stil für TD?

siehe $WikiStyleApply, $WikiStyleApply.

Alternativ können Sie Tabellendirektiven benutzen, die es erlauben, Stile entweder direkt (style="...") oder durch Klassenattribute für CSS(class="...") anzugeben.

Gibt es einen einfachen Weg, die Voreinstellungen für Tabellen zu ändern. Ich bevorzuge einen Rahmen und bin es leid, ihn zu jeder Tabelle hinzuzufügen.

Sie können $SimpleTableDefaultClassName = 'simpletable'; setzen und/oder Ihren eigenen Stil im Stylesheet definieren. Die 'simpletable'-Klasse ist im Skin des Kerns enthalten und kann in pub/css/local.css überschrieben oder neu definiert werden.

für die Liste aller Seiten

< Hochladen von Dateien | Dokumentations-Index | Tabellendirektiven >

Übersetzung von PmWiki.Tables, Originalseite auf PmWikiDe.Tables — Links Terug

Zuletzt geändert:	PmWikiDe.Tables	am 19.08.2024
	PmWiki.Tables	am 18.08.2024