Jump to content

Help:Table

From Wikipedia, the free encyclopedia

A table is an arrangement of columns and rows that organizes and positions information or data. Tables can be created on Wikipedia using wikitext or HTML (discouraged). HTML attributes can change how a table appears or behaves, like sorting, cell spanning, or alignment.

Editing tools

[edit]

Visual editing

[edit]
Use the pencil icon to switch between visual and source editing. The former might be easier for most table editing.

When visual editing a page, a table can be inserted at the cursor position via the toolbar's "Table" icon . The icon is located under "Insert" with the label "Table". The following blank table is inserted, which you can then modify:

To help modify the table, the interface displays buttons under the table to delete the table or modify its properties. The "table properties" popup shows the following default options for the inserted table:

Caption 1
Styled (wikitable) 1
Sortable 0
Collapsible 0

Text can be inserted in a selected caption or cell. When a cell is selected, the interface displays buttons to insert, move, or delete rows and columns. When selecting multiple cells, an additional merge or unmerge button appears. Use the format drop-down menu to change selected cells to "Header cell" or "Content cell".

Alternatively, a non-blank table can be inserted in visual editing by highlighting the table and copy-and-pasting or drag-and-dropping the displayed table, like from web pages or in spreadsheets. A .csv file of a table can be drag-and-dropped to insert it. The interface converts those to wikitext and displays the table. However, you cannot paste wikitext or HTML here.

Table modifications are done visually in visual editing, or you can switch to source editing to edit the same table before publishing.

Source editing

[edit]

When source editing a page, a basic table can be inserted at the cursor position via the toolbar's "Table" icon . The icon is located under "Advanced", "Insert". This button displays an "Insert table" (properties) popup with the following default settings:

1
Add header row
1
Style with borders
0
Make table sortable
Rows 3
Columns 3

After insert, the following wikitext table is added, which you can then modify:

Wikitext

{| class="wikitable"
|+ Caption text
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}

Produces

Caption text
Header textHeader textHeader text
ExampleExampleExample
ExampleExampleExample
ExampleExampleExample

Alternatively, a table can be inserted manually using wikitext or HTML (discouraged).

Table modifications are done manually in source editing, or you can switch to visual editing to edit the same table before publishing.

Other tools

[edit]

Other tools, such as those used to create wikitext tables from Excel, can be used to create wikitext from spreadsheet and database tables. See § External links for a list of some.

Basic markup

[edit]

In source editing, tables can be added to pages using wikitext or HTML (discouraged).

Note: Layout tables (i.e., tables used for non-data purposes) are discouraged, per MOS:LTAB. If a table is a simple list, it is generally better to use a list or prose instead, per MOS:NO-TABLES.

Wiki markup

[edit]
Overview of basic table markup
Name Markup Usage
Table start {| Required to start a table.
Caption |+ Adds a caption to the top of the table. Placed between the table start and first row. Required on data tables to concisely describe what the table is about (MOS:HEADERS). Not allowed on layout tables (MOS:LTAB).
Row |- Adds a row to contain cells. Optional for the first row.
Header cell ! or !! Adds a header cell (row or column header). An exclamation mark (!) is placed on its own line for each header. Alternatively, consecutive header cells can be separated on the same line by double exclamation marks (!!). Required on data tables to concisely describe what its cells are about (MOS:HEADERS). Not allowed on layout tables (MOS:LTAB).
Data cell | or || Adds a data cell to hold content like text or images. A vertical bar (|) is placed on its own line for each data cell. Alternatively, consecutive data cells can be separated on the same line by double vertical bars (||). A pipe (vertical bar) is also used to separate HTML attributes from caption or cell content.
Table end |} Required to end a table.
  • Each must start on a new line, except || and !!.
  • Leading spaces are ignored.
  • Content may follow its cell markup on the same line (after optional HTML attributes) or on subsequent lines. A blank line may introduce a paragraph break, adding extra spacing in the cell. Content requiring a new line, such as a list, must be placed on its own line.

HTML attribute syntax

[edit]

HTML attributes can be used to add information, affecting behavior, appearance, or accessibility. In table markup, they control cell spanning, header associations, and styling.

Attributes generally appear as name–value pairs separated by an equals sign (=) with values enclosed in double quotes (") (e.g., attribute="value value2" attribute2="value3"), though exceptions exist. The style attribute (inline CSS) contains internal CSS property-value pairs separated by colons and semicolons (e.g., style="property: value; property2: value2;"). Each property-value pair is called a declaration. The trailing semicolon is optional, but is a "good style" to do as it prevents forgetting to add it when adding more declarations.

Table markup optionally accepts one or more attributes except for table end (|}). Attributes must be on the same line as the markup.

Cell and caption markup (| or ||, ! or !!, and |+) hold content. Add a pipe (|) after attributes to separate it from the content.

  • |+ attribute="value" | Caption
  • ! attribute="value" | Header cell or !! attribute="value" | Header cell
  • | attribute="value" | Data cell or || attribute="value" | Data cell

Table and row markup ({| and |-) do not directly hold content. Do not add a pipe (|) after attributes.

  • {| attribute="value"
  • |- attribute="value"

Displaying a pipe character

[edit]

When a vertical bar (|) character is in a table's caption or cell, the parser can misinterpret it as a pipe separator for attributes and content, which can discard preceding text when attributes are absent.

Options:

Other character references exist where the HTML entites are case-sensitive and the hexadecimal numeric is case-sensitive in XML/XHTML.

Pipe (|) character in a table
Cell content Lost Display
Pipe (|) Pipe (| )
Pipe (<nowiki>|</nowiki>) Pipe (|)
Pipe (&#124;) Pipe (|)
{{Nowrap|Pipe ({{!}})}} Pipe (| )
{{Nowrap|Pipe (<nowiki>|</nowiki>)}} Pipe (|)
{{Nowrap|Pipe (&#124;)}} Pipe (|)

See {{nowrap}} for template info.

Note: Avoid misuse of the magic word {{!}}. It is expanded to its character before table parsing.

In visual editing, entering a vertical bar character in a cell automatically escapes the cell's content (e.g., <nowiki>Pipe (|)</nowiki>). In source editing, under "Advanced", the "No wiki formatting" icon can be used.

Wikitext and HTML example

[edit]

In source editing, a table can be inserted manually using wikitext or HTML (discouraged). The following produce the same table:

Wikitext

{| class="wikitable plainrowheaders"
|+ Rock paper scissors game
|-
! scope="col" | Choice
! scope="col" | Fingers
! scope="col" | Defeats
|-
! scope="row" | Rock
| style="text-align: center;" | 0
| Scissors
|-
! scope="row" | Paper
| style="text-align: center;" | 5
| Rock
|-
! scope="row" | Scissors
| style="text-align: center;" | 2
| Paper
|}

HTML

<table class="wikitable plainrowheaders">
  <caption>Rock paper scissors game</caption>
  <tr>
    <th scope="col">Choice</th>
    <th scope="col">Fingers</th>
    <th scope="col">Defeats</th>
  </tr>
  <tr>
    <th scope="row">Rock</th>
    <td style="text-align: center;">0</td>
    <td>Scissors</td>
  </tr>
  <tr>
    <th scope="row">Paper</th>
    <td style="text-align: center;">5</td>
    <td>Rock</td>
  </tr>
  <tr>
    <th scope="row">Scissors</th>
    <td style="text-align: center;">2</td>
    <td>Paper</td>
  </tr>
</table>

Produces

Rock paper scissors game
Choice Fingers Defeats
Rock 0 Scissors
Paper 5 Rock
Scissors 2 Paper

The MediaWiki software translates table wikitext into the following HTML:

Note: HTML tables are discouraged, per MOS:TABLES. The <thead>, <tbody>, <tfoot>, <colgroup>, and <col> HTML elements are not supported.

HTML attributes are unchanged. When a pipe (|) character separates attributes from content, it is used as a delimiter, placing the attributes inside the opening tag.

The caption indicates this table is about the Rock paper scissors game. The table has 4 rows and 3 columns. The top row has column headers (Choice, Fingers, and Defeats) with scope="col", meaning each header describes the cells below it. The left column has row headers (Rock, Paper, and Scissors) with scope="row", meaning each header describes the cells to its right. The table uses the recommended wikitable class, which applies general styling such as left-aligned data cells with a light gray background, and center-aligned, bold header cells with a gray background. The plainrowheaders class was added to left-align the scoped row headers without bold, leaving the gray background to visually indicate headers. Additionally, the numbers in the "Fingers" column are the same length and narrow, so they are center-aligned using style="text-align: center;".

HTML attributes for tables

[edit]

HTML attributes can be used to add information, affecting behavior, appearance, or accessibility. In table markup, they control cell spanning, header associations, and styling. The following describes global and specific attributes in relation to table markup and usage on Wikipedia:

class
Applies predefined styles or interactive features to an element. For example, {| class="wikitable sortable" applies standard styling to the table and adds sorting functionality. Adding the plainrowheaders class with wikitable will left-align and use normal font-weight on row headers that have the scope="row" attribute. See also the list of classes.
style
Applies custom CSS inline properties directly to an element. For example, |- style="font-style: italic; font-weight: bold;" applies CSS to the row, making its contents italic and bold.
Note: In general, styles should be set using CSS classes, not with inline style attributes. Inline styles can override site-wide CSS or user preferences. Site-wide CSS is carefully designed for browser compatibility, theme adaptation, and a consistent appearance (MOS:TABLES#Appearance and MOS:DEVIATIONS). For example, setting custom background, text, or border colors can create severe contrast barriers for low-vision and color-blind users (MOS:COLOR), and can make text unreadable in dark mode (mw:Avoid static colors and mw:Help:Lint errors/night-mode-unaware-background-color).
colspan
Instructs a cell to stretch horizontally across multiple columns. For example, | colspan="2" | Cell spans that cell across two columns.
rowspan
Instructs a cell to stretch vertically down multiple rows. For example, | rowspan="2" | Cell spans that cell across two rows.
scope
Semantically connects a header cell to its subsequent cells in corresponding column(s) or row(s), so assistive technology (e.g., screen readers) does not have to guess from position alone. It is only used on header cells. For example, ! scope="col" | Header or ! scope="row" | Header explicitly declares that a header cell applies to cells below it in the same column or right of it in the same row.
Note: Do not use colgroup or rowgroup scopes (MOS:DTAB). For col and row, scope spanning will work for cases like parent-child headers.
id
Assigns a unique, unspaced identifier to an element so it can be targeted or referenced elsewhere, unique on the page. For example, ! id="comp" | Company creates a unique identifier for referencing that specific header cell.
headers
Manually links a cell (header or data) to specific header cells in the "same table" by referencing their id values in a spaced, unordered headers list. It is used when position or scope alone is insufficient to correctly identify a relationship. For example, ! id="comp" | Company and | headers="comp" | ABC link the "Company" header to the "ABC" cell. Similarly, ! scope="row" headers="" | Total unlinks a "Total" row header from the column headers above it so they do not incorrectly describe it.
Note: It is recommended to first simplify the layout or split up the table before using this attribute (MOS:DTT#Complex tables).
role
Redefines the purpose of an element for assistive technologies (e.g., screen readers). For example, {| role="none" is used on layout (non-data) tables so assistive technologies read the content as plain text rather than as a table structure.
Note: role="presentation" is a synonym, and layout tables are discouraged (MOS:LTAB).

Obsolete attributes (e.g., align, bgcolor, border, cellpadding, cellspacing, height, summary, width, and valign) should not be used. See the WHATWG HTML spec, §16.2 for a full list. Wikipedia:HTML5#Table attributes gives CSS replacements. While abbr (on header cells) and title are valid, they should be avoided, per MOS:HEADERS and MOS:NOHOVER.

Whole table operations

[edit]

Class

[edit]

One or more class HTML attribute values may be added to the table start markup, and may be used to supply predefined style to the table. Separate them Place them on the same line, embedded in double quotes and separated by a space:

{| class="wikitable sortable mw-collapsible"

Some predefined classes are:

A sortable wikitable
breed ht wt
Labrador Retriever 23 70
French Bulldog 12 25
German Shepherd 27 78
Golden Retriever 23 71
English Bulldog 14 45
  • wikitable – provides column headers with bold font on shaded background, and other common style. See here for details. This class should be used for almost all tables, unless there is a reason not to.
  • sortable – adds up and down icons to column headers which enable sorting the table on a given column. See sortable tables.
  • mw-collapsible – See collapsible tables.[note 1]
  • plainrowheaders – applies left-aligned and normal-weight formatting of row headers. See Table header layout. Used with wikitable class.
  • floatright – same as applying style="float: right; clear: right; margin-left: 8px" to the entire table
  • floatleft – same as applying style="float: left; clear: left; margin-right: 8px" to the entire table

Note: Template:Table may also be used to apply classes to the table start markup.

Captions and summaries

[edit]

Explicit table captions (or titles) are recommended for data tables as a best practice; the Wikipedia Manual of Style considers them a high priority for accessibility reasons (screen readers), as a caption is explicitly associated with the table, unlike a normal wikitext heading or introductory sentence. All data tables on Wikipedia require captions. Add caption markup after the table start markup before any rows. It displays at the top of the table outside the border, and is centered in desktop browsers or left aligned in mobile browsers. A caption can be styled (with inline, not block, CSS), and may include wikilinks, reference citations, etc.

Many article editors dislike table captions when the table is directly below, or not far away from, a similar article heading. But screen reader users still need a table caption to quickly browse from table to table. In this case use the popular {{sro}} template: Template:Screen reader-only. Add the template to the table caption, and then only screen reader users will see it.

For example:

|+ {{sro|Table caption}}

For current table caption and summary guidelines see the w3.org page: Caption & Summary, in Tables Tutorial. Web Accessibility Initiative (WAI).

Wikitext showing left-aligned caption with a source citation:

{| class="wikitable"
|+ style="text-align: left;" | Data reported for 2014–2015, by region<ref name="Garcia 2005"/>
|-
! scope="col" | Year !! scope="col" | Africa !! scope="col" | Americas !! scope="col" | Asia & Pacific !! scope="col" | Europe
|-
! scope="row" | 2014
| 2,300 || 8,950 || ''9,325'' || 4,200
|-
! scope="row" | 2015
| 2,725 || ''9,200'' || 8,850 || 4,775
|}

Produces

Data reported for 2014–2015, by region[99]
YearAfricaAmericasAsia & PacificEurope
2014 2,3008,9509,3254,200
2015 2,7259,2008,8504,775

Note: The related summary attribute is obsolete, use the table caption to replace.

Colspan and rowspan

[edit]

It is possible to create cells that stretch over two or more columns. For this, one uses |colspan=n | content. Similarly, one can create cells that stretch over two or more rows. This requires |rowspan=m | content. In the table code, one must leave out the cells that are covered by such a span. The resulting column- and row-counting must fit.

Wikitext

{| class="wikitable" style="text-align: center;"
!col1
!col2
!col3
!col4
|-
!row1
| colspan="2" | A
<!-- column counting: cell 'B' can not exist -->
|C
|-
!row2
|AA
|BB
|CC
|-
!row3
|AAA
| rowspan="2" | BBB
|CCC
|-
!row4
|AAAA
<!-- row counting: cell 'BBBB' can not exist -->
|CCCC
|}

Produces

col1 col2 col3 col4
row1 A C
row2 AA BB CC
row3 AAA BBB CCC
row4 AAAA CCCC

In the code, the cell | colspan="2" | A spans two columns. In the next column, a cell expected to contain "B" does not exist.

Similar: in the code, cell | rowspan="2" | BBB spans two rows. A cell expected to contain "BBBB" does not exist.

Wikitext

{| class="wikitable"
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
<!-- column 3 of this row occupied by cell B (which is to the left) -->
|-
<!-- column 1 of this row occupied by cell A (above) -->
| C
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" | F
<!-- column 3 of this row occupied by cell F (to the left) -->
|-
| G
<!-- columns 2 and 3 of this row occupied by cell F (above) -->
|-
| colspan="3" style="text-align: center;" | H
<!-- columns 2 and 3 of this row occupied by cell H (to the left) -->
|}

Produces

Column 1Column 2Column 3
A B
C D
E F
G
H

Using rowspan=2 for cell G combined with rowspan=3 for cell F to get another row below G and F will not work, because all (implicit) cells would be empty.

Below is the same table with the order of the declared rows and cells shown in parentheses. The uses of rowspan and colspan are also shown.

Wikitext

{| class="wikitable"
|-
! Column 1<br>(row 1 cell 1) !! Column 2<br>(row 1 cell 2) !! Column 3<br>(row 1 cell 3)
|-
| rowspan="2" | A<br>(row 2 cell 1)<br><code>rowspan=2</code>
| colspan="2" style="text-align: center;" | B<br>(row 2 cell 2)<br><code>colspan=2</code>
|-
| C<br>(row 3 cell 1) <!-- column 1 occupied by cell A -->
| D<br>(row 3 cell 2)
|-
| E<br>(row 4 cell 1)
| rowspan="2" colspan="2" style="text-align: center;" |F<br>(row 4 cell 2)<br><code>rowspan=2 colspan=2</code>
|-
| G<br>(row 5 cell 1) <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" style="text-align: center;" | H<br>(row 6 cell 1)<br><code>colspan=3</code>
|}

Produces

Column 1
(row 1 cell 1)		Column 2
(row 1 cell 2)		Column 3
(row 1 cell 3)
A
(row 2 cell 1)
rowspan=2		 B
(row 2 cell 2)
colspan=2
C
(row 3 cell 1)		 D
(row 3 cell 2)
E
(row 4 cell 1)		 F
(row 4 cell 2)
rowspan=2 colspan=2
G
(row 5 cell 1)
H
(row 6 cell 1)
colspan=3

Although cell C is in column 2, C is the 1st cell declared in row 3, because column 1 is occupied by cell A, which was declared in row 2. Cell G is the only cell declared in row 5, because cell F occupies the other columns but was declared in row 4.

Table style

[edit]

A style attribute can apply to a table for it and its caption and cells, to a row for its cells, or to a cell. Adding a style to a column requires a template such as {{table alignment}} (for horizontal alignment of text).

To add style to the entire table, add the style attribute to the table start markup. In some cases, it may be better to use the style encapsulated in one of the predefined classes; see § Class.

Horizontal text alignment

[edit]

Text alignment (right/center/left) for the whole table (except the headers in a table using class="wikitable") can be done at the top line of the table:

{| class="wikitable" style="text-align: right;"
 ...
|}

Text alignment for a column can be done with {{table alignment}}.

Height

[edit]

The height of the whole table can be specified using standard CSS style properties on the table start markup:

{| class="wikitable" style="height: 14em;"
  . . .
|}

You may also specify the § height of individual rows, and if they add up to more than the table height you specified or if word wrapping increases row height, the table height you specified will be ignored and the table height increased as needed to accommodate all the rows (except on mobile where the bottom of the table will be cut off).

Borders

[edit]

For tables not using the recommended wikitable class (adds borders), plain table borders can be added to the table start markup with the border: thickness style color; style (e.g., border: 3px dashed red;).

If borders are added to cells and the double border look is undesirable, then replace the border-spacing style with border-collapse: collapse;. The wikitable class applies this style and borders too.

This example uses a solid (non-dashed), gray border that is one pixel wide:

Wikitext

{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
| [[File:Starred.svg |120px| center]]
| [[File:Star full.svg |120px| center]]
| [[File:Stargreen.svg |120px| center]]
|- style="text-align: center;"
| Red star || Orange star || Green star
|}

Produces

Left Center Right
Red starOrange starGreen star

Note the bottom-row texts are centered by style="text-align: center;" to match the centering of the stars in their cells.

As long as the File: specs omit the parameter |thumb they do not show the caption lines in the table (only during mouse-over). The border color darkgray matches typical tables or infoboxes in articles; however, it could be any color name (as in style="border: 1px solid darkgreen;") or use a hex-color (such as #DDCCBB).

Note: The related border, cellpadding, and cellspacing attributes are obsolete, use CSS to replace.

Float table left or right

[edit]

Two table classes floatleft and floatright (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. floatleft floats the table to the left and adjusts right margin. floatright does the opposite.

Wikitext

This paragraph is before the table. 
[[File:Starred.svg |120px|right]]
{| class="wikitable floatleft"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}

{| class="wikitable floatright"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}
... Lorem text after table

As it appears in a browser:

This paragraph is before the table.

Caption text
Header AHeader BHeader C
row 1 Arow 1 Brow 1 C
row 2 Arow 2 Brow 2 C
Caption text
Header AHeader BHeader C
row 1 Arow 1 Brow 1 C
row 2 Arow 2 Brow 2 C

Vestibulum sapien nisl, ornare auctor, consectetuer quis, posuere tristique, odio. Fusce ultrices ullamcorper odio. Ut augue nulla, interdum at, adipiscing non, tristique eget, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pede est, condimentum id, scelerisque ac, malesuada non, quam. Proin eu ligula ac sapien suscipit blandit. Suspendisse euismod. Ut accumsan, neque id gravida luctus, arcu pede sodales felis, vel blandit massa arcu eget ligula. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum. Donec convallis tincidunt urna.

Alternatively, you can use CSS to get the same result:

{| class="wikitable" style="float: left; clear: left; margin-right: 8px;"
{| class="wikitable" style="float: right; clear: right; margin-left: 8px;"

This paragraph is before the table.

Caption text
Header AHeader BHeader C
row 1 Arow 1 Brow 1 C
row 2 Arow 2 Brow 2 C
Caption text
Header AHeader BHeader C
row 1 Arow 1 Brow 1 C
row 2 Arow 2 Brow 2 C

Vestibulum sapien nisl, ornare auctor, consectetuer quis, posuere tristique, odio. Fusce ultrices ullamcorper odio. Ut augue nulla, interdum at, adipiscing non, tristique eget, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut pede est, condimentum id, scelerisque ac, malesuada non, quam. Proin eu ligula ac sapien suscipit blandit. Suspendisse euismod. Ut accumsan, neque id gravida luctus, arcu pede sodales felis, vel blandit massa arcu eget ligula. Aenean sed turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum. Donec convallis tincidunt urna.

Centering tables

[edit]

Note: Centered tables should generally be avoided in articles, per MOS:TABLELEFT. The guidance below applies primarily to other namespaces.

To center a table horizontally, use the margin: 1em auto; style, which applies 1em (equal to parent's font size) to the top and bottom, and automatic (split remainder equally) to the left and right sides of the table. Text does not flow around centered tables as it does for floated tables; that is, no text appears to either side:

Wikitext

Text before table...
{| class="wikitable" style="margin: 1em auto; border: none;"
|+ Centered table
|-
! Duis !! aute !! irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after table

As it appears in a browser:

Text before table...

Centered table
Duisauteirure
dolorin reprehenderitin voluptate velit
esse cillum doloreeu fugiat nullapariatur.

...text after table.

Tip: For Android Chrome, use:[note 2]

{| style="margin: 1em auto; border: none;"

Note: The related align attribute is obsolete, use CSS to replace.

Static ('sticky') headers

[edit]

Headers can be frozen so they are always at the top (or left) as one scrolls through a large table. See {{Sticky header}} and {{Sticky table start}}.

Nested tables

[edit]

Editors sometimes use headerless tables as an aid to content layout, especially where it is easier than the equivalent use of divs and CSS styling. For complex layouts, rowspan and colspan may be used, but again it is sometimes simpler and more maintainable to use nested tables.

Nested tables must start on a new line.

In the following example, five different tables are shown nested inside the cells of a sixth, main table. None has any header cells. Automatically, the two tables |A| and |B|B| are vertically aligned instead of the usual side-by-side of text characters in a cell. float is used to fix each of tables |C| and |D| to their own position within one cell of the table. This may be used for charts and schematics.

α cell2
NESTED
TABLE
 the original table again
A
B B
C
D

Wikitext

{| style="border: 1px solid black;"
| style="border: 1px solid black;" | &alpha;
| style="border: 1px solid black; text-align: center;" | cell2
{| style="border: 2px solid black; background: #ffffcc; color: inherit;" <!-- The nested table must be on a new line -->
| style="border: 2px solid darkgray;" | NESTED
|-
| style="border: 2px solid darkgray;" | TABLE
|}
| style="border: 1px solid black; vertical-align: bottom;" | the original table again
| style="border: 1px solid black; width: 100px" |
{| style="border: 2px solid black; background: #ffffcc; color: inherit;"
| style="border: 2px solid darkgray;" | A
|}
{| style="border: 2px solid black; background: #ffffcc; color: inherit;"
| style="border: 2px solid darkgray;" | B
| style="border: 2px solid darkgray;" | B
|}
| style="border: 1px solid black; width: 50px" |
{| style="border: 2px solid black; background: #ffffcc; color: inherit; float: left"
| style="border: 2px solid darkgray;" | C
|}
{| style="border: 2px solid black; background: #ffffcc; color: inherit; float: right"
| style="border: 2px solid darkgray;" | D
|}
|}

Column operations

[edit]

There are column and cell operations for width. See Help:Width of tables, columns, and cells.

There are also column, cell, and table operations for text alignment (right, left and center alignment). See Help:Table/Advanced#Column alignment. It is part of a much larger section of info on aligning text in individual table cells, or the table as a whole.

See also: {{table alignment}}. This template allows easy aligning of text in a column, or multiple columns.

To insert, remove, or rearrange whole columns, see Help:Creating tables#Move/delete row/column. This is much faster and easier to do in visual editing than in source editing.

If there are many year columns there is a fast way to rearrange them here: Help:Tables and locations#Put most recent year to left.

To sort some or all columns in a table see Help:Sortable tables.

Width

[edit]

This is a complex subject. Please see the main page:

Row operations

[edit]

Row style

[edit]

Row style properties (height, width, borders, text alignment, background color, bolding, italics, etc.) can be added after the row markup.

Here is an example increasing the height of the middle row. The top row has italic text. The last row has bold text and a yellow background. Either the word yellow can be used, or the hex-color (such as #FFFF00):

Wikitext

{| class="wikitable" 
|-
! Left !! Center !! Right
|- style="font-style: italic;"
| Top left || Top center || Top right 
|- style="height: 9em;" id="mid"
| Middle left || Middle center || Middle right 
|- style="font-weight: bold; background-color: yellow; color: inherit;"
| Bottom left || Bottom center || Bottom right 
|}

Produces

LeftCenterRight
Top leftTop centerTop right
Middle leftMiddle centerMiddle right
Bottom leftBottom centerBottom right

The row also contains an id attribute; this will be explained later in the section about linking directly to a row.

Row numbers

[edit]

Table rows may be numbered with the assistance of templates provided for the purpose. See Help:Sortable tables sections on row numbers, and these templates:

[edit]

You can link directly to a table's row, by including an id attribute on the row markup, whose value is the anchor for the link.

For example, you can add this:

|- id="mid"

and then link to it using The [[#mid|middle row]] is the tallest one. which produces:

The middle row is the tallest one.     (Click to try it out!) 

Cell operations

[edit]

Scope

[edit]

For headers in data tables, the col or row scope clearly identifies a header cell as applying to the cells below it in its column(s) or to the right in its row(s), respectively. These scopes help ensure a consistent experience for screen readers. When header relationships are unclear, this can cause accessibility issues, so the id and headers attributes are used (see MOS:DTT#Complex tables).

Note: Do not use the colgroup or rowgroup scopes (see MOS:DTAB).

The wikitable class applies general styling such as center-aligned, bold header cells with a gray background. The plainrowheaders class can be added to left-align the scoped row headers without bold, leaving the gray background to visually indicate headers.

Wikitext

{| class="wikitable plainrowheaders"
 |+ The table's caption
 ! scope="col" | Column header 1
 ! scope="col" | Column header 2
 ! scope="col" | Column header 3
 |-
 ! scope="row" | Row header 1
 | Cell 2 || Cell 3
 |-
 ! scope="row" | Row header A
 | Cell B || Cell C
|}

Produces

The table's caption
Column header 1 Column header 2 Column header 3
Row header 1 Cell 2Cell 3
Row header A Cell BCell C

Vertical alignment in cells

[edit]

By default, text is aligned to the vertical middle of the cell (2nd column in table below). CSS can be used to vertically align individual cells, or single rows.

Demo of vertical alignment of individual cells
Three
lines
of text		 No alignment Top-aligned Middle-aligned Bottom-aligned

Relevant wikitext:

| style="vertical-align: top" | Top-aligned
| style="vertical-align: middle" | Middle-aligned
| style="vertical-align: bottom" | Bottom-aligned

The example below illustrates the need for top alignment of a row.

Row header A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.

 Short text

To align the text to the top of each cell in the row, apply the style="vertical-align: top;" CSS to the row.

Wikitext

{| class="wikitable"
|- style="vertical-align: top"
! scope="row" | Row header
| A longer piece ...
| Short text
|}

Produces

Row header A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Short text

Documentation and more options for the CSS vertical-align property is here.

Note: The related valign attribute is obsolete, use CSS to replace.

Cell content indenting and padding

[edit]

The contents of a cell can be indented or padded on any side. Also, the text can be aligned. In the third row the text is aligned to the right. See the following examples.

Wikitext

{| class="wikitable"
|-
| Cell content that is not indented or padded
|-
| style="padding-left: 2em;" | <code>style="padding-left: 2em;"</code>
|-
| style="text-align: right; padding-right: 2em;" | <code>style="text-align: right; padding-right: 2em;"</code>
|-
| style="padding-top: 2em;" | <code>style="padding-top: 2em;"</code>
|-
| style="padding-bottom: 2em;" | <code>style="padding-bottom: 2em;"</code>
|-
| style="padding: 3em 5%;" | <code>style="padding: 3em 5%;"</code> {{space|4}} (Top and Bottom: 3em. Left and Right: 5%)
|-
| style="padding: 3em 4em 5%;" | <code>style="padding: 3em 4em 5%;"</code> {{space|4}} (Top: 3em. Left and Right: 4em. Bottom: 5%)
|-
| style="padding: 3%;" | <code>style="padding: 3%;"</code> {{space|4}} (Top, Right, Bottom, and Left: all 3%)
|-
| style="padding: 1em 20px 8% 9em;" | <code>style="padding: 1em 20px 8% 9em;"</code> {{space|4}} (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)
|}

Produces

Cell content that is not indented or padded
style="padding-left: 2em;"
style="text-align: right; padding-right: 2em;"
style="padding-top: 2em;"
style="padding-bottom: 2em;"
style="padding: 3em 5%;"      (Top and Bottom: 3em. Left and Right: 5%)
style="padding: 3em 4em 5%;"      (Top: 3em. Left and Right: 4em. Bottom: 5%)
style="padding: 3%;"      (Top, Right, Bottom, and Left: all 3%)
style="padding: 1em 20px 8% 9em;"      (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)

The padding shorthand property values relates to the sides of a box and can be seen as ordered by a 12-hour clock, starting at noon and going clockwise, in the following sense: "top" is associated with noon (i.e., "top" is 12 o'clock), "right" is 3 o'clock, "bottom" is 6 o'clock, and "left" is 9 o'clock). The values are ordered clockwise starting at noon: top → right → bottom → left (see this[note 3] footnote for an example with an explanation).

Similar shorthand properties exist, such as margin.

Note: The related cellspacing and cellpadding attributes are obsolete, use CSS to replace.

Individual cell borders

[edit]

The same § CSS used for tables can be used in cell markup to put a border around each cell:

Wikitext

{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:Starred.svg |120px]]
| style="border: 1px solid #777777;"|
[[File:Star full.svg |120px]]
| style="border: 1px solid #22AA55;"|<!-- greenish border -->
[[File:Stargreen.svg |120px]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}

Produces

Left Center Right

Red starOrange starGreen star

Only the image cells have individual borders, not the text. The lower hex-colors (e.g., #616161) are closer to black. Typically, all borders in a table would be one specific color.

Border styles

The border and border-style properties can accept the following values:

Value Cell border Additional notes
none style="border-style: none;"
solid style="border-style: solid;"
double style="border-style: double;"
dashed style="border-style: dashed;"
dotted style="border-style: dotted;"
ridge style="border: 5px ridge red;" 3D ridged border
groove style="border: 5px groove blue;" 3D grooved border
inset style="border: 5px inset yellow;" 3D inset border
outset style="border: 5px outset cyan;" 3D outset border
inherit style="border-style: inherit;" Inherit value from parent
initial style="border-style: initial;" Set to default value
Borders of a cell using border-top, border-right, border-bottom, border-left

Wikitext

{| 
! style="border-top: solid;" | <code>style="border-top: solid;"</code>
|-
| style="border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |<pre>border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;</pre>
|}

Produces

style="border-top: solid;"
border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;
Top, right, bottom, and left borders of a cell using style='border-style:'

To set the left, right, bottom, or top border of a single cell, one may use style='border-style:' which takes between 1 and 4 values, each of which is either none, solid, double, dotted, dashed, groove, ridge, inset, outset, inherit, or initial.

These values are ordered according to the § pattern described here. For instance, style="border-style: solid none solid none;" where the four parameters correspond respectively to the
     'border-style: top right bottom left;'
borders of the cell. For reasons described after this example, there are many ways to change the following wikitext that would not result in any changes to the table that is actually displayed.

Wikitext

{| class="wikitable"
|-
| Top_Left
<!-- border-style: top right bottom left; -->
| style="border-style: solid solid none none;" | Top_Center
| Top_Right
|-
| style="border-style: none none solid solid;" | Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: solid solid none none;" | Middle_Right
|-
| Bottom_Left
| style="border-style: none none solid solid;" | Bottom_Center
| Bottom_Right
|}

Produces

Top_Left Top_Center Top_Right
Middle_Left Middle_Center Middle_Right
Bottom_Left Bottom_Center Bottom_Right

Note, however, that in the following table, none of the central cell's (i.e., Middle_Center) borders are removed despite the attribute style="border-style: none none none none;":

Wikitext

{| class="wikitable"
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}

Produces

Top_LeftTop_CenterTop_Right
Middle_Left Middle_Center Middle_Right
Bottom_LeftBottom_CenterBottom_Right

This happens because class="wikitable" places a border (top, right, bottom, and left) around every cell in the table so that, for instance, there are actually two borders between the cells "Middle_Center" and "Middle_Right". So to remove the border between cells "Middle_Center" and "Middle_Right", it is necessary to remove both the right border of "Middle_Center" and the left border of "Middle_Right":

Wikitext

{| class="wikitable"
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
<!-- 'border-style: top right bottom left;' -->
| style="border-style: none none none none;" | Middle_Center
| style="border-style: none none none none;" | Middle_Right
<!-- In the above line, the three left-most "none" values can be replaced with "solid" (or other valid values) and there would be no change to the table that is displayed. Only the fourth value, which is Middle_Right's left border, needs to be "none". For example, the line above could be replaced with:
| style="border-style: solid solid solid none;" | Middle_Right
-->
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}

Produces

Top_LeftTop_CenterTop_Right
Middle_Left Middle_Center Middle_Right
Bottom_LeftBottom_CenterBottom_Right

To remove selected external borders of a table, both remove them from the adjacent cells and begin the whole table with: {| class="wikitable" style="border: none;".

Replacing {| class="wikitable" with {| style="border-collapse: collapse;" has the effect of removing all cell borders that would otherwise appear by default around every cell in the table. With this change, you must insert a single cell border between two adjacent cells rather than remove two cell borders.

Table cell templates

[edit]

See {{table cell templates}} for a large set of templates to configure text and color in cells in a standard way, producing stock output. For example: "Yes" ({{Yes}}), "No" ({{No}}), "—" ({{N/A}}), "N/A" ({{N/A|N/A}}), "?" ({{dunno}}), on colored backgrounds.

Template output for selected table cell templates
Template usageUsing templateWithout template
{{Yes}} YesYes
{{No}} NoNo
{{Dunno}} ??
{{N/A}} N/a—
{{N/A|N/A}} N/AN/A
{{n/a|n/a}} n/an/a

For example, see Comparison of text editors, which makes frequent use of table cell templates.

Tooltips

[edit]

You can add tooltips to columns by using the {{Tooltip}} template. Simply replace the column-title with {{Tooltip|Column title|The tool tip}}, which makes it appear like so: Column title. Use {{abbr}} (same format) for abbreviations (e.g., Pop).

Workarounds

[edit]

Scrolling tables

[edit]

See Help:Advanced table features § Scrolling tables and the following sections for scrolling, sticky headers, and combinations thereof.

Overflowing tables

[edit]

A wide table that overflow past the main content container can overlap UI elements, and a horizontal scrollbar displays at the bottom of the page. To fix this, wrap the table in a div with the noresize class, which makes the table horizontally scrollable within the main content area, per mw:Help:Tables.

Place the following div markup around the table:

<div class="noresize">
{|
...
|}
</div>

Caption is centered on non-mobile versions, so super wide tables on narrow screens can make it fully or partially hidden. Left align the caption so it has maximum visibility without needing to scroll to realize it exists, or break the table into smaller ones.

|+ style="text-align: left;" | Caption

Non-rectangular tables

[edit]

See Template:diagonal split header to split the content of specific cells.

Classes

[edit]

There are several other CSS classes, besides the basic class="wikitable", documented § above.

In the table start markup, instead of specifying inline CSS via the style attribute, styles can be applied through the class attribute. The style for this class can be specified in various ways:

  • in the software itself, per skin (e.g., sortable class)
  • collectively for all users of one wiki in MediaWiki:Common.css (e.g., on this and some other projects there is or was the wikitable class, later moved to shared.css)
  • separately per skin in MediaWiki:Monobook.css etc.
  • individually on one wiki in a user subpage
  • individually, but jointly for tables of the class concerned on all web pages, on the local computer of the user.

Instead of remembering table parameters, you just include an appropriate class. This helps keep table formatting consistent, and can allow a single change to the class to fix a problem or enhance the look of all the tables that are using it at once. For instance, this:

Wikitext

{| style="border-spacing: 2px;"
|+ Multiplication table
|-
! scope="col" | &times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|}

Produces

Multiplication table
× 1 2 3
1 123
2 246

Becomes this:

Wikitext

{| class="wikitable"
|+ Multiplication table
|-
! scope="col" | &times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|}

Produces

Multiplication table
× 1 2 3
1 123
2 246

Simply by replacing inline CSS for the table by class="wikitable". This is because the wikitable class in MediaWiki:Common.css contains a number of table.wikitable CSS style rules. These are all applied at once when you mark a table with the class. You can then add additional style rules if desired. These override the class' rules, allowing you to use the class style as a base and build up on it:

Wikitext

{| class="wikitable" style="font-style: italic; font-size: 120%; border: 3px dashed red;"
|+ Multiplication table
|-
! scope="col" | &times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|}

Produces

Multiplication table
× 1 2 3
1 123
2 246

Notice that the table retains the gray background of the wikitable class, and the headers are still bold and centered. But now the text formatting has been overridden by the local style= attribute; all of the text in the table has been made italic and 120% normal size, and the border is now a red dashed border.

Indenting tables

[edit]

While tables should not normally be indented, when their surrounding paragraphs are also indented, you can indent tables using margin-left.

To achieve the same indentation as a colon, use margin-left: 1.6em.

Wikitext

{| class="wikitable" style="margin-left: 1.6em;"
|-
! Header 1
! Header 2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}

Produces

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables on talk pages

[edit]

Only applying indentation before the table start markup is sufficient to indent the entire table.

:::{| class="wikitable"

Do not attempt to use colons for indentation anywhere within the rest of the table markup (not even at the beginning of a line), as that will prevent the MediaWiki software from correctly reading the table markup.

See also

[edit]

Note: See top of page for more links to table help pages.

Templates

[edit]

Some commonly used table templates using TemplateStyles:

Notes

[edit]
  1. ↑ Collapsible tables: the class collapsible prevents editing collapsed tables using the Visual editor; use mw-collapsible instead. See here for further details.
  2. ↑ border: none; to avoid an empty column in tables narrower than the browser window in Android Chrome.
  3. ↑ In style="padding: 3em 4em 5%;", the value 4em is used for both the "left" padding and the "right" padding, so the order going clockwise is: top (3em) → right [and hence also left] (4em) → bottom (5%); there is no "→ left" in this case because the "left" padding has already been defined. In style="padding: 3em 5%;", the value 3em is used for both the "top" and "bottom" padding while the value 5% is used for both the "left" and "right" padding, so the order going clockwise is: top [and hence also bottom] (3em) → right [and hence also left] (5%); there is no "→ bottom" nor is there "→ left" in this case because the "bottom" and "left" padding have already been defined. The same reasoning also applies to style="padding: 1em 20px 8% 9em;", and style="padding: 3%;".

References

[edit]
[edit]

Wikimedia sister projects

[edit]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Help:Table&oldid=1383146157"