Here are more examples of wikitext formatting, specific to tables .
Wikitext cheatsheet
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 8px cell padding
{| cellpadding="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
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
Wikia-styled 4 cell table left header
{| 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 & feedback