VisualWikitext
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<bookshelf src="Book:User manual" />
{{DISPLAYTITLE:Insert tables}}
{{DISPLAYTITLE:Insert tables}}


==Insert a table==
==Insert a table==
In VisualEditor, choose "Insert > Tables" to insert a table in a page:
In VisualEditor, choose "Insert > Tables" to insert a table in a page:
 
[[File:Instert,_Table.png|alt=expanded "Insert" menu of the editor toolbar|center|300x300px|the menu item "Table"]]
[[File:Instert, Table.png|260x260px]]


After entering the rows and columns, an empty table appears with the edit menu:
After entering the rows and columns, an empty table appears with the edit menu:
 
[[File:table_1.0.png|alt=an empty table with 6 columns and 5 rows with an open inspector menu|center|350x350px|inserted table with table inspector menu]]
[[File:table 1.0.png|305x305px]]


When the mouse rests on a symbol, the respective function is displayed.
When the mouse rests on a symbol, the respective function is displayed.


Double-click in the cells to insert text:
Double-click in the cells to insert text:
 
[[File:weekly.png|alt=table with four columns wor Times and days of the week with a time schedule|center|350x350px|table in edit mode]]
[[File:weekly.png|280x280px]]
==Merge rows and columns==
==Merge rows and columns==
When you click in a row, an arrow appears at the left edge of the row and at the top of the column. To connect the cells in a row or a column, click on the respective arrow and then in the edit menu on "Merge":
To merge a row or column, select the cells in a row or in a column. The inspector will show a "Merge" button. Click it to merge the cells. The same button is called "Unmerge" if you want to separate connected cells.
 
[[File:table_3.0.png|alt=Table with all cells in a table row selected and the merge button|center|thumb|350x350px|Merging cells]]
[[File:table 3.0.png|300x300px]]


You can also connect individual cells. Hold down the Shift key and click in two or more adjacent cells. Then connect the cells. The cells must be adjacent in a row or in a column so that they can be connected.
<br />
<span /><br />
==Table properties==
==Table properties==
In the menu item Properties, there are numerous settings to adjust the functionality and presentation of the table:
In the menu item Properties, there are numerous settings to adjust the functionality and presentation of the table:
Line 59: Line 55:
*Hide table columns
*Hide table columns
*Filter column (only values from the current column are considered here)
*Filter column (only values from the current column are considered here)
 
[[File:table_4.0.png|alt=header cells of a filterable table with an expanded filter menu|center|thumb|550x550px|filterable table]]
[[File:table 4.0.png|550x550px]]


<span><br /></span>
<span><br /></span>
Line 78: Line 73:


<span /><br /><gallery>
<span /><br /><gallery>
File:tables-no style.png|No table style
File:Gallery 1.0.png|Standard
File:Gallery 1.0.png|Standard
File:Gallery 2.0.png|Content  
File:Gallery 2.0.png|Content
File:Gallery 3.0.png|Content (black)
File:Gallery 3.0.png|Content (black)
File:Gallery 4.0.png|Content (blue)  
File:Gallery 4.0.png|Content (blue)
File:Gallery 5.0.png|Content (darkblue)  
File:Gallery 5.0.png|Content (darkblue)
File:Gallery 6.0.png|Cusco Sky  
File:Gallery 6.0.png|Cusco Sky
File:Gallery 7.0.png|Casablanca  
File:Gallery 7.0.png|Casablanca
File:Gallery 8.0.png|Greyscale  
File:Gallery 8.0.png|Greyscale
File:Gallery 9.0.png|Greyscale (narrow)  
File:Gallery 9.0.png|Greyscale (narrow)
</gallery>
</gallery>


<span><br /></span>
<span><br /></span>
<section begin="training-tabellen" /><div class="training anwender">
<section begin="training-tabellen" />
The visual editor makes it easy to format content as a table. The following alternatives for creating tables exist:
 
=== Sticky header ===
It is possible to add the css-class ''mw-sticky-header'' in source edit mode to achieve a table header that stays visible during page scrolling. It works with all table styles.


The below example sets a sticky header for the default table style ''wikitable'':<syntaxhighlight lang="text">
{| class="wikitable mw-sticky-header"
</syntaxhighlight><div class="training anwender">
== Using existing tables ==
* Tables can also be inserted as a csv file on a page (just drag the CSV file onto the page in edit mode)
* Tables can also be inserted as a csv file on a page (just drag the CSV file onto the page in edit mode)
* Complex tables can alternatively be attached to the page as an xlsx file.
* Complex tables can alternatively be attached to the page as an xlsx file.
Line 100: Line 102:
<span><br /></span>
<span><br /></span>
[[en:{{FULLPAGENAME}}]]
[[en:{{FULLPAGENAME}}]]
[[de:VisualEditor/Tabellen]]
[[de:Handbuch:Erweiterung/VisualEditor/Tabellen]]

Latest revision as of 16:14, 1 July 2024


Insert a table

In VisualEditor, choose "Insert > Tables" to insert a table in a page:

expanded "Insert" menu of the editor toolbar

After entering the rows and columns, an empty table appears with the edit menu:

an empty table with 6 columns and 5 rows with an open inspector menu

When the mouse rests on a symbol, the respective function is displayed.

Double-click in the cells to insert text:

table with four columns wor Times and days of the week with a time schedule

Merge rows and columns

To merge a row or column, select the cells in a row or in a column. The inspector will show a "Merge" button. Click it to merge the cells. The same button is called "Unmerge" if you want to separate connected cells.

Table with all cells in a table row selected and the merge button
Merging cells


Table properties

In the menu item Properties, there are numerous settings to adjust the functionality and presentation of the table:

Property Description
Caption Shows a header above the table:

weeklyplan.png

After disabling the header, it is lost and must be reentered when re-enabled.

Styed(wikitable) enables the default wiki look after table styles were previously selected
Sortable In the first row, a sort function is displayed:

Weeklyplan 2.0.png

The current sorting is shown in the title bar. Only one of the two sort arrows will appear in the sorted column.

Collapsible The table can be hidden on the page via a text link.
Collapsed initially If the "Collapsible" property is active, this determines whether the table is visible or hidden when the wiki page is loaded. T
Exportable
Filterable The filter function is activated in the title bar and allows the following actions:
  • Sort table (ascending or descending values of the active column)
  • Hide table columns
  • Filter column (only values from the current column are considered here)
header cells of a filterable table with an expanded filter menu
filterable table


 If the filter is activated, the table styles are ignored and the table is displayed in "Filter Style". After deactivating this function, the selected table style is displayed again.

Table style Here you can load different style sheets for the table.
Use full width for table The table uses the full width of the wiki page, regardless of the table contents.

Table styles


 The following style sheets can be selected in the Table Style menu. Click on a picture to start the gallery:


  • No table style

    No table style

  • Standard

    Standard

  • Content

    Content

  • Content (black)

    Content (black)

  • Content (blue)

    Content (blue)

  • Content (darkblue)

    Content (darkblue)

  • Cusco Sky

    Cusco Sky

  • Casablanca

    Casablanca

  • Greyscale

    Greyscale

  • Greyscale (narrow)

    Greyscale (narrow)


Sticky header

It is possible to add the css-class mw-sticky-header in source edit mode to achieve a table header that stays visible during page scrolling. It works with all table styles.

The below example sets a sticky header for the default table style wikitable:
{| class="wikitable mw-sticky-header"

Using existing tables

  • Tables can also be inserted as a csv file on a page (just drag the CSV file onto the page in edit mode)
  • Complex tables can alternatively be attached to the page as an xlsx file.

Related info



To submit feedback about this documentation, visit our community forum.

Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Manual:Extension/VisualEditor/Insert_tables&oldid=9341"