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

Margit Link-Rodrigue (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Margit Link-Rodrigue (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
 
(18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<bookshelf src="Buch:Benutzerhandbuch" />
<bookshelf src="Buch:Benutzerhandbuch" />
{{DISPLAYTITLE: Tabellen einfügen}}
{{DISPLAYTITLE: Tabellen einfügen}}
<span><br /></span>
==Eine Tabelle einfügen==
==Eine Tabelle einfügen==


Wählen Sie in VisualEditor "Einfügen > Tabellen", um eine Tabelle in einer Seite einzufügen:
Wählen Sie im visuellen Editor den Menüpunkt  ''Einfügen''  und dann ''Tabelle.''
[[Datei:Handbuch:Ve einfügen.png|alternativtext=aufgeklapptes Einfügen-Menü des visuellen Editors|zentriert|mini|180x180px|Aktion "Einfügen"]]


<span><br /></span>
[[Datei:VE-einfuegen-tabelle.png|220x220px]]


<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.
Nach Angabe der Zeilen und Spalten erscheint eine leere Tabelle mit Bearbeitungsmenü:
[[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>
Doppelklicken Sie in die Zellen, um Text einzufügen.
[[Datei:VE-tabelle-eingefuegt.png|305x305px]]
[[Datei:ve-tabellen-farbe-standard.png|alternativtext=Beispiel eines Wochenplans (auf Englisch)|zentriert|mini|250x250px|Beispieltabelle]]
 
<span><br /></span><span><span /></span>
<span><br /></span>
Wenn der Mauszeiger auf einem Symbol ruht, wird die jeweilige Funktion angezeigt.
 
<span><br /></span>
Doppelklicken Sie in die Zellen, um Text einzufügen:
 
<span><br /></span>
[[Datei:ve-tabellen-farbe-standard.png|250x250px]]
 
<span><br /></span>
==Zeilen und Spalten verbinden==
==Zeilen und Spalten verbinden==
'''So verbinden Sie Tabellenzellen:'''


Wenn sie in eine Zeile klicken, erscheint am linken Rand der Zeile und am oberen Rand der Spalte ein Pfeil. Um die Zellen in einer Zeile oder einer Spalte zu verbinden, klicken Sie auf den jeweiligen Pfeil und dann im Bearbeitungsmenü auf "Zellen verbinden":
# Wählen Sie bei gedrückter <code>Umschalt</code>-Taste nebeneinanderliegende Zellen in einer Spalte oder Zeile aus.
# Klicken Sie auf Verbinden im offenen Dialogfeld. Die Zellen sind nun verbunden.


[[Datei:ve-tabellen-mergecellsDE.png|300x300px]]
Die verbundenen Zellen können Sie über die gleiche Schaltfläche wieder teilen.
 
Sie können auch einzelne Zellen verbinden. Klicken Sie mit gedrückter Shift-Taste in zwei oder mehrere angrenzende  Zellen. Verbinden Sie dann die Zellen. Die Zellen müssen angrenzend in einer Zeile oder in einer Spalte sein, damit sie verbunden werden können.
 
<span><br /></span>
==Tabelleneigenschaften festlegen==
 
Im Menüpunkt Eigenschaften gibt es zahlreiche Einstellungen, um die Funktionalität und Darstellung der Tabelle anzupassen:


== Tabelleneigenschaften festlegen ==
Im Eigenschaften-Dialgofenster gibt es zahlreiche Funktionen zur Anpassung der Tabelle:
{| class="contenttable-blue" style=""
{| class="contenttable-blue" style=""
!Eigenschaft
|+Übersicht der Tabelleneigenschaften
!Beschreibung
! style="" |Eigenschaft
! style="" |Beschreibung
|-
| style="" | Tabellenbreite
| style="" |Die Gesamtbreite kann hier prozentual zur verfügbaren Seitenbreite eingestellt werden, zum Beispiel auf 100%.
|-
|-
|Überschrift
| style="" |Tabellenstil
|Zeigt eine Überschrift über der Tabelle:
| style="" |Hier können verschiedene Stilvorlagen für die Tabelle geladen werden. Siehe: [[de4:Handbuch:Erweiterung/VisualEditor/Tabellen#Tabellenstile|Galerie der Tabellenstile]].
[[Datei:tabelle-ueberschrift.png|200x200px]]
 
Nach dem Deaktivieren der Überschrift ist sie verloren und muss beim Re-aktivieren neu eingegeben werden.
|-
|-
|Stilisiert (wikitable)
| style="" |Exportierbar
|aktiviert den Standard Wiki-Look, nachdem vorher Tabellenstile ausgewählt waren
| 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:<syntaxhighlight lang="css">
/* 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;
</syntaxhighlight>
|-
|-
|Sortierbar
| style="" |Filterbar
|In der ersten Reihe wird eine Sortierungsfunktion angezeigt:
| style="" |<span>Fügt den Kopfzellen jeder Spalte eine Filterfunktion hinzu.</span>
[[Datei:tabelle-sortieren.png|200x200px]]
 
Die aktuelle Sortierung ist in der Titelzeile ersichtlich. In der sortierten Spalte wird nur einer der beiden Sortierungspfeile angezeigt.
|-
|-
|Einklappbar
| style="" |Sticky header
|Die Tabelle kann auf der Seite über einen Textlink ausgeblendet werden.
| style="" |Die Kopfzeile der Tabelle bleibt bei langen Tabellen beim Scrollen der Seite sichtbar.
|-
|-
|Zunächst eingeklappt
| style="" |Überschrift
|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="" |Zeigt eine Überschrift über der Tabelle:
[[Datei:tabelle-eingeklappt.png|rahmenlos|320x320px]]
Nach dem Deaktivieren der Überschrift ist sie verloren und muss beim Re-aktivieren neu eingegeben werden.
|-
|-
|Exportierbar
| style="" |Sortierbar
|
| style="" |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.
|-
| style="" |Einklappbar
| style="" |Die Tabelle kannüber einen Textlink aus-  und eingeklappt werden.
|-
|-
|Filterbar
| style="" |Zunächst eingeklappt
|Die Filterfunktion wird in der Titelzeile aktiviert und ermöglicht folgende Handlungen:
| 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:
|}


*Tabelle sortieren (aufsteigend oder absteigende Werte der aktiven Spalte)
== Tabellenstile ==
*Tabellenspalten ausblenden
Im Menü Tabellenstil sind folgende Stilvorlagen auswählbar. Klicken Sie auf ein Bild um die Galerie zu starten:
*Spalte filtern (nur Werte aus der aktuellen Spalte werden hier berücksichtigt)


[[Datei:tabelle-filtern.png|550x550px]]
<gallery>
 
Datei:tables-nostyle.png|alt=Tabelle ohne Tabellenlinien|No table style
<span><br /></span>
Datei:ve-tabellen-farbe-standard.PNG|alt=Weiße Kopfzeile mit hellgrauen Inhaltszellen|Standard (wikitable)
 
Datei:ve-tabellen-farbe-content.PNG|alt=Graue Kopfzeile mit weißen Inhaltszellen|Content (contenttable)
{{Box Note|boxtype=note|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.}}
Datei:ve-tabellen-farbe-content black.PNG|alt=Dunkelgraue Kopfzeile und dunkle Zellenrahmen|Content (black) (contenttable-black)
Datei:ve-tabellen-farbe-blue.PNG|alt=Blaue Kopfzeile udn Blaue Zellenrahmen|Content (blue) (contenttable-blue)
Datei:ve-tabellen-farbe-content darkblue.PNG|alt=Dunkelblaue Kopfzeile und blaue Zellenrahmen|Content (darkblue) (contenttable-darkblue)
Datei:ve-tabellen-farbe-cusco sky.PNG|alt=Hellblaue Kopfzeile mit alternierenden Zeilenfarben und dunkelblauem Text|Cusco Sky (cuskosky)
Datei:ve-tabellen-farbe-casablanca.PNG|alt=Dunkelblaue Kopfzeile mit alternierenden Zeilenfarben und dunkelblauem Text|Casablanca (casablanca)
Datei:ve-tabellen-farbe-greyscale.PNG|alt=Weiße Kopfzeile mit dunklen Zellenrahmen und alternierende Reihenfarbe  mit blauem Text|Greyscale (greyscale)
Datei:ve-tabellen-farbe-greyscale narrow.PNG|alt=Dunklegrau Kopfzeile mit alternierende Reihenfarbe und blauem Text|Greyscale (narrow) (greyscale-narrow)
</gallery>


== 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
|-
|-
|Tabellenstil
| style="width:200px;" |11
|Hier können verschiedene Stilvorlagen für die Tabelle geladen werden.
|-
|-
|Volle Tabellenbreite
| style="width:200px;" |5
|Die Tabelle nutzt die volle Breite der Wikiseite, unabhängig vom Tabelleninhalt.
|}
|}
Mögliche Werte sind:


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


<gallery>
== <span>Existierende Tabellen nutzen</span> ==
Datei:ve-tabellen-farbe-standard.PNG|alt=Tabellenfarbe Standard|Standard
Datei:ve-tabellen-farbe-content.PNG|alt=Tabellenfarbe Content|Content
Datei:ve-tabellen-farbe-content_black.PNG|alt=Tabellenfarbe Content Black|Content (black)
Datei:ve-tabellen-farbe-blue.PNG|alt=Tabellenfarbe Content blue|Content (blue)
Datei:ve-tabellen-farbe-content_darkblue.PNG|alt=Tabellenfarbe Content darkblue|Content (darkblue)
Datei:ve-tabellen-farbe-cusco sky.PNG|alt=Tabellenfarbe Cusco Sky|Cusco Sky
Datei:ve-tabellen-farbe-casablanca.PNG|alt=Tabellenfarbe Casablanca|Casablanca
Datei:ve-tabellen-farbe-greyscale.PNG|alt=Tabellenfarbe Greyscale|Greyscale
Datei:ve-tabellen-farbe-greyscale_narrow.PNG|alt=Tabellenfarbe Greyscale narrow|Greyscale (narrow)
</gallery>


<span><br /></span>
Mit dem visuellen Editor ist es leicht, Inhalte als Tabelle zu formatieren.  
==Weitere Hinweise==
<section begin="training-tabellen" /><div class="training anwender">
Mit dem visuellen Editor ist es leicht, Inhalte als Tabelle zu formatieren. Es gibt hierzu folgende Alternativen:


<span><br /></span>
Es gibt hierzu folgende Alternativen:<span><br /></span>
*Tabellen können auch als csv-Datei auf einer Seite eingefügt werden (einfach die CSV-Datei auf die Seite im Bearbeitungsmodus ziehen)
*CSV-Datei (nur Chrome, Edge): 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.
*XLSX-Datei ( nur Firefox): Zellen können markiert und dann mit gedrückter <code>STRG</code>-Taste in das Wiki gezogen werden.
</div><section end="training-tabellen" />


<span /><br />{{Box Links|Thema1=[[Handbuch:Erweiterung/VisualEditor/Tabellen/Beispiele| Beispiele zur Gestaltung von Tabellen]]|Thema2=[[Handbuch:Erweiterung/BlueSpiceFilterableTables|Filterbare Tabellen]]}}
{{Box Links|Thema1=[[Handbuch:Erweiterung/VisualEditor/Tabellen/Beispiele| Beispiele zur Gestaltung von Tabellen]]|Thema2=[[Handbuch:Erweiterung/BlueSpiceFilterableTables|Filterbare Tabellen]]}}


<span><br /></span>


[[de:{{FULLPAGENAME}}]]
[[de:{{FULLPAGENAME}}]]


[[en:Manual:VisualEditor/Tables]]
[[en:Manual:Extension/VisualEditor/Insert tables]]

Aktuelle Version vom 10. April 2026, 13:03 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:

  • CSV-Datei (nur Chrome, Edge): Tabellen können auch als csv-Datei auf einer Seite eingefügt werden (einfach die CSV-Datei auf die Seite im Bearbeitungsmodus ziehen)
  • XLSX-Datei ( nur Firefox): Zellen können markiert und dann mit gedrückter STRG-Taste in das Wiki gezogen werden.

Weiterführende Links