Help:Basic table markup
![]() |
This page is a how-to guide, detailing processes or procedures of some aspect or aspects of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines. |
|
This help page describes basic wiki markup for tables. For a more extensive guide please see Help:Table.
Contents
Introduction[edit]
The markup for a basic table is:
{| class="wikitable" |+ Caption: example table |- ! header1 ! header2 ! header3 |- | row1cell1 | row1cell2 | row1cell3 |- | row2cell1 | row2cell2 | row2cell3 |}
This would produce:
header1 | header2 | header3 |
---|---|---|
row1cell1 | row1cell2 | row1cell3 |
row2cell1 | row2cell2 | row2cell3 |
{|
opens a table, and |}
closes it. class="wikitable"
is used with a lot of tables on Wikipedia, and adds some standard formatting, and follows on the same line as {|
.
|+ Caption: example table
adds the caption "Caption: example table" to the top of the table. The caption is optional.
Columns headers are created by ! column name
. Cells are created by | cell text
. The divider between rows is |-
. You can add an extra column by just sticking ! new column name
at the end of the last column name. To fill the cells in that column, you need to add another cell to each row: fill it by typing | cell text
. If you want to add an extra row, just add |-
to the table, and fill it with however many cells are appropriate.
Blank spaces at the beginning of a line are ignored. Thus |row1cell1
and | row1cell1
are identical.
To add a pipe (|
) character into cell contents, you need to use the <nowiki>
markup.
To recap, the markup is as follow. All this markup must start on a new line, except for !!
and ||
.
{| |
Table start | It is required. |
|+ |
Table caption | It is optional. Only between table start and first table row |
! |
Table header cell | It is optional. Cells may start on new lines, each beginning with its own single mark. Cell contents may also be put on the next line. |
!! |
Consecutive table header cell | It is optional. Cells may be added on same lines separated by double marks. |
|- |
Table row | It is optional on the first row, but otherwise required. The wiki engine assumes the first row. |
| |
Table data cell | It is required for data cells on new lines. Cells may start on new lines, each beginning with its own single mark. Cell contents may also be put on the next line. It is also used to separate HTML attributes from cell contents (both data or header), or caption contents. |
|| |
Consecutive table data cell | It is required for data cells on the same line. Cells may be added on same lines separated by double marks. |
|} |
Table end | It is required. |
Using double marks with tables[edit]
The above markup must start on a new line. This includes the cell markup (|
and !
). But the double cell markup (||
and !!
) can optionally be used for adding consecutive cells to a single line.
For example, this would produce the same table as above:
{| class="wikitable" |+ Caption: example table |- ! header1 !! header2 !! header3 |- | row1cell1 || row1cell2 || row1cell3 |- | row2cell1 || row2cell2 || row2cell3 |}
HTML attributes[edit]
HTML attributes are often needed to be added to tables for various reasons. Attributes take the basic form:
attribute="value"
Multiple attributes can be applied by repeating this, like attribute1="value1" attribute2="value2"
Important points to realize:
- All table markup, except table end (
|}
), optionally accepts one or more attributes on the same line. - Cell markup (
|
,||
,!
,!!
) and caption markup (|+
) hold content. So separate any attributes from content with a single pipe (|
), even when cell content is on a new line, which is permissible. - Table and row markup (
{|
and|-
) do not directly hold content. Therefore, do not add a pipe (|
) after any attributes.
Adding HTML attributes to cells and captions[edit]
This is how to cell contents, including header cell contents, and also captions.
Cells hold content, e.g. row1cell1
. The markup for cells and captions are: |
, ||
, !
, !!
and |+
. Attributes need to be kept separate from cell content or captions with a single pipe (|
). Cell content or captions may follow on the same line, or on a following line.
So attributes can be inserted like this:
| attribute="value" | row1cell1 | attribute="value" | row1cell2 | attribute="value" | row1cell3
Where attribute="value"
indicates one or more attribute, for example style="color: red"
.
If the cells are on the same line, attributes can be added like this: | attribute="value" | row1cell1 || attribute="value" | row1cell2 || attribute="value" | row1cell3
Adding to the header can be done like this:
! attribute="value" | header1 ! attribute="value" | header2 ! attribute="value" | header3
Or like this: ! attribute="value" | header1 !! attribute="value" | header2 !! attribute="value" | header3
Adding to the caption is done like this: |+ attribute="value" | Caption Title
For example, lets say we wanted to make some cells' text red colored. The attribute to do so is style="color: red"
. It could be added to some cells in a table like this:
{| class="wikitable" |+ Caption: some cells red text. |- ! header1 ! header2 ! header3 |- | style="color: red" | row1cell1 | row1cell2 | style="color: red" | row1cell3 |- | row2cell1 | style="color: red" | row2cell2 | row2cell3 |}
Then it would produce this:
header1 | header2 | header3 |
---|---|---|
row1cell1 | row1cell2 | row1cell3 |
row2cell1 | row2cell2 | row2cell3 |
As you can see, a red color has been added to some of the cells' text. Note that, optionally, cell contents could be added to new lines if desired.
Adding HTML attributes to whole tables and rows[edit]
Tables and rows use the following markup: {|
, |-
and |}
. Attributes can be added to {|
and |-
. They do not directly hold content. Because of this, they should not have an added pipe (|
) after any attributes.
Attributes can be added to the table markup like this: {| attribute="value"
, where attribute="value"
indicates one or more attributes.
Attributes can be added to the row markup like this: |- attribute="value"
.
An example is the
{| class="wikitable"
used before, that applies a class to an entire table. Likewise you could add a second attribute: for example,
{| class="wikitable" style="color:red"
would apply two attributes, class and style. That style attribute would give text a red color.
An example of an attribute applied to a table row:
|- style="height: 100px"
would apply a style attribute, in this case to make the height of a table row 100px.
Commonly included[edit]
Commonly included attributes in tables:
class
attribute, for exampleclass="wikitable"
. The class attribute is normally applied to a complete table.style
attribute, for examplestyle="color:red"
. It is used for CSS (Cascading Style Sheets) styling, and can be applied to whole tables, table captions, table rows and individual cells.rowspan
attribute, for examplerowspan="2"
. Used for formatting cells so they extend beyond their normal extent of one row.colspan
attribute, for examplecolspan="2"
. Used for formatting cells so they extend beyond their normal extent of one column.border
attributes, for exampleborder="1"
. Used for applying a borders to whole tables, but not needed if usingclass="wikitable"
.scope
attribute, for examplescope="col"
. Not essential, but can be used to specify whether a header cell is a row or column header.
Other attributes are used with tables, but many are unsupported by HTML5. See table at w3schools.com and td at w3schools.com for some examples.
Cell contents on new lines[edit]
Cell content may follow on the same line after its cell markup (which may include attributes); or on lines below the cell markup. Cell content that uses its own markup may need to start on a new line; this can happen with things like lists, headings, or nested tables.
For example, the following markup applies red text to three cells:
| style="color:red" | row1cell1 | style="color:red" | row1cell2 | style="color:red" | row1cell3
Cell contents can be added to new lines if so desired. So therefore the following markup would have a similar effect to the above:
| style="color:red" | row1cell1 | style="color:red" | row1cell2 | style="color:red" | row1cell3
How tables are formed[edit]
If you use the following wiki markup for a table:
{| class="wikitable" |+ Caption: example table |- ! header1 ! header2 ! header3 |- | row1cell1 | row1cell2 | row1cell3 |- | row2cell1 | row2cell2 | row2cell3 |}
The MediaWiki software translates it into the following HTML:
<table class="wikitable">
<caption>Caption: example table</caption>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>row1cell1</td>
<td>row1cell2</td>
<td>row1cell3</td>
</tr>
<tr>
<td>row2cell1</td>
<td>row2cell2</td>
<td>row2cell3</td>
</tr>
</table>
The <table>...</table>
tag opens and closes the table. The <caption>...</caption>
tag adds a caption. The <tr>...</tr>
tag opens and closes table rows. The <th>...</th>
tag adds a header cell. The <td>...</td>
tag adds a data cell.
HTML attributes can be added by insertion within the opening tag. For example <table>
can have an attribute added like this: <table attribute="value">
, or <table attribute1="value1" attribute2="value2">
for two attributes. All other tags follow the same rule.
You can add a table using HTML coding rather than wiki markup, as described at HTML element#Tables. However it is discouraged due to readability reasons; see the manual of style on tables. Also, note that the <thead>...</thead>
, <tbody>...</tbody>
, <tfoot>...</tfoot>
, <colgroup>...</colgroup>
, and <col>...</col>
tags are not supported.
See also[edit]
For further help with tables, see: Help:Table; Editing Wikitext/Tables at Wikibooks; and Wikipedia:Advanced table formatting.