| 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.
|
| 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
|
|
| 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
|
|
| 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
|
|
| 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
|
|
Create
