Help:Basic table markup

The wikitext markup for a table uses the following:

{{mw-datatable}}

class="wikitable plainrowheaders mw-datatable" |+ Summary of table wikitext markup.
scope="col" | Name ! scope="col" | Markup ! scope="col" | Comments
scope="row" | Table start | {| | It opens a table (and is required)
scope="row" | Table caption | |+ | It adds a caption (and is optional, but recommended according to accessibility guidelines)
scope="row" | Table row |
| It adds a new row (and is optional for the first row)
scope="row" | Header cell | ! | It adds a header cell, whose content can optionally be placed on a new line
scope="row" | Header cell (on the same line) |	| It adds a header cell on the same line
scope="row" | Data cell | | | It adds a data cell, whose content can optionally be placed on a new line (see also the attribute separator)
scope="row" | Data cell (on the same line) | || | It adds a data cell on the same line
scope="row" | Attribute separator | | | It separates HTML attributes from cell or caption content
scope="row" | Table end |

| It closes a table (and is required)

|}

Table markup must start on a new line except for !!, ||, and | (when used as an attribute separator). To add a literal pipe (|) character to cell content, use the {{xtag|nowiki}} markup (|).

opens a table, and

closes it. class="wikitable" is frequently used to apply standard formatting to a table, and is added on the same line as {|.

|+ Table caption adds the caption "Table caption" to the top of the table. A caption is optional, but recommended according to accessibility guidelines.

|- adds a new row, which should be followed by the same number of cells found in other rows. Note, rowspan="2" and colspan="2" can be used on cells to span multiple rows and columns.

Header cells are created with ! Header cell, which can be column or row headers. Data cells are created with | Data cell. A new column can be added by adding another cell to the first row. To fill in the data for that column, add another data cell to the remaining rows.

Spaces are ignored, thus   |  Data   and |Data are identical.

Double cell markup can be used to add consecutive cells to a single line with !! and || instead of using new lines between each ! and |. Note, the type of single and double marks on a single line should not be mixed, such as | Data !! Header where !! is not translated into a header cell.

For example, this produces the same table found in the previous section:

Wikitext:

class="wikitable" |+ Table caption
Column header 1	Column header 2	Column header 3
Row header 1 | Data 1 || Data 2
Row header 2 | Data 3 || Data 4

HTML attributes are often needed for various reasons. An attribute takes the basic form attribute="value", where combining multiple repeats this with attribute="value" attribute2="value2".

Important points to realize:

• All table markup, except table end (|}), can have attributes added.
• Table and row markup ({| and |-) don't directly hold content. Therefore, do not add a pipe (|) after any attributes.
• Cell markup (!, !!, |, ||) and caption markup (|+) directly hold content. Therefore, attributes should be followed by a pipe (|) before the content. This applies even when cell content is on a new line, which is permissible.

Tables use the

and

markup, which attributes cannot be added to |}. The markup doesn't directly hold content, so attributes should not be followed by a pipe (|).

The syntax for table attributes is:

{| attribute="value" attribute2="value2"

For example, the "wikitable" class is frequently applied to tables for similar styling. The second attribute styles the text color as red, which the text it styles is found in the caption and cells:

{| class="wikitable" style="color: red;"

Captions use the |+ markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content.

The syntax for caption attributes is:

|+ attribute="value" attribute2="value2" | Table caption

For example, this styles the text color as red for the caption:

|+ style="color: red;" | Table caption

Rows use the |- markup. The markup doesn't directly hold content, so attributes should not be followed by a pipe (|).

The syntax for row attributes is:

|- attribute="value" attribute2="value2"

For example, this styles the row height to 100 pixels and the text color as red for all the row's cells:

|- style="height: 100px; color: red;"

Header cells use the ! and !! markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content. Note, defining a header's scope is optional, but recommended according to accessibility guidelines.

The syntax for header cell attributes is:

! attribute="value" attribute2="value2" | Header 1

! attribute="value" attribute2="value2" | Header 2

or using double marks:

! attribute="value" attribute2="value2" | Header 1 !! attribute="value" attribute2="value2" | Header 2

For example, these style the text color as red for the first and third column header cells, and specify that the cells are a header for a column, which screen readers use the scope attribute:

! scope="col" style="color: red;" | Column header 1

! scope="col" | Column header 2

! scope="col" style="color: red;" | Column header 3

Data cells use the | and || markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content.

The syntax for data cell attributes is:

| attribute="value" attribute2="value2" | Data 1

| attribute="value" attribute2="value2" | Data 2

or using double marks:

| attribute="value" attribute2="value2" | Data 1 || attribute="value" attribute2="value2" | Data 2

For example, these style the text color as red for the first and third data cells:

| style="color: red;" | Data 1

| Data 2

| style="color: red;" | Data 3

Common HTML attributes included in tables:

;class: Often used to apply CSS styling from a style sheet and/or external JavaScript functionality to an element. Multiple class values can be added separated by a space. For example, adding class="wikitable" to the table start markup styles the table. A second class can be added for sorting (class="wikitable sortable") or to toggle visibility (class="wikitable mw-collapsible"). See also the list of class attributes.

;style: This is called an inline style, and can be used to add CSS styles to an element, such as color, font, size, and more. Multiple style values can be added separated by a semicolon and optional space. For example, style="color: red;" stylizes text as red and style="color: red; background-color: yellow;" stylizes text as red and the element's background color as yellow. For table markup, it can be applied to whole tables, table captions, table rows, and individual cells. CSS specificity in relation to content should be considered since applying it to a row could affect all that row's cells and applying it to a table could affect all the table's cells and caption, where styles closer to the content can override parent styles.

;rowspan: Extends a cell beyond its normal one row. For example, rowspan="2" specifies the cell should span two rows.

;colspan: Extends a cell beyond its normal one column. For example, colspan="2" specifies the cell should span two columns.

;scope: Specifies whether a header cell is a header for a column (scope="col"), row (scope="row"), group of columns (colspan="2" scope="colgroup"), or group of rows (rowspan="2" scope="rowgroup"). It has no visual effect, but is used by screen readers and is recommended according to accessibility guidelines.

Other HTML attributes are used with tables, but many are deprecated by HTML5. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table "table"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption "caption"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr "table row"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th "header cell"] and [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td "data cell"] for some deprecated and rarely used attributes.

Sometimes cell content may need to be on a separate line than the cell markup, for instance, when the cell contains a list or nested table.

Example of same line:

Example of separate line, which produces extra spacing around each cell's content due to the MediaWiki software translating the newline and content into a paragraph of content:

{{For|a history of the development of wikicode table syntax|Help:Table/History of pipe syntax development{{!}}/History of pipe syntax development}}

The MediaWiki software translates wikitext into HTML.

Example:

The {{Tag|table}} tags open and close a table. The {{Tag|caption}} tags add a caption. The optional {{Tag|tbody}} tags defines where the table body starts and ends. The {{Tag|tr}} tags open and close table rows. The {{Tag|th}} tags add header cells. The {{Tag|td}} tags add data cells.

HTML attributes can be added by insertion within the opening tag of any of the HTML table tags. For example, a table with attributes would be

. In this example, the scope attribute defines what the headers describe, column or row, which screen readers use.

You can add a table using HTML rather than wiki markup, as described at HTML element#Tables. However, HTML tables are discouraged because wikitables are easier to customize and maintain, as described at manual of style on tables. Also, note that the {{Tag|thead|o}}, {{Tag|tbody|o}}, {{Tag|tfoot|o}}, {{Tag|colgroup|o}}, and {{Tag|col|o}} elements are not supported in wikitext.

See also

For further help with tables, see:

• Help:Introduction to tables with Wiki Markup, a brief introduction to tables
• Help:Table, an in-depth and comprehensive guide to tables
• Help:Sortable tables, sortable tables typically use class="wikitable sortable"
• Help:Collapsing, collapsing tables typically uses class="wikitable mw-collapsible"
• {{Wikibooks-inline|Editing Wikitext/Tables}}
• {{Wikibooks-inline|Editing Wikitext/Tables Ready to Use}}
• Wikipedia:Manual of Style/Tables, the Manual of Style for best practices for tables
• Wikipedia:Table dos and don'ts, a quick guide to the Manual of Style for tables
• Wikipedia:Advanced table formatting, some advanced techniques

Category:Wikipedia how-to

Category:Wikipedia tables

{{Wikipedia technical help}}