Help:Basic table markup

This help page describes basic wiki markup for tables. For a more extensive guide please see Help:Table.

Introduction
The wikitext markup for a table uses the following:

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 nowiki markup.

Example table
Wikitext:

Produces:

opens a table, and  closes it. is frequently used to apply standard formatting to a table, and is added on the same line as.

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,  and   can be used on cells to span multiple rows and columns.

Header cells are created with, which can be column or row headers. Data cells are created with. 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  and   are identical.

Using double marks with tables
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  where   is not translated into a header cell.

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

Wikitext:

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

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.

Adding HTML attributes to whole tables
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:

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:

Adding HTML attributes to captions
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:

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

Adding HTML attributes to rows
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:

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

Adding HTML attributes to header cells
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  is optional, but recommended according to accessibility guidelines.

The syntax for header cell attributes is:

or using double marks:

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:

Adding HTML attributes to data cells
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:

or using double marks:

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

Common attributes
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  to the table start markup styles the table. A second class can be added for sorting  or to toggle visibility . 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,  stylizes text as red and   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,  specifies the cell should span two rows.
 * colspan: Extends a cell beyond its normal one column. For example,  specifies the cell should span two columns.
 * scope: Specifies whether a header cell is a header for a column, row , group of columns , or group of rows . 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 "table", "caption", "table row", "header cell" and "data cell" for some deprecated and rarely used attributes.

Cell contents on new lines
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:

Wikitext:

Produces:

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:

Wikitext:

Produces:

How tables are formed
The MediaWiki software translates wikitext into HTML.

Example:

Wikitext:

HTML:

Produces:

The  tags open and close a table. The  tags add a caption. The optional  tags defines where the table body starts and ends. The  tags open and close table rows. The  tags add header cells. The  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  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. 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, , , , and elements are not supported in wikitext.