Help:Table

From BrWiki

This article or section needs to be cleaned up to a higher standard of quality. This may include editing to correct spelling and grammar, rewriting sections to ensure they are clear and concise, and wikifying.

MediaWiki supports different types of table syntax:

1. XHTML
2. HTML and wiki <td> syntax
3. pipe-syntax

All three are supported by MediaWiki and create valid HTML output.

See also HTML element#Tables. Note however that the thead, tbody, tfoot, and colgroup elements are currently not supported in MediaWiki.

[edit] Overview

{| params 
|}

| cell1
| cell2

<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>

<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>

{| 
| 1 || 2
|- 
| 3 || 4
|}

<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>

<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>

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

[edit] Guide to the pipe syntax

The pipe syntax, developed by Magnus Manske, substitutes pipes (|) for HTML. There is an on-line script which converts html tables to pipe syntax tables.

The pipes must start at the beginning of a new line, except when separating parameters from content or when using || to separate cells on a single line. The parameters are optional.

[edit] Tables

A table is defined by {| ''params'' |} which equals <table ''params''>Insert non-formatted text here </table>

Careful: You must include the space between {| and params, or the first parameter gets ignored.

[edit] Rows

<tr> tags will be generated automatically for the first row. To start a new row, use

|-

which results in

<tr>

Parameters can be added like this:

|- params

which results in

<tr params>

Note:

• <tr> tags will be automatically opened at the first <td> equivalent
• <tr> tags will be automatically closed at <tr> and </table> equivalents

[edit] Cells

Cells are generated either like this:

|cell1
|cell2
|cell3

or like this:

|cell1||cell2||cell3

which both equal

<td>cell1</td><td>cell2</td><td>cell3</td>

so "||" equals "newline" + "|"

Parameters in cells can be used like this:

|params|cell1||params|cell2||params|cell3

which will result in

<td params>

[edit] Headers

Functions the same way as TD, except "!" is used instead of the opening "|". "!!" can be used instead of "||". Parameters still use "|", though! Example:

!params|cell1

[edit] Captions

A <caption> tag is created by

|+ Caption

which generates

<caption>Caption</caption>

You can also use parameters:

|+ params|Caption

which will generate

<caption params>Caption

[edit] Some examples

[edit] Multiplication table

Source code

{| border="1" cellpadding="2"
|+Multiplication table
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Appearance

Multiplication table

×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

[edit] Notes

• The entire table begins with {| and ends with the required |}.
• A caption is a succinct way to describe your table, and can be included with |+ on the line after {|.
• Table rows are horizontal groups of cells in the table. A row begins with |- and ends at the next row.
• Table headings are cells with headings in them, and are often rendered in a bold font. They begin with !. Note that parameters are still separated from the actual content of the cell with |, however
• Table data cells fill out the rest of the table. A cell begins with | or || and ends at the next cell.

Each row must have the same number of cells as the other rows, so that the number of columns in the table remains consistent (unless there are cells which span several columns or rows, but this is not discussed here). For empty cells, use the non-breaking space   as content to ensure that the cells are displayed.

[edit] Mélange

Here's a more advanced example, showing some more options available for making up tables. You can play with these settings in your own table to see what effect they have. Not all of these techniques may be appropriate in all cases; just because you can add colored backgrounds, for example, doesn't mean it's always a good idea. Try to keep the markup in your tables relatively simple -- remember, other people are going to be editing the article too! This example should give you an idea of what is possible, though.

Source code

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''An example table'''
|-
! style="background:#efefef;" | First header
! colspan="2" style="background:#ffdead;" | Second header
|-
| upper left
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | lower left
| style="border-bottom:3px solid grey;" | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
| align="center" width="150px" | [[Image:Dnd.gif]]
| align="center" width="150px" | [[Image:Dnd.gif]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" |
Two D&D logos
|}
|}

Appearance

An example table

First header	Second header
upper left		right side
lower left	lower middle
A table in a table Two D&D logos

[edit] Simple example

 
{| 
| Cell 1, row 1 
| Cell 2, row 1 
|- 
| Cell 1, row 2 
| Cell 2, row 2 
|}

generates

[edit] Advanced example

{| align=right border=1
| Cell 1, row 1 
|rowspan=2| Cell 2, row 1 (and 2) 
| Cell 3, row 1 
|- 
| Cell 1, row 2 
| Cell 3, row 2 
|}

Note the floating table to the right.

[edit] Nested table

{| border=1
| α
|
{| bgcolor=#ABCDEF border=2
|nested
|-
|table
|}
|the original table again
|}

gives a nested table

Nested tables have to start on a new line.

[edit] Text next to a table

You can use various codes to float the table to the left or the right of text. Traditional HTML uses align=left or align=right. You can also use style="float: left;" or style="float:right;". However, be careful when using this in tandem with preformatted text. It may overlap the table because it does not wrap.

An example of what not to do:

Multiplication table

×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit pede, imperdiet id, pellentesque ut, aliquam sed, nunc. Duis condimentum bibendum felis. Aliquam sed leo. Nunc volutpat volutpat massa. Curabitur luctus mauris eget urna. Donec dictum. Fusce a turpis. Nullam sodales fringilla neque. Aenean nibh. Donec viverra purus et est. Integer at enim molestie nulla fringilla imperdiet. Nam dictum rutrum eros. Sed ut diam. Etiam et elit. Praesent ut tellus. Nullam vel sem.

Sed luctus arcu nec nulla. Sed dictum rhoncus leo. Praesent fringilla, nunc ut hendrerit tempus, nibh sem venenatis sapien, vitae tempor lorem turpis eu justo. Vestibulum a nibh. Sed interdum. Suspendisse potenti. Fusce a nibh. Aenean sed urna nec tellus porta hendrerit. Vestibulum felis velit, scelerisque non, pellentesque sed, ultricies vitae, nulla. Etiam vel ligula. In hac habitasse platea dictumst. Aliquam id ante vitae nulla dictum laoreet. Aliquam erat volutpat.

Pellentesque felis. Nullam nec dui. Sed odio. Curabitur bibendum elementum metus. Donec luctus velit vel lectus. In vel justo vel velit fringilla porttitor. Nullam sagittis. Suspendisse blandit nibh nec mauris. Praesent nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus bibendum leo quis neque. Vivamus consectetuer ligula at dui. Mauris iaculis sollicitudin nunc.

To prevent this, use {{clr}} to clear both sides, {{clrr}} to clear the right, or {{clrl}} to clear the left. This will place all following text (include more tables) after any floated elements:

Multiplication table

×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit pede, imperdiet id, pellentesque ut, aliquam sed, nunc. Duis condimentum bibendum felis. Aliquam sed leo. Nunc volutpat volutpat massa. Curabitur luctus mauris eget urna. Donec dictum. Fusce a turpis. Nullam sodales fringilla neque. Aenean nibh. Donec viverra purus et est. Integer at enim molestie nulla fringilla imperdiet. Nam dictum rutrum eros. Sed ut diam. Etiam et elit. Praesent ut tellus. Nullam vel sem. {{clrr}}

Sed luctus arcu nec nulla. Sed dictum rhoncus leo. Praesent fringilla, nunc ut hendrerit tempus, nibh sem venenatis sapien, vitae tempor lorem turpis eu justo. Vestibulum a nibh. Sed interdum. Suspendisse potenti. Fusce a nibh. Aenean sed urna nec tellus porta hendrerit. Vestibulum felis velit, scelerisque non, pellentesque sed, ultricies vitae, nulla. Etiam vel ligula. In hac habitasse platea dictumst. Aliquam id ante vitae nulla dictum laoreet. Aliquam erat volutpat.

Pellentesque felis. Nullam nec dui. Sed odio. Curabitur bibendum elementum metus. Donec luctus velit vel lectus. In vel justo vel velit fringilla porttitor. Nullam sagittis. Suspendisse blandit nibh nec mauris. Praesent nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus bibendum leo quis neque. Vivamus consectetuer ligula at dui. Mauris iaculis sollicitudin nunc.

[edit] Decimal point alignment

A method to get columns of numbers aligned at the decimal point is as follows:

<blockquote>
{| cellpadding=0 cellspacing=0
|align=right| 432 || . || 1
|-
|align=right| 43 || . || 21
|-
|align=right| 4 || . || 321
|}
</blockquote>

gives

432	.	1
43	.	21
4	.	321

In simple cases one can dispense with the table feature and simply start the lines with a space, and put spaces to position the numbers:

432.1
 43.21
  4.321

[edit] External links

• area23.brightbyte.de - converts comma-separated values (CSV) format to pipe syntax
• HTML tables to wiki converter at wackyboy.com
• HTML tables to wiki converter at uni-bonn.de
• HTML tables to wiki converter at diberri.dyndns.org
• pywikipediabot (can convert HTML tables to wiki)