MediaWiki User’s Guide: Using tables
MediaWiki supports different types of table syntax:
- XHTML
- HTML and wiki <td> syntax
- pipe-syntax
All three are supported by MediaWiki and create valid HTML output.
XHTML | HTML & Wiki-td | Wiki-pipe | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Table | <table></table> | <table></table> |
{| params |} |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Caption | <caption></caption> | <caption></caption> |
|+ caption |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Row | <tr></tr> | <tr> |
|- params |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Data cell | <td>cell1</td> <td>cell2</td> |
<td>cell1 <td>cell2 |
| cell1 | cell2 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Data cell | <td>cell1</td> <td>cell2</td> <td>cell3</td> | <td>cell1 <td>cell2 <td>cell3 |
|cell1||cell2||cell3 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Header cell | <th></th> | <th> |
! heading |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Sample table |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<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 |} |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Sample table |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<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 |} |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Pros | Can be previewed/debugged with any XHTML editor
Can be formatted for easier reading Well-known |
Can be previewed/debugged with any HTML editor
Can be formatted for easier reading Well-known Takes less space than XHTML |
Easy to write
Easy to read Takes little space |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Cons | Tedious
Takes a lot of space Difficult to read quickly |
Confusing, especially for people with little HTML experience
Poorly formed Poorly delimited Generally odd looking |
Unfamiliar syntax
Rigid structure Cannot be indented |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
XHTML | HTML & Wiki-td | Wiki-pipe</table>
[edit]
Guide to the pipe syntaxThe 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 [edit]
TablesA table is defined by {| ”params” |} which equals <table ”params”>Insert non-formatted text here </table>
[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:
[edit]
CellsCells 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]
HeadersFunctions 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]
CaptionsA <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[edit]
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 |} [edit]
Appearance
[edit]
Notes
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 [edit]
MélangeHere’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. [edit]
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:wiki.png]] | align="center" width="150px" | [[Image:wiki.png]] |- | 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 Wikipedia logos |} |} [edit]
Appearance
[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 tableYou can use align=right, text after the table code appears to the left of the table. However, do not put preformatted text, it may overlap the table because it does not wrap.
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text To prevent this, use <br style=”clear:both;”>:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [edit]
Decimal point alignmentA 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
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 |