Handbuch:Erweiterung/VisualEditor/Tabellen: Unterschied zwischen den Versionen

Margit Link-Rodrigue (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Margit Link-Rodrigue (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 4: Zeile 4:


Wählen Sie im visuellen Editor den Menüpunkt  ''Einfügen''  und dann ''Tabelle.''
Wählen Sie im visuellen Editor den Menüpunkt  ''Einfügen''  und dann ''Tabelle.''
[[Datei:VE-einfuegen-tabelle.png|alternativtext=Ausgeklapptes Menü "Einfügen"|zentriert|mini|220x220px|Tabelle einfügen]]
[[Datei:Handbuch:Ve einfügen.png|alternativtext=aufgeklapptes Einfügen-Menü des visuellen Editors|zentriert|mini|180x180px|Aktion "Einfügen"]]
<span><br /></span>Nach Angabe der Zeilen und Spalten erscheint eine leere Tabelle mit einem Dialogfeld zur Tabellenbearbeitung. Wenn der Mauszeiger auf einem Symbol ruht, wird die jeweilige Funktion angezeigt.<span><span /></span>
 
[[Datei:VE-tabelle-eingefuegt.png|alternativtext=Tabelle mit Dialogfeld |zentriert|mini|305x305px|Eingefügte Tabelle]]
 
Nach Angabe der Zeilen und Spalten erscheint eine leere Tabelle mit einem Dialogfeld zur Tabellenbearbeitung. Wenn der Mauszeiger auf einem Symbol ruht, wird die jeweilige Funktion angezeigt.
[[Datei:VE-tabelle-eingefuegt.png|alt=Leere Tabelle mit offenem Tabelleninspektor|zentriert|mini|305x305px|Eingefügte Tabelle]]
<span><br /></span><span><span /></span>
<span><br /></span><span><span /></span>


Zeile 20: Zeile 22:
Die verbundenen Zellen können Sie über die gleiche Schaltfläche wieder teilen.
Die verbundenen Zellen können Sie über die gleiche Schaltfläche wieder teilen.


==Tabelleneigenschaften festlegen==
== Tabelleneigenschaften festlegen ==
 
Im Eigenschaften-Dialgofenster gibt es zahlreiche Funktionen zur Anpassung der Tabelle:
Im Eigenschaften-Dialgofenster gibt es zahlreiche Funktionen zur Anpassung der Tabelle:
{| class="contenttable-blue" style=""
{| class="contenttable-blue" style=""
|+Übersicht der Tabelleneigenschaften
|+Übersicht der Tabelleneigenschaften
!Eigenschaft
! style="" |Eigenschaft
!Beschreibung
! style="" |Beschreibung
|-
|-
| Tabellenbreite
| style="" | Tabellenbreite
|Die Gesamtbreite kann hier prozentual zur verfügbaren Seitenbreite eingestellt werden, zum Beispiel auf 100%.
| style="" |Die Gesamtbreite kann hier prozentual zur verfügbaren Seitenbreite eingestellt werden, zum Beispiel auf 100%.
|-
|-
|Tabellenstil
| style="" |Tabellenstil
|Hier können verschiedene Stilvorlagen für die Tabelle geladen werden. Siehe: [[Handbuch:Erweiterung/VisualEditor/Tabellen#Tabellenstile|Galerie der Tabellenstile]].
| style="" |Hier können verschiedene Stilvorlagen für die Tabelle geladen werden. Siehe: [[de4:Handbuch:Erweiterung/VisualEditor/Tabellen#Tabellenstile|Galerie der Tabellenstile]].
|-
|-
|Exportierbar
| style="" |Exportierbar
|Fügt der Tabelle ein Kontextmenü hinzu, das die Tabelle im xlsx oder csv-Format speichern läßt. Das Kontextmenü kann über Rechtsklick mit der Maus aktiviert werden. Exportierbare Tabellen sind erkennbar, da sie beim Mouseover gelb hinterlegt sind.
| style="" |Fügt der Tabelle ein Kontextmenü hinzu, das die Tabelle im xlsx oder csv-Format speichern läßt. Das Kontextmenü kann über Rechtsklick mit der Maus aktiviert werden. Exportierbare Tabellen sind erkennbar, da sie beim Mouseover gelb hinterlegt sind.
Die gelbe Färbung läßt sich global von Wiki-Admins entfernen. Folgende 3 Zeilen können hierzu dem globalen Stylesheet ''MediaWiki:Common.css'' hinzugefügt werden:
Die gelbe Färbung läßt sich global von Wiki-Admins entfernen. Folgende 3 Zeilen können hierzu dem globalen Stylesheet ''MediaWiki:Common.css'' hinzugefügt werden:<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
/* Entfernen der gelben Highlight-Farbe von exportierbaren Tabellen */
/* Entfernen der gelben Highlight-Farbe von exportierbaren Tabellen */
#mw-content-text table.bs-et-highlight {background-color: transparent!important;}
#mw-content-text table.bs-et-highlight {background-color: transparent!important;}
Zeile 44: Zeile 43:
</syntaxhighlight>
</syntaxhighlight>
|-
|-
|Filterbar
| style="" |Filterbar
|Die Filterfunktion wird in der Titelzeile aktiviert und ermöglicht folgende Handlungen:
| style="" |<span>Fügt den Kopfzellen jeder Spalte eine Filterfunktion hinzu.</span>
 
|-
*Tabelle sortieren (aufsteigend oder absteigende Werte der aktiven Spalte)
| style="" |Sticky header
*Tabellenspalten ausblenden
| style="" |Die Kopfzeile der Tabelle bleibt bei langen Tabellen beim Scrollen der Seite sichtbar.
*Spalte filtern (nur Werte aus der aktuellen Spalte werden hier berücksichtigt)
 
[[Datei:tabelle-filtern.png|550x550px|alternativtext=Aufgeklapptes Filtermenü]]
 
<span><br /></span>
 
{{Hinweisbox|boxtype=Hinweis|Note text=Wenn der Filter aktiviert ist, werden die Tabellenstile ignoriert und die Tabelle im "Filterstil" angezeigt. Nach dem Deaktivieren dieser Funktion wird der gewählte Tabellenstil wieder angezeigt.}}
|-
|-
|Überschrift
| style="" |Überschrift
|Zeigt eine Überschrift über der Tabelle:
| style="" |Zeigt eine Überschrift über der Tabelle:
[[Datei:tabelle-ueberschrift.png|200x200px|alternativtext=Überschrift "Wochenplan KW 38" über einem Tabellenausschnitt]]
 
Nach dem Deaktivieren der Überschrift ist sie verloren und muss beim Re-aktivieren neu eingegeben werden.
Nach dem Deaktivieren der Überschrift ist sie verloren und muss beim Re-aktivieren neu eingegeben werden.
|-
|-
|Sortierbar
| style="" |Sortierbar
|In der ersten Reihe wird eine Sortierungsfunktion angezeigt:
| style="" |In der ersten Reihe wird eine Sortierungsfunktion angezeigt:
[[Datei:tabelle-sortieren.png|200x200px|alternativtext=Sortierbare Kopfzeile eines Tabellenausschnitts]]
 
Die aktuelle Sortierung ist in der Titelzeile ersichtlich. In der sortierten Spalte wird nur einer der beiden Sortierungspfeile angezeigt.
Die aktuelle Sortierung ist in der Titelzeile ersichtlich. In der sortierten Spalte wird nur einer der beiden Sortierungspfeile angezeigt.
|-
|-
|Einklappbar
| style="" |Einklappbar
|Die Tabelle kannüber einen Textlink aus-  und eingeklappt werden.
| style="" |Die Tabelle kannüber einen Textlink aus-  und eingeklappt werden.
|-
|-
|Zunächst eingeklappt
| style="" |Zunächst eingeklappt
|Wenn die Eigenschaft "Einklappbar" aktiv ist, wird hier bestimmt, ob die Tabelle beim Laden der Wikiseite sichtbar oder ausgeblendet ist. Die Titelzeile bleibt immer sichtbar:
| style="" |Wenn die Eigenschaft "Einklappbar" aktiv ist, wird hier bestimmt, ob die Tabelle beim Laden der Wikiseite sichtbar oder ausgeblendet ist. Die Titelzeile bleibt immer sichtbar:
[[Datei:tabelle-eingeklappt.png|rahmenlos|320x320px|alternativtext=Ausklappen-Link in der Kopfzeile einer eingeklappten Tabelle]]
|}
|}


==Tabellenstile==
== Tabellenstile ==
 
Im Menü Tabellenstil sind folgende Stilvorlagen auswählbar. Klicken Sie auf ein Bild um die Galerie zu starten:
Im Menü Tabellenstil sind folgende Stilvorlagen auswählbar. Klicken Sie auf ein Bild um die Galerie zu starten:


Zeile 94: Zeile 80:
</gallery>
</gallery>


<span><br /></span>
== Sortierung von speziellen Datenformaten ==
Wenn eine Spalte bei der Sortierung besondere Datentypen berücksichtigen soll (z.B. Datum, Nummer), kann dies '''in der Kopfzelle der Spalte''' entsprechend im Attribut ''class'' angegeben werden. Beachten Sie, dass eine Kopfzelle über "!" definiert wird.<syntaxhighlight lang="html">
{| class="wikitable sortable"
|+
! class="number" |Col A
|-
|1
|-
|2
|-
|30
|-
|11
|-
|5
|}
</syntaxhighlight>Ausgabe:
{| class="wikitable sortable"
|+Sortierbare Nummern-Spalte
! style="width:200px;" class="number" |Col A
|-
| style="width:200px;" |1
|-
| style="width:200px;" |2
|-
| style="width:200px;" |30
|-
| style="width:200px;" |11
|-
| style="width:200px;" |5
|}
Mögliche Werte sind:


=== <span>Fixierte Kopfzeile ("Sticky header")</span> ===
* string
<span>Es ist möglich, die CSS-Klasse ''mw-sticky-header'' im Quelltextbearbeitungsmodus hinzuzufügen, um eine Tabellenüberschrift zu erhalten, die beim Scrollen der Seite sichtbar bleibt. Dies funktioniert mit allen Tabellenstilen.</span>
* integer
* number
* date


<span>Das folgende Beispiel legt eine Sticky-Überschrift für den Standardtabellenstil ''wikitable'' fest:</span><syntaxhighlight lang="text">
{| class="wikitable mw-sticky-header"
</syntaxhighlight><div class="training anwender">
== <span>Existierende Tabellen nutzen</span> ==
== <span>Existierende Tabellen nutzen</span> ==
</div><div class="training anwender">
<div class="training anwender">
Mit dem visuellen Editor ist es leicht, Inhalte als Tabelle zu formatieren. Es gibt hierzu folgende Alternativen:<span><br /></span><span><span /></span>
Mit dem visuellen Editor ist es leicht, Inhalte als Tabelle zu formatieren. Es gibt hierzu folgende Alternativen:<span><br /></span><span><span /></span>
*Tabellen können auch als csv-Datei auf einer Seite eingefügt werden (einfach die CSV-Datei auf die Seite im Bearbeitungsmodus ziehen)
*Tabellen können auch als csv-Datei auf einer Seite eingefügt werden (einfach die CSV-Datei auf die Seite im Bearbeitungsmodus ziehen)

Aktuelle Version vom 13. Mai 2025, 15:40 Uhr

Eine Tabelle einfügen

Wählen Sie im visuellen Editor den Menüpunkt Einfügen und dann Tabelle.

aufgeklapptes Einfügen-Menü des visuellen Editors
Aktion "Einfügen"


Nach Angabe der Zeilen und Spalten erscheint eine leere Tabelle mit einem Dialogfeld zur Tabellenbearbeitung. Wenn der Mauszeiger auf einem Symbol ruht, wird die jeweilige Funktion angezeigt.

Leere Tabelle mit offenem Tabelleninspektor
Eingefügte Tabelle


Doppelklicken Sie in die Zellen, um Text einzufügen.

Beispiel eines Wochenplans (auf Englisch)
Beispieltabelle


Zeilen und Spalten verbinden

So verbinden Sie Tabellenzellen:

  1. Wählen Sie bei gedrückter Umschalt-Taste nebeneinanderliegende Zellen in einer Spalte oder Zeile aus.
  2. Klicken Sie auf Verbinden im offenen Dialogfeld. Die Zellen sind nun verbunden.

Die verbundenen Zellen können Sie über die gleiche Schaltfläche wieder teilen.

Tabelleneigenschaften festlegen

Im Eigenschaften-Dialgofenster gibt es zahlreiche Funktionen zur Anpassung der Tabelle:

Übersicht der Tabelleneigenschaften
Eigenschaft Beschreibung
Tabellenbreite Die Gesamtbreite kann hier prozentual zur verfügbaren Seitenbreite eingestellt werden, zum Beispiel auf 100%.
Tabellenstil Hier können verschiedene Stilvorlagen für die Tabelle geladen werden. Siehe: Galerie der Tabellenstile.
Exportierbar Fügt der Tabelle ein Kontextmenü hinzu, das die Tabelle im xlsx oder csv-Format speichern läßt. Das Kontextmenü kann über Rechtsklick mit der Maus aktiviert werden. Exportierbare Tabellen sind erkennbar, da sie beim Mouseover gelb hinterlegt sind. Die gelbe Färbung läßt sich global von Wiki-Admins entfernen. Folgende 3 Zeilen können hierzu dem globalen Stylesheet MediaWiki:Common.css hinzugefügt werden:
/* Entfernen der gelben Highlight-Farbe von exportierbaren Tabellen */
#mw-content-text table.bs-et-highlight {background-color: transparent!important;}
#mw-content-text table.bs-et-highlight.wikitable {background-color: #f8f9fa!important;
Filterbar Fügt den Kopfzellen jeder Spalte eine Filterfunktion hinzu.
Sticky header Die Kopfzeile der Tabelle bleibt bei langen Tabellen beim Scrollen der Seite sichtbar.
Überschrift Zeigt eine Überschrift über der Tabelle:

Nach dem Deaktivieren der Überschrift ist sie verloren und muss beim Re-aktivieren neu eingegeben werden.

Sortierbar In der ersten Reihe wird eine Sortierungsfunktion angezeigt:

Die aktuelle Sortierung ist in der Titelzeile ersichtlich. In der sortierten Spalte wird nur einer der beiden Sortierungspfeile angezeigt.

Einklappbar Die Tabelle kannüber einen Textlink aus- und eingeklappt werden.
Zunächst eingeklappt Wenn die Eigenschaft "Einklappbar" aktiv ist, wird hier bestimmt, ob die Tabelle beim Laden der Wikiseite sichtbar oder ausgeblendet ist. Die Titelzeile bleibt immer sichtbar:

Tabellenstile

Im Menü Tabellenstil sind folgende Stilvorlagen auswählbar. Klicken Sie auf ein Bild um die Galerie zu starten:

Sortierung von speziellen Datenformaten

Wenn eine Spalte bei der Sortierung besondere Datentypen berücksichtigen soll (z.B. Datum, Nummer), kann dies in der Kopfzelle der Spalte entsprechend im Attribut class angegeben werden. Beachten Sie, dass eine Kopfzelle über "!" definiert wird.

{| class="wikitable sortable"
|+
! class="number" |Col A
|-
|1
|-
|2
|-
|30
|-
|11
|-
|5
|}

Ausgabe:

Sortierbare Nummern-Spalte
Col A
1
2
30
11
5

Mögliche Werte sind:

  • string
  • integer
  • number
  • date

Existierende Tabellen nutzen

Mit dem visuellen Editor ist es leicht, Inhalte als Tabelle zu formatieren. Es gibt hierzu folgende Alternativen:

  • Tabellen können auch als csv-Datei auf einer Seite eingefügt werden (einfach die CSV-Datei auf die Seite im Bearbeitungsmodus ziehen)
  • Komplexe Tabellen können alternativ als xls-Datei an die Seite angehängt werden.

Weiterführende Links





PDF-Ausschluss - Start

Feedback zur Dokumentation ist im Community-Forum möglich.

PDF-Ausschluss - Ende