If you want to shape tables with wikitext , you have plenty of options. This one page won't go into them all, but it will show you how wikitext matches up to HTML markup, the difference a CSS class makes, and some of the ways manual wikitext coding can result in more intricate tables for your wiki.
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>
)
|}
FANDOM's default CSS classes
Deep within FANDOM's code lie two classes that you can put at the very start of your table. No matter which wiki you're on, there is always some default formatting for .article-table and .wikitable . If you use either the VisualEditor or the classic editor's visual mode, .article-table will be automatically added so that the basic structure of your table will be.
{| class = "article-table"
...
|}
But there are cases where you might consider using .wikitable , instead. Here's what they both look like on a completely un-customized wiki:
With .article-table you get a lighter design
With .wikitable you get greater definition for each cell
Without a CSS class, you get neither borders nor header backgrounds
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 paddingHTML5 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