Community Central
Register
Community Central

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
|}

row 1,
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

Cell, header, or row alignment

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