GeezerVison

This help page is a how-to guide. It explains concepts or processes used by the Wikipedia community. It is not one of Wikipedia's policies or guidelines and may reflect varying levels of consensus.

Tables can be used as formatting instrument, but consider using a multi column list instead.

By default, text is aligned to the left of data cells.

By default, text is aligned to the center of header cells.

All of the above is true in both desktop and mobile view.

The alignment of header text in tables with class=wikitable stays centered regardless of global right or left text alignment via style=text-align:VALUE on the top line of table wikitext.

Header text alignment in tables without class=wikitable follows the global text alignment of the table.

Text alignment set in individual cells overrides everything else.

{| class="wikitable" style="text-align: right;"
! Heading
|-
| 432.1{{0|00}}
|-
| 43.21{{0|0}}
|-
| 4.321
|}

This method wraps two or more blocks side by side in rows on wide screens, and unwraps responsively on narrow screens by stacking them vertically. These blocks can contain a table or other elements.

Example using Template:Flexbox wrap. Aligned to the top. It adds a 1em gap between blocks. The flex=none parameter value disables the grow and shrink behavior to maintain a table's or image's full dimensions.

{{Flexbox wrap|start|flex=none}}
<!-- First table -->
{{Flexbox wrap|break|flex=none}}
<!-- Second table -->
{{Flexbox wrap|end}}

Example on a table and image.

Caption text

Header text	Header text	Header text
Example	Example	Example
Example	Example	Example
Example	Example	Example

To wrap long text, add the max-width: 30em; style (or a similar value) to the table that needs it, which allows it to narrow further on smaller screens. To avoid values that are too small, check the layout in mobile view (click "Mobile view" at the bottom).

Example on two layout tables, each with a description and image. Each table uses max-width: 310px; to responsively match its image width in order to wrap the description. For accessibility reasons, the tables use the role="none" attribute because they are for layout.

Convert a US list/table to a state-by-state data map. With examples and step-by step instructions. Example:

Simple map below using another method. See its talk page for info.

Note: Do not use display: inline-grid; or other non-table display values on a table, otherwise it can cause accessibility issues. Do not use display: inline-table; on a table, as it can break the responsive scrolling behavior on narrow screens (e.g., horizontal scrolling on tables wider than mobile screens). Do not use any display property values on a div wrapper for the same responsive issues just mentioned.

Note: Blocks are separated by a gap. Avoid adding margin or padding styles to the blocks because they can shift content in undesirable ways. The wikitable class adds 1em of top and bottom margin and 0 left and right margin to tables (margin: 1em 0;) to separate them from other elements and keep them flush left and right. A larger horizontal gap on a table (e.g., margin-right: 1em;) reduces the visible width of that table, most noticeable on mobile portrait with wider tables.

{{Mw-datatable}}{{Table alignment}}
{| class="wikitable" role="none"
| '''Note US wealth concentration (<span style="background-color: #9EFF9E; color: black;">green</span>) 1989 Q3 to 2026 Q2.'''
|-
|
{{Flexbox wrap|start|flex=none}}
{| class="wikitable mw-datatable defaultright col1left" style="margin: 0;"
|+ {{Screen reader-only|Wealth percentile band from 1989 Q3 to 2026 Q2}}
...
|}
{{Flexbox wrap|break|flex=none}}
<!-- Second nested table -->
{{Flexbox wrap|break|flex=none}}
<!-- Third nested table -->
{{Flexbox wrap|end}}
|}

A whole table can be placed within a scrolling div so that new table lines appear on the screen as old table lines disappear. See MOS:SCROLL, and Help:Scrolling list, and this article discussion.

<div style="height:7em; overflow:auto; border:2px solid red;">
{| class=wikitable
|-
| abc || def || ghi
|- style="height: 100px;"
| jkl || style="width: 100px;" | mno || pqr
|-
| stu || vwx || yz
|}
</div>

<div style="width:12em; overflow-x:auto; border:2px solid lime;">
{| class=wikitable style="width:25em"
|-
| abc || def || ghi
|- 
| jkl || style="height: 70px;" | mno || pqr
|-
| stu || vwx || yz
|}
</div>

History: See most recent Village Pump discussion. And other archived discussions: 1. 2. 3. 4. 5. See Phab:T42763. See also: Meta: Community Wishlist Survey 2022/Reading/floating table headers and meta:Community Wishlist Survey 2021/Reading/Enable sticky table headers.

Template:Sticky header creates a sticky scrolling table in the sense of the vertical scrollbar for the whole page. When you scroll the page the table headers stay visible when the table goes beyond the top of the screen. See also: Template:Sticky table start. It has an option for side sticky headers too. It puts the table in a scrollbox, and the scrollbars are part of that box.

See {{Sticky header}} examples below:

See list of articles transcluding {{sticky header}}. See transclusion count.

Note: Sticky left-side row headers do not work correctly if table is inside a collapsible show/hide box. See example. ("Timeshifter table" section)

See: Template:Sticky table start. It incorporates the old Covid CSS, and it is easier to use. See Special:WhatLinksHere/Template:Sticky table start for examples.

There are several advanced scrolling tables (with row and column headers that stay visible and sticky while scrolling) in COVID-19 pandemic by country and territory and in COVID-19 pandemic deaths. The scrolling and sticky headers work in cell phones, too. Widest scrolling tables are on top of the list below. Narrow your browser window until you see a horizontal scroll bar. Drag it left and right to see the sticky row headers that stay visible.

• Template:2021 2nd half. Monthly cumulative COVID-19 death totals by country
• Template:2022 first half. Monthly cumulative COVID-19 death totals by country

A totally blind screen reader user noted in a discussion here that the scrolling tables in the related article (COVID-19 pandemic deaths) were not a problem.

These scrolling tables linked below with top/side sticky headers are also automatically updated. Narrow browser window to see sticky headers on the side.

• Template:COVID-19 pandemic death rates
• Template:COVID-19 vaccination data
• Template:COVID-19 pandemic death rates.
• Template:COVID-19 pandemic death rates by country.

See discussion:

• Template talk:COVID-19 pandemic death rates#Automation of updates.
• Template talk:COVID-19 vaccination data#Automation of updates to this template.

A table can be put in a template. For example, see this list of life expectancy table template subpages. You can search for template subpages:

• Special:PrefixIndex - choose the template namespace.

{{Excerpt}} is the simplest tool for transcluding a table that is not in a template. Go there for many options. The simplest method:

{{Excerpt|Page source of table|Section with the table|this=This table is}}

It transcludes the table to wherever it is placed. It adds the following indented note above it in italics. The page section is linked, and there is an edit link for the source page:

This table is an excerpt from Page source of table § Section with the table. [edit]

A hidden note <!-- NOTE --> just above the transcluded table is helpful. Such as:

Table below is currently transcluded from here: https://en.wikipedia.org/wiki/Page_source_of_table#Section_with_the_table. If the source article or section name is changed, then the transclusion code below must also be changed.

A hidden note at the source section is helpful too. Such as:

Table below is transcluded into another page: https://en.wikipedia.org/wiki/Page_with_transcluded_table#Section_with_the_table. Nothing needs to be added here for this to work. As long as the table remains in its own section, and that section name remains the same, then the transclusion works. If the section name here changes, then please change it in the {{excerpt}} template there.

All broken excerpts are automatically tracked at Category:Articles with broken excerpts and regularly fixed.

See Help:Sortable tables for details of how to make sortable tables. Tables can be made sortable by adding class="wikitable sortable" to the top line of the table wikitext. Individual columns can then be excluded from sorting with class=unsortable in the lowest header cell. Note: that data-sort-type=VALUE must go in the header cell with the sorting icon. That will be the lowest header cell. (See Help:Sortable tables § Forcing a column to have a particular data type).

Classes can also be used to collapse tables, so they are hidden by default. Use the class mw-collapsible to enable collapsing behaviour. Collapsible tables can be sortable, too, by also including the sortable class (see § Sortable tables). By default, a collapsible table begins expanded. To change this, add the additional class mw-collapsed. Alternatively, you can add autocollapse, instead of mw-collapsed, which will automatically collapse the table if two or more collapsible elements are present on the page.

Note: Previous versions of this article recommended the collapsible class, but mw-collapsible is now preferred. It is a feature of the MediaWiki software, not a local customization, and can be used to make any element collapsible, not just tables. mw-collapsible also does not require a header row in the table, as collapsible did. Tables will show the "[hide]" / "[show]" controls in the first row of the table (whether or not it is a header row), unless a table caption is present.(see § Tables with captions)

Example with a header row

{| class="wikitable mw-collapsible mw-collapsed"
|-
! Header
|-
| Content that starts hidden
|-
| More hidden content
|}

Examples without a header row

{| class="wikitable mw-collapsible"
|-
| First row is always visible
|-
| Content that starts visible
|}

{| class="wikitable mw-collapsible mw-collapsed"
|-
| First row is always visible
|-
| Other rows start hidden
|}

Tables with captions

Tables with captions will collapse to the table caption. The header will not be visible when collapsed. Use {{nowrap}} to keep the caption from being fit into a tiny vertical column when the table is collapsed.

{| class="wikitable mw-collapsible"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts visible
|-
| More visible content
|}

Starting off collapsed:

{| class="wikitable mw-collapsible mw-collapsed"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts hidden
|-
| More hidden content
|}

Sorting and collapsing

It is possible to collapse a sortable table. To do so, you need to use this code:

class="wikitable sortable mw-collapsible"

For example:

{| class="wikitable sortable mw-collapsible"
|+ Sortable and collapsible table
|-
! scope=col | Alphabetic
! scope=col | Numeric
! scope=col | Date
! scope=col class=unsortable | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4.2 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}

If you want the table to default to collapsed state, use the code

{| class="wikitable sortable mw-collapsible mw-collapsed"

in place of

{| class="wikitable sortable mw-collapsible"

Note: For usage examples, etc. go to {{row hover highlight}}.

To highlight rows upon hover, add {{row hover highlight}} (or its alias, {{mw-datatable}}) just above the table wikitext.

This enables use of class=mw-datatable and class=hover-highlight. Both add a light blue highlight when you hover your cursor over a table row. class=mw-datatable also makes the background of the non-header cells white. It does not override existing background colors set for cells or rows. (class=wikitable produces a light gray background for data cells.)

Background colors are common in table cells. In many sports articles for example. See here. For the accessibility reasons stated in WP:COLOR, information should not be communicated by the use of color alone.

Two ways of specifying color of text and background for a single cell are as follows:

{|
|-
| style="background-color: red; color: white;"|abc
| def
| style="background-color: red;"|<span style="color: white;">ghi</span>
| jkl
|}

Like other parameters, colors can also be specified for a whole row or the whole table; parameters for a row override the value for the table, and those for a cell override those for a row.

There is no easy way to specify a color for a whole column: each cell in the column must be individually specified. Tools can make it easier.

{| style="background-color: yellow; color: green;"
|-
| stu || style="background-color: silver;" | vwx || yz
|- style="background-color: red; color: white;"
| stu || style="background-color: silver;" | vwx || yz
|-
| stu || style="background-color: silver;" | vwx || yz
|}

To force a cell to match one of the default colors of the class=wikitable template, use style="background-color:#EAECF0;"    for the darker header, and style="background-color:#F8F9FA;"    for the lighter body. #A2A9B1 is the wikitables border color.

• Help:Table for general information about using tables. It also has many links in §§ See also​ and External links, which are not duplicated here.