Difference between revisions of "Tables"

(Aufzählungszeichen)
m (Text replacement - "[[VisualEditor" to "[[Reference:VisualEditor")
 

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[edit | edit source]

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[edit | edit source]

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 Wiki, use the Button "Insert a Table" Btn-WYSIWYG-Tabelle einfügen.png in any editor view.

More complex tables[edit | edit source]

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

Borders[edit | edit source]

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[edit | edit source]

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 rowspanning and Colspanningrolspanning[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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 asteix asterix will be rendered instead of a bullet symbol.


Sortierbare TabellenSortable tables[edit | edit source]

Spalte Eingabe Ergebnis
Spalte 1 Spalte 2
Input Result Kommentar dazu
File:HilfeTabelle10.jpg
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

Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss With class="sortable" im Tabellenkopf angegeben werden.
Klicken Sie einmal auf das kleine Kästchen im Spaltenkopf!

Einschränkungen:
  • Damit Zahlen nach ihren numerischen Werten korrekt sortiert werden, dürfen sie bislang weder ein Tausendertrennzeichen noch Einheiten (außer den Währungszeichen € und $) oder andere Beschriftungen enthalten. Ein Hinweis auf die verwendeten Einheiten sollte daher in der Kopfzeile angegeben werden.
  • Bei komplexen Tabellen (d. h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.
Spaltenbreiten

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[edit | edit source]

Eingabe Ergebnis File:HilfeTabelle11.jpg
Input Result Kommentar dazu
Comment
                            {|
|-
! width="10%"|10 %
! width="20%"|20 %
! width="40%"|40 %
|- valign="top"
|A
|B
|C
|}
                        
10 % 20 % 40 %
A B C

Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.

File:HilfeTabelle12.jpg

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


Zellenabstände mit cellspacing und Cell spacing with cellspacing and cellpadding[edit | edit source]

Eingabe Ergebnis 350px 350px
Input Result Kommentar dazu
Comment
                            {| cellspacing="9" cellpadding="0" border="1"
|-
| Alpha
| Beta
| Gamma
|-
| Delta
| Epsilon
| Zeta
|}
                        
Alpha Beta Gamma
Delta Epsilon Zeta

Mit cellspacing kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit cellpadding bestimmt man den Abstand des Zellinhaltes vom Zellrahmen.

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


AusrichtungAlignment[edit | edit source]

Oben Eingabe Ergebnis
  Links Zentriert Rechts
Input Result Kommentar dazu
File:HilfeTabelle15.jpg
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
Mitte middle x x x
Unten bottom x x x

Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das valign gilt jeweils für die ganze Zeile, das align nur für die jeweilige Zelle.

Formatvorlagen

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[edit | edit source]

Eingabe Ergebnis Einige Benutzer haben Vorlagen erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem {| einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling sowie einfache Anpassung des Layouts bei allen Tabellen
Input Result Kommentar dazu
File:HilfeTabelle16.jpg
Text linke Spalte Text rechte Spalte
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.

__TOC__
        
        
        
        Here we describe the editing of tables in the wiki code. For fast editing of tables, the [[Reference:VisualEditor|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.
        
        
        
        [https://www.mediawiki.org/wiki/Help:Tables 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==
        
        {| class="contenttable"
        
        |-
        
        ! width="30%"|Input
        
        ! width="35%"|Result
        
        ! width="35%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| 
        
        | Cell 1
        
        | Cell 2
        
        |-
        
        | Cell 3
        
        | Cell 4
        
        |}
        
        
        </pre>
        
        ||
        
        {|
        
        |-
        
        ||Cell 1
        
        ||Cell 2
        
        |-
        
        ||Cell 3
        
        ||Cell 4
        
        |}
        
        ||
        
        This is the syntax for a simple table.
        
        
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
        
        |- 
        
        ||Cell 1 ||Cell 2
        
        |- 
        
        ||Cell 3 ||Cell 4
        
        |- 
        
        ||Cell 5 ||Cell 6
        
        |}
        
        
        </pre>
        
        ||
        
        {| width="150px"
        
        |-
        
        ||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 <nowiki>||</nowiki>. A table with tree rows can be created like this.
        
        
        
        |- valign="top"
        
        | colspan="3"|
        
        '''Notice:<br />'''To begin a new row put a hyphen ("-") after the leading pipe symbol ("|"). Repeat as often as needed.
        
        
        
        |-
        
        | colspan="3"|
        
        To create a simple table quickly in {{SITENAME}}, use the Button "Insert a Table" [[File:Btn-WYSIWYG-Tabelle_einfügen.png]] in any editor view.
        
        
        
        |}
        
        
        
        ==More complex tables==
        
        A Wikipedia article about this can be found here: [https://en.wikipedia.org/wiki/Help:Table]
        
        
        
        ===Borders===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| border="1"
        
        | Cell 1
        
        | Cell 2
        
        |-
        
        | Cell 3
        
        | Cell 4
        
        |}
        
        
        </pre>
        
        | width="150px"|
        
        {| border="1"
        
        |-
        
        ||Cell 1
        
        ||Cell 2
        
        |-
        
        ||Cell 3
        
        ||Cell 4
        
        |}
        
        ||
        
        The border must be set in the first line of the table (directly after the <code>{|</code>). The frame thickness is specified in pixels: '''border = "x"'''
        
        
        
        |- valign="top"
        
        | colspan="3"|'''Note:''' The classic table borders may look a little old-fashioned. Therefore there you can use layout [[Templates|templates]] for your tables.
        
        
        
        |}
        
        
        
        
        
        ===Title rows===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
        
        |-
        
        ! Last Name
        
        ! First Name
        
        |-
        
        | Karstadt
        
        | Liesl
        
        |-
        
        | Valentin
        
        | Karl
        
        |}
        
        
        </pre>
        
        ||
        
        {|
        
        |-
        
        !|Last Name
        
        !|First Name
        
        |-
        
        ||Karstadt
        
        ||Liesl
        
        |-
        
        ||Valentin
        
        ||Karl
        
        |}
        
        ||
        
        Title rows are specified with <code>!</code> instead of <code>|</code>.
        
        
        
        |}
        
        
        
        
        
        ===Combining cells: Rowspanningrowspanning and Colspanningrolspanning===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
        
        |-
        
        ! A
        
        ! B
        
        ! C
        
        |-
        
        | Cell 1
        
        | colspan="2" align="center"|Cell 2
        
        |-
        
        | Cell 3
        
        | Cell 4
        
        | Cell 5
        
        |}
        
        
        </pre>
        
        ||
        
        {|
        
        |-
        
        !|A
        
        !|B
        
        !|C
        
        |-
        
        ||Cell 1
        
        | colspan="2" align="center"|Cell 2
        
        |-
        
        ||Cell 3
        
        ||Cell 4
        
        ||Cell 5
        
        |}
        
        ||
        
        This is a table containing a cell which spans tow columns. The command <code>colspan="2"</code> is entered before the corresponding cell and separated by <code>|</code>. The following command (<code>align="center"</code>) is there to center the cell content and is used only to better demonstrate the effect.
        
        
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
        
        |-
        
        ! A
        
        ! B
        
        |-
        
        | rowspan="2" align="center"|Cell 1
        
        | Cell 2
        
        |-
        
        | Cell 4
        
        |}
        
        
        </pre>
        
        ||
        
        {|
        
        |-
        
        !|A
        
        !|B
        
        |-
        
        | rowspan="2" align="center"|Cell 1
        
        ||Cell 2
        
        |-
        
        ||Cell 4
        
        |}
        
        ||
        
        A Table containing a cell which spans two rows (<code>rowspan="2"</code>).
        
        
        
        |- valign="top"
        
        | colspan="3"|'''Note:''' Empty cells won't get a border automatically. In some browsers you can force a border with a nonbreaking space '''&amp;nbsp;''' inside these cells.
        
        |}
        
        
        
        
        
        ===Nested tables===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| border="1"
        
        |-
        
        | Cell 1
        
        |
        
         {| border="1"
        
         | Cell A
        
         |-
        
         | Cell B
        
         |}
        
        | Cell 3
        
        |}</pre>
        
        | width="150px"|
        
        {| border="1"
        
        |-
        
        ||Cell 1
        
        ||
        
         {| border="1"
        
         | Cell A
        
         |-
        
         | Cell B
        
         |}
        
        ||Cell 3
        
        |}
        
        ||
        
        A table inside another table. To nest tables simply use an additional opening <code>{|</code> where you want the inner table to be. But make sure there is '''no pipe symbol at the beginning of that line'''.
        
        
        
        |}
        
        
        
        
        
        ===Caption===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
        
        
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| 
        
        |+ This is a nice table
        
        |-
        
        | Table
        
        | nice
        
        |-
        
        | Nice
        
        | table
        
        |}
        
        
        </pre>
        
        | width="150px"|
        
        {|
        
        |+This is a nice table
        
        |-
        
        ||Table
        
        ||nice
        
        |-
        
        ||Nice
        
        ||table
        
        |}
        
        ||
        
        It is possible to add a centered caption above the table with <code>|+ my caption</code> at the beginning.
        
        
        
        |}
        
        
        
        
        
        ===Lists===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="40%"|Input
        
        ! width="30%"|Result
        
        ! width="30%"|Comment
        
        |- valign="top"
        
        ||
            
            
        <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| 
        
        |-
        
        | Right listing
        
        | Wrong listing
        
        |-
        
        |
        
        * first entry
        
        * second entry
        
        
        
        | * first entry
        
        * second entry
        
        |}</pre>
        
        | width="150px"|
        
        {|
        
        |-
        
        ||Right listing
        
        ||Wrong listing
        
        |-
        
        ||
        
        * first entry
        
        * second entry
        
        
        
        ||* first entry
        
        * second entry
        
        
        
        |}
        
        ||
        
        The list entries have to start in a new line. Otherwise an asteixasterix will be rendered instead of a bullet symbol.
        
        
        |}
            
            
            
            ===Sortierbare Tabellen
            
            |}
            
            
            
            
            
            ===Sortable tables===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="50%"|Eingabe40%"|Input
        
        ! width="25%"|Ergebnis30%"|Result
        
        ! width="25%"|Kommentar dazu
            
            |- valign="top"
            
            ||[[File:HilfeTabelle10.jpg]]
            
            ||
            
            {| class="sortable"
            
            |-
            
            !|Spalte 1
            
            !|Spalte 2
            
            !|Spalte 3
            
            |-
            
            | width="100px"|12346
            
            | width="100px"|€ 234,44
            
            | width="100px"30%"|Comment
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| class="sortable"
            
            |-
            
            ! Col 1
            
            ! Col 2
            
            ! Col 3
            
            |-
            
            | 12346
            
            | € 234,44
            
            | SuSe
            
            |-
            
            | 98765
            
            | € 77,55
            
            | IBM
            
            |}</pre>
            
            ||
            
            {| class="sortable"
            
            |-
            
            !|Col 1
            
            !|Col 2
            
            !|Col 3
            
            |-
            
            ||12346
            
            ||€ 234,44
            
            ||SuSe
        
        |-
        
        ||98765
        
        ||€ 77,55
        
        ||IBM
        
        |}
        
        ||
        
        
        Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss <tt>class="sortable"</tt> im Tabellenkopf angegeben werden.<br />
            
            Klicken Sie einmal auf das kleine Kästchen im Spaltenkopf!
            
            
            
            |-
            
            | colspan="3"|'''Einschränkungen:'''
            
            * Damit Zahlen nach ihren numerischen Werten korrekt sortiert werden, dürfen sie bislang weder ein Tausendertrennzeichen noch Einheiten (außer den Währungszeichen € und $) oder andere Beschriftungen enthalten. Ein Hinweis auf die verwendeten Einheiten sollte daher in der Kopfzeile angegeben werden.
            
            * Bei komplexen Tabellen (d.&nbsp;h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.
            
            
            
            |}
            
            
            
            
            
            ===SpaltenbreitenWith <code>class="sortable"</code> you can make a table sortable by the items of its columns.<br />
            
            Just click on the little arrows next to the title cells!
            
            
            
            |-
            
            | colspan="3"|'''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===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="50%"|Eingabe40%"|Input
        
        ! width="25%"|Ergebnis30%"|Result
        
        ! width="25%"|Kommentar dazu
            
            |- valign="top"
            
            ||[[File:HilfeTabelle11.jpg]]
            
            ||
            
            
        30%"|Comment
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
            
            |-
            
            ! width="10%"|10&nbsp;%
            
            ! width="20%"|20&nbsp;%
            
            ! width="40%"|40&nbsp;%
            
            |- valign="top"
            
            |A
            
            |B
            
            |C
            
            |}</pre>
            
            ||
            
            
        {|
        
        |-
        
        ! width="10%"|10&nbsp;%
        
        ! width="20%"|20&nbsp;%
        
        ! width="40%"|40&nbsp;%
        
        |- valign="top"
        
        ||A
        
        ||B
        
        ||C
        
        |}
        
        | rowspan="2"|
            
            Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
            
            
            
            |- valign="top"
            
            ||[[File:HilfeTabelle12.jpg]]
            
            ||
            
            
        |
            
            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.
            
            
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
        
        |-
        
        ! width="50"|50
        
        ! width="100"|100
        
        ! width="200"|200
        
        |- valign="top"
            
            ||A
            
            ||B
            
            ||C
            
            |}
            
            |}
            
            
            
            
            
            ===Zellenabstände mit ''cellspacing'' und ''cellpadding''
            
            |A
            
            |B
            
            |C
            
            |}</pre>
            
            ||
            
            {|
            
            |-
            
            ! width="50"|50
            
            ! width="100"|100
            
            ! width="200"|200
            
            |-
            
            ||A
            
            ||B
            
            ||C
            
            |}
            
            |}
            
            
            
            
            
            ===Cell spacing with cellspacing and cellpadding===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="50%"|Eingabe40%"|Input
        
        ! width="25%"|Ergebnis30%"|Result
        
        ! width="25%"|Kommentar dazu
            
            |- valign="top"
            
            ||[[File:HilfeTabelle13.jpg|350px]]
            
            ||
            
            
        30%"|Comment
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| cellspacing="9" cellpadding="0" border="1"
            
            |-
            
            | Alpha
            
            | Beta
            
            | Gamma
            
            |-
            
            | Delta
            
            | Epsilon
            
            | Zeta
            
            |}</pre>
            
            ||
            
            
        {| cellspacing="9" cellpadding="0" border="1"
        
        |-
        
        ||Alpha
        
        ||Beta
        
        ||Gamma
        
        |-
        
        ||Delta
        
        ||Epsilon
        
        ||Zeta
        
        |}
        
        | rowspan="2"|
        
        
        MitWith ''cellspacing'' kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit ''cellpadding'' bestimmt man den Abstand des Zellinhaltes vom Zellrahmen.
            
            
            
            |- valign="top"
            
            ||[[File:HilfeTabelle14.jpg|350px]]
            
            ||
            
            
        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.
            
            
            
            |-
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| cellspacing="0" cellpadding="9" border="1"
            
            |-
            
            | Alpha
            
            | Beta
            
            | Gamma
            
            |-
            
            | Delta
            
            | Epsilon
            
            | Zeta
            
            |}</pre>
            
            ||
            
            
        {| cellspacing="0" cellpadding="9" border="1"
        
        |-
        
        ||Alpha
        
        ||Beta
        
        ||Gamma
        
        |-
        
        ||Delta
        
        ||Epsilon
        
        ||Zeta
        
        |}
        
        |}
            
            
            
            
            
            ===Ausrichtung|
            
            |}
            
            
            
            
            
            ===Alignment===
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="50%"|Eingabe40%"|Input
        
        ! width="25%"|Ergebnis
            
            ! width="25%"|Kommentar dazu
            
            |- valign="top"
            
            ||[[File:HilfeTabelle15.jpg]]
            
            ||
            
            
        30%"|Result
            
            ! width="30%"|Comment
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| 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
            
            |}</pre>
            
            ||
            
            
        {| cellspacing="0" border="1"
        
        |-
        
        !| 
            
            ! align="left"|Links
            
            ! align="center"|Zentriert
            
            ! align="right"|Rechts width="25%"| 
            
            ! width="25%" align="left"|left
            
            ! width="25%" align="center"|centered
            
            ! width="25%" align="right"|right
        
        |- valign="top"
        
        ! height="38"|Obentop
        
        | align="left"|xx
        
        | align="center"|xxx
        
        | align="right"|xx
        
        |- valign="middle"
        
        ! height="38"|Mittemiddle
        
        | align="left"|x
        
        | align="center"|x
        
        | align="right"|x
        
        |- valign="bottom"
        
        ! height="38"|Untenbottom
        
        | align="left"|x
        
        | align="center"|x
        
        | align="right"|x
        
        |}
        
        ||
        
        
        Genau wieJust as in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das '''valign''' gilt jeweils für die ganze Zeile, das '''align''' nur für die jeweilige Zelle.
            
            
            
            |}
            
            
            
            ==Formatvorlagen, 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==
        
        {| class="contenttable" width="100%"
        
        |-
        
        ! width="50%"|Eingabe30%"|Input
        
        ! width="25%"|Ergebnis35%"|Result
        
        ! width="25%"|Kommentar dazu
            
            |- valign="top"
            
            ||[[File:HilfeTabelle16.jpg]]
            
            ||
            
            {|
            
            |-
            
            ||Text linke Spalte
            
            ||Text rechte Spalte
            
            |}
            
            ||
            
            Einige Benutzer haben [[Vorlagen]] erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem <code>{|</code> einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling sowie einfache Anpassung des Layouts bei allen Tabellen.
            
            
            
            |}
            
            
            
            [[en:{{    35%"|Comment
            
            |- valign="top"
            
            ||
            
            
            <pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| {{table1}}
            
            |-
            
            | text in left column
            
            | text in right column
            
            |}</pre>
            
            ||
            
            {|
            
            |-
            
            ||text in left column
            
            ||text in right column
            
            |}
            
            ||
            
            Some users have created [[Templates | templates]] to simplify formatting. Instead of having to remember the table parameters, a style template can be used. This must be inserted after the <code>{|</code>. The usage allows a consistent table layout, easier error handling, and easy layout customization for all tables.
            
            |}
            
            
            
            
            
            [[en:{{   FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]]
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__TOC__
 
__TOC__
  
Here we describe the editing of tables in the wiki code. For fast editing of tables, the [[VisualEditor|WYSIWYG editor]] is recommended. Nevertheless, in some cases, the classic editing with wiki tags may be necessary.
+
Here we describe the editing of tables in the wiki code. For fast editing of tables, the [[Reference:VisualEditor|WYSIWYG editor]] is recommended. Nevertheless, in some cases, the classic editing with wiki tags may be necessary.
  
 
==Functionality==
 
==Functionality==
Line 149: Line 149:
  
  
===Combining cells: Rowspanning and Colspanning===
+
===Combining cells: rowspanning and rolspanning===
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
Line 298: Line 298:
 
! width="30%"|Comment
 
! width="30%"|Comment
 
|- valign="top"
 
|- valign="top"
||<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|  
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|  
 
|-
 
|-
 
| Right listing
 
| Right listing
Line 325: Line 326:
 
|}
 
|}
 
||
 
||
The list entries have to start in a new line. Otherwise an asteix will be rendered instead of a bullet symbol.
+
The list entries have to start in a new line. Otherwise an asterix will be rendered instead of a bullet symbol.
 +
 
 
|}
 
|}
  
===Sortierbare Tabellen===
+
 
 +
===Sortable tables===
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
! width="50%"|Eingabe
+
! width="40%"|Input
! width="25%"|Ergebnis
+
! width="30%"|Result
! width="25%"|Kommentar dazu
+
! width="30%"|Comment
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle10.jpg]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| class="sortable"
 +
|-
 +
! Col 1
 +
! Col 2
 +
! Col 3
 +
|-
 +
| 12346
 +
| € 234,44
 +
| SuSe
 +
|-
 +
| 98765
 +
| € 77,55
 +
| IBM
 +
|}</pre>
 
||
 
||
 
{| class="sortable"
 
{| class="sortable"
 
|-
 
|-
!|Spalte 1
+
!|Col 1
!|Spalte 2
+
!|Col 2
!|Spalte 3
+
!|Col 3
 
|-
 
|-
| width="100px"|12346
+
||12346
| width="100px"|€ 234,44
+
||€ 234,44
| width="100px"|SuSe
+
||SuSe
 
|-
 
|-
 
||98765
 
||98765
Line 352: Line 369:
 
|}
 
|}
 
||
 
||
Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss <tt>class="sortable"</tt> im Tabellenkopf angegeben werden.<br />
+
With <code>class="sortable"</code> you can make a table sortable by the items of its columns.<br />
Klicken Sie einmal auf das kleine Kästchen im Spaltenkopf!
+
Just click on the little arrows next to the title cells!
  
 
|-
 
|-
| colspan="3"|'''Einschränkungen:'''
+
| colspan="3"|'''Limitations:'''
* Damit Zahlen nach ihren numerischen Werten korrekt sortiert werden, dürfen sie bislang weder ein Tausendertrennzeichen noch Einheiten (außer den Währungszeichen und $) oder andere Beschriftungen enthalten. Ein Hinweis auf die verwendeten Einheiten sollte daher in der Kopfzeile angegeben werden.
+
* 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.
* Bei komplexen Tabellen (d.&nbsp;h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.
+
* For complex tables (i.e., those with non-uniform rows and columns), sorting is not possible.
  
 
|}
 
|}
  
  
===Spaltenbreiten===
+
===Column widths===
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
! width="50%"|Eingabe
+
! width="40%"|Input
! width="25%"|Ergebnis
+
! width="30%"|Result
! width="25%"|Kommentar dazu
+
! width="30%"|Comment
 +
|- valign="top"
 +
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
 +
|-
 +
! width="10%"|10&nbsp;%
 +
! width="20%"|20&nbsp;%
 +
! width="40%"|40&nbsp;%
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle11.jpg]]
+
|A
 +
|B
 +
|C
 +
|}</pre>
 
||
 
||
 
{|
 
{|
Line 382: Line 409:
 
||C
 
||C
 
|}
 
|}
| rowspan="2"|
+
||
Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.
+
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.
  
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle12.jpg]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{|
 +
|-
 +
! width="50"|50
 +
! width="100"|100
 +
! width="200"|200
 +
|-
 +
|A
 +
|B
 +
|C
 +
|}</pre>
 
||
 
||
 
{|
 
{|
Line 393: Line 430:
 
! width="100"|100
 
! width="100"|100
 
! width="200"|200
 
! width="200"|200
|- valign="top"
+
|-
 
||A
 
||A
 
||B
 
||B
Line 401: Line 438:
  
  
===Zellenabstände mit ''cellspacing'' und ''cellpadding''===
+
===Cell spacing with cellspacing and cellpadding===
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
! width="50%"|Eingabe
+
! width="40%"|Input
! width="25%"|Ergebnis
+
! width="30%"|Result
! width="25%"|Kommentar dazu
+
! width="30%"|Comment
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle13.jpg|350px]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| cellspacing="9" cellpadding="0" border="1"
 +
|-
 +
| Alpha
 +
| Beta
 +
| Gamma
 +
|-
 +
| Delta
 +
| Epsilon
 +
| Zeta
 +
|}</pre>
 
||
 
||
 
{| cellspacing="9" cellpadding="0" border="1"
 
{| cellspacing="9" cellpadding="0" border="1"
Line 421: Line 468:
 
|}
 
|}
 
| rowspan="2"|
 
| rowspan="2"|
Mit ''cellspacing'' kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit ''cellpadding'' bestimmt man den Abstand des Zellinhaltes vom Zellrahmen.
+
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.
  
|- valign="top"
+
|-
||[[File:HilfeTabelle14.jpg|350px]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| cellspacing="0" cellpadding="9" border="1"
 +
|-
 +
| Alpha
 +
| Beta
 +
| Gamma
 +
|-
 +
| Delta
 +
| Epsilon
 +
| Zeta
 +
|}</pre>
 
||
 
||
 
{| cellspacing="0" cellpadding="9" border="1"
 
{| cellspacing="0" cellpadding="9" border="1"
Line 436: Line 493:
 
||Zeta
 
||Zeta
 
|}
 
|}
 +
||
 
|}
 
|}
  
  
===Ausrichtung===
+
===Alignment===
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
! width="50%"|Eingabe
+
! width="40%"|Input
! width="25%"|Ergebnis
+
! width="30%"|Result
! width="25%"|Kommentar dazu
+
! width="30%"|Comment
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle15.jpg]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| 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
 +
|}</pre>
 
||
 
||
 
{| cellspacing="0" border="1"
 
{| cellspacing="0" border="1"
 
|-
 
|-
!| 
+
! width="25%"
! align="left"|Links
+
! width="25%" align="left"|left
! align="center"|Zentriert
+
! width="25%" align="center"|centered
! align="right"|Rechts
+
! width="25%" align="right"|right
 
|- valign="top"
 
|- valign="top"
! height="38"|Oben
+
! height="38"|top
 
| align="left"|xx
 
| align="left"|xx
 
| align="center"|xxx
 
| align="center"|xxx
 
| align="right"|xx
 
| align="right"|xx
 
|- valign="middle"
 
|- valign="middle"
! height="38"|Mitte
+
! height="38"|middle
 
| align="left"|x
 
| align="left"|x
 
| align="center"|x
 
| align="center"|x
 
| align="right"|x
 
| align="right"|x
 
|- valign="bottom"
 
|- valign="bottom"
! height="38"|Unten
+
! height="38"|bottom
 
| align="left"|x
 
| align="left"|x
 
| align="center"|x
 
| align="center"|x
Line 471: Line 551:
 
|}
 
|}
 
||
 
||
Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Das '''valign''' gilt jeweils für die ganze Zeile, das '''align''' nur für die jeweilige Zelle.
+
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.
 
 
 
|}
 
|}
  
==Formatvorlagen==
+
==Style templates==
 
{| class="contenttable" width="100%"
 
{| class="contenttable" width="100%"
 
|-
 
|-
! width="50%"|Eingabe
+
! width="30%"|Input
! width="25%"|Ergebnis
+
! width="35%"|Result
! width="25%"|Kommentar dazu
+
! width="35%"|Comment
 
|- valign="top"
 
|- valign="top"
||[[File:HilfeTabelle16.jpg]]
+
||
 +
<pre class="rahmenfarbe4" style="border-style: solid; margin: 1em; padding: 5px;">{| {{table1}}
 +
|-
 +
| text in left column
 +
| text in right column
 +
|}</pre>
 
||
 
||
 
{|
 
{|
 
|-
 
|-
||Text linke Spalte
+
||text in left column
||Text rechte Spalte
+
||text in right column
 
|}
 
|}
 
||
 
||
Einige Benutzer haben [[Vorlagen]] erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem <code>{|</code> einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling sowie einfache Anpassung des Layouts bei allen Tabellen.
+
Some users have created [[Templates | templates]] to simplify formatting. Instead of having to remember the table parameters, a style template can be used. This must be inserted after the <code>{|</code>. The usage allows a consistent table layout, easier error handling, and easy layout customization for all tables.
 +
|}
  
|}
 
  
[[en:{{   FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]]
+
[[en:{{   FULLPAGENAME }}|en:{{FULLPAGENAME}}]][[de:Tabellen]]

Attachments

Discussions