Tables

Here we describe the editing of tables in the wiki code. For fast editing of tables, the WYSIWYG editor is recommended. Nevertheless, in some cases, the classic editing with wiki tags may be necessary.

Functionality

Tables are a very important tool for designing wiki pages. Besides from displaying content in a structured way, tables occasionally are used to design whole pages. The basic structure of the main page or the topic portal page for example are based on a table. However, tables should only be used very carefully to structure entire pages. The source code quickly becomes confusing for outsiders and for the reading devices of the visually impaired, they represent a barrier. Therefore, Wikipedia advises their users quite fundamentally from using tables as a graphical element for entire pages.

MediaWiki has its own syntax for displaying tables. This syntax is similar to common HTML but much simpler.

Nevertheless, the editing of tables remains complex. The use of editors produces HTML code that is a barrier to editing by others.

Simple tables

Input Result Comment
{| 
| Cell 1
| Cell 2
|-
| Cell 3
| Cell 4
|}
Cell 1 Cell 2
Cell 3 Cell 4

This is the syntax for a simple table.

{|
|- 
||Cell 1 ||Cell 2
|- 
||Cell 3 ||Cell 4
|- 
||Cell 5 ||Cell 6
|}
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

To save space it is possible to write several cells in one line of code. In this case the cells have to be separated by ||. A table with tree rows can be created like this.

Notice:
To begin a new row put a hyphen ("-") after the leading pipe symbol ("|"). Repeat as often as needed.

To create a simple table quickly in BlueSpice, use the Button "Insert a Table" Btn-WYSIWYG-Tabelle einfügen.png in any editor view.

More complex tables

A Wikipedia article about this can be found here: [1]

Borders

Input Result Comment
{| border="1"
| Cell 1
| Cell 2
|-
| Cell 3
| Cell 4
|}
Cell 1 Cell 2
Cell 3 Cell 4

The border must be set in the first line of the table (directly after the {|). The frame thickness is specified in pixels: border = "x"

Note: The classic table borders may look a little old-fashioned. Therefore there you can use layout templates for your tables.


Title rows

Input Result Comment
{|
|-
! Last Name
! First Name
|-
| Karstadt
| Liesl
|-
| Valentin
| Karl
|}
Last Name First Name
Karstadt Liesl
Valentin Karl

Title rows are specified with ! instead of |.


Combining cells: rowspanning and rolspanning

Input Result Comment
{|
|-
! A
! B
! C
|-
| Cell 1
| colspan="2" align="center"|Cell 2
|-
| Cell 3
| Cell 4
| Cell 5
|}
A B C
Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

This is a table containing a cell which spans tow columns. The command colspan="2" is entered before the corresponding cell and separated by |. The following command (align="center") is there to center the cell content and is used only to better demonstrate the effect.

{|
|-
! A
! B
|-
| rowspan="2" align="center"|Cell 1
| Cell 2
|-
| Cell 4
|}
A B
Cell 1 Cell 2
Cell 4

A Table containing a cell which spans two rows (rowspan="2").

Note: Empty cells won't get a border automatically. In some browsers you can force a border with a nonbreaking space   inside these cells.


Nested tables

Input Result Comment
{| border="1"
|-
| Cell 1
|
 {| border="1"
 | Cell A
 |-
 | Cell B
 |}
| Cell 3
|}
Cell 1
Cell A
Cell B
Cell 3

A table inside another table. To nest tables simply use an additional opening {| where you want the inner table to be. But make sure there is no pipe symbol at the beginning of that line.


Caption

Input Result Comment
{| 
|+ This is a nice table
|-
| Table
| nice
|-
| Nice
| table
|}
This is a nice table
Table nice
Nice table

It is possible to add a centered caption above the table with |+ my caption at the beginning.


Lists

Input Result Comment
{| 
|-
| Right listing
| Wrong listing
|-
|
* first entry
* second entry

| * first entry
* second entry
|}
Right listing Wrong listing
  • first entry
  • second entry
* first entry
  • second entry

The list entries have to start in a new line. Otherwise an asterix will be rendered instead of a bullet symbol.


Sortable tables

Input Result Comment
{| class="sortable"
|-
! Col 1
! Col 2
! Col 3
|-
| 12346
| € 234,44
| SuSe
|-
| 98765
| € 77,55
| IBM
|}
Col 1 Col 2 Col 3
12346 € 234,44 SuSe
98765 € 77,55 IBM

With class="sortable" you can make a table sortable by the items of its columns.
Just click on the little arrows next to the title cells!

Limitations:
  • To properly sort numbers by their numeric values, they must not contain a thousand separator or units (except the currency symbols $ and €) or other labels. An indication of the units used should therefore be given in the header.
  • For complex tables (i.e., those with non-uniform rows and columns), sorting is not possible.


Column widths

Input Result Comment
{|
|-
! width="10%"|10 %
! width="20%"|20 %
! width="40%"|40 %
|- valign="top"
|A
|B
|C
|}
10 % 20 % 40 %
A B C

Column widths can be specified relative and absolute, with absolute values in pixels only being used when embedding graphics. The width specification is necessary and useful only for one cell of the column.

{|
|-
! width="50"|50
! width="100"|100
! width="200"|200
|- 
|A
|B
|C
|}
50 100 200
A B C


Cell spacing with cellspacing and cellpadding

Input Result Comment
{| cellspacing="9" cellpadding="0" border="1"
|-
| Alpha
| Beta
| Gamma
|-
| Delta
| Epsilon
| Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

With cellspacing the distance between the cells can be determined. The larger the cellspacing value, the wider the bridge between the cells. With cellpadding one determines the distance of the cell contents from the cell frame.

{| cellspacing="0" cellpadding="9" border="1"
|-
| Alpha
| Beta
| Gamma
|-
| Delta
| Epsilon
| Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta


Alignment

Input Result Comment
{| cellspacing="0" border="1"
|-
! width="25%"| 
! width="25%" align="left"|left
! width="25%" align="center"|centered
! width="25%" align="right"|right
|- valign="top"
! height="38"|top
| align="left"|xx
| align="center"|xxx
| align="right"|xx
|- valign="middle"
! height="38"|middle
| align="left"|x
| align="center"|x
| align="right"|x
|- valign="bottom"
! height="38"|bottom
| align="left"|x
| align="center"|x
| align="right"|x
|}
  left centered right
top xx xxx xx
middle x x x
bottom x x x

Just as in HTML, you can align the contents of cells in the table differently. You can assign the attributes to individual cells or entire lines. The valign applies to the entire line, the align only to the respective cell.

Style templates

Input Result Comment
{| {{table1}}
|-
| text in left column
| text in right column
|}
text in left column text in right column

Some users have created templates to simplify formatting. Instead of having to remember the table parameters, a style template can be used. This must be inserted after the {|. The usage allows a consistent table layout, easier error handling, and easy layout customization for all tables.

Attachments

Discussions