The following are examples of wikitext formatting, specific to tables.
See also Help:Wikitext, plus link examples and more examples.
Basic table code
Description
|
You type
|
Begin table (equivalent to <table> )
|
{|
|
Begin table row (equivalent to <tr> )
|
|-
|
Table header (part of a row; equivalent to <th> )
|
! or !!
|
Table cell (part of a row; equivalent to <td> )
|
| or ||
|
End table (equivalent to </table> )
|
|}
|
Note that the HTML for closing a row (</tr> ), header (</th> ), or cell (</td> ) will be auto-generated.
|
Basic tables
Description
|
You type
|
You get
|
Simple 1 cell table with a border
|
{| border="1"
|-
| row 1, <br/> cell/column 1
|}
|
|
Simple 2 cell table left header
|
{| border="1"
|-
! row 1, <br/> header 1/column 1
| row 1, <br/> cell 1/column 2
|}
|
row 1, header 1/column 1
|
row 1, cell 1/column 2
|
|
Simple 3 x 3 table
|
{| border="1"
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
| row 1, <br/> cell/column 3
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
| row 2, <br/> cell/column 3
|-
| row 3, <br/> cell/column 1
| row 3, <br/> cell/column 2
| row 3, <br/> cell/column 3
|}
|
row 1, cell/column 1 |
row 1, cell/column 2 |
row 1, cell/column 3
|
row 2, cell/column 1 |
row 2, cell/column 2 |
row 2, cell/column 3
|
row 3, cell/column 1 |
row 3, cell/column 2 |
row 3, cell/column 3
|
|
Simple 2 x 2 table with 90% width
|
{| width="90%"
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
|}
|
- Border for illustrative purposes only.
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Simple 2 x 2 table with 16px cell padding HTML5 doesn't support cellpadding= table attribute anymore.
|
{|
|-
| style="padding:16px;" | row 1, <br/> cell/column 1
| style="padding:16px;" | row 1, <br/> cell/column 2
|-
| style="padding:16px;" | row 2, <br/> cell/column 1
| style="padding:16px;" | row 2, <br/> cell/column 2
|}
|
- Border for illustrative purposes only.
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Simple 2 x 2 table with 8px cell spacing
|
{| cellspacing="8px"
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
|}
|
- Border for illustrative purposes only.
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Cell and header spanning
Description
|
You type
|
You get
|
Simple 2 column table with header spanning both
|
{|
|-
! colspan="2" | Two-column wide header
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
|}
|
- Cell colors for illustrative purposes only.
Two-column wide header
|
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Simple 2 column table with cell spanning both
|
{|
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
|-
| colspan="2" | row 2, <br/> cell/column 1 & 2
|}
|
- Cell colors for illustrative purposes only.
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1 & 2
|
|
Simple 2 row table with cell spanning both
|
{|
|-
| row 1, <br/> cell 1/column 1
| rowspan="2" | row 1 & 2, <br/> cell 2
|-
| row 2, <br/> cell 3/column 1
|}
|
- Cell colors for illustrative purposes only.
row 1, cell 1/column 1
|
row 1 & 2, cell 2
|
row 2, cell 3/column 1
|
|
Description
|
You type
|
You get
|
Simple 2 x 2 table with various alignments
|
{| width="100%"
|- valign="top"
! align="right" | row 1, <br/> header 1, <br/> column 1
| align="center" | row 1, <br/> cell 1/column 2
|- valign="bottom"
! row 2, <br/> header 2, <br/> column 1
| row 2, <br/> cell 2/column 2
|}
|
- Cell colors for illustrative purposes only.
row 1, header 1, column 1
|
row 1, cell 1/column 2
|
row 2, header 2, column 1
|
row 2, cell 2/column 2
|
|
Table captions
Description
|
You type
|
You get
|
Simple 2 x 2 table with a caption
|
{| width="100%"
|-
|+ Caption
! row 1, <br/> header 1, <br/> column 1
| row 1, <br/> cell 1/<br/>column 2
|-
! row 2, <br/> header 2, <br/> column 1
| row 2, <br/> cell 2/<br/>column 2
|}
|
Caption
row 1, header 1, column 1
|
row 1, cell 1/ column 2
|
row 2, header 2, column 1
|
row 2, cell 2/ column 2
|
|
Typical CSS styling
Description
|
You type
|
You get
|
FANDOM-styled 4 cell table
|
{| class="article-table"
|-
! row 1, <br/> header 1/column 1
! row 1, <br/> header 2/column 2
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
|}
|
row 1, header 1/column 1
|
row 1, header 2/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Simple 2 x 2 table with CSS background-color
|
{| style="background-color:yellow;"
|-
| row 1, <br/> cell/column 1
| row 1, <br/> cell/column 2
|-
| row 2, <br/> cell/column 1
| row 2, <br/> cell/column 2
|}
|
row 1, cell/column 1
|
row 1, cell/column 2
|
row 2, cell/column 1
|
row 2, cell/column 2
|
|
Simple 2 x 2 table with various CSS styles
|
{| style="border:3px inset gray; font-size:80%; width:90%;"
|-
! style="background-color:blue; color:pink; padding-left:1em; width:60%;" | row 1, <br/> header 1/column 1
| style="text-decoration:line-through;" | row 1, <br/> cell/column 2
|-
! style="text-align:right;" | row 2, <br/> header 2/column 1
| style="border:1px dotted red;" | row 2, <br/> cell/column 2
|}
|
row 1, header 1/column 1
|
row 1, cell/column 2
|
row 2, header 2/column 1
|
row 2, cell/column 2
|
|
See also
Further help and feedback