View source for Help:Table/Advanced

{{Short description|How to create and use tables in markup}}
{{Table help}}
{{Wikipedia how to}}
{{shortcut|H:Table/A}}
{{Wiki markup}}

Tables can be used as formatting instrument, but consider using a [[Help:List#Multi-column lists|multi column list]] instead.

== Horizontal alignment in cells ==
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 '''''<code>class=wikitable</code>''''' stays centered regardless of global right or left text alignment via '''''<code>style=text-align:VALUE</code>''''' 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.

=== Aligning text in header cells versus other cells ===
'''''Note:''' For vertical alignment of text see: [[Help:Table#Vertical alignment in cells]].''

If there is no global text alignment set in the top line of the table wikitext, then all text is left aligned, except for header cells which are default center aligned.

Only in tables with '''''<code>class=wikitable</code>''''' does the header cell text not follow the global text alignment set in the top line of the table wikitext.

When using '''''<code>class=wikitable</code>''''' header text now stays centered in both desktop and mobile view unless specifically changed per header cell. This is true wherever the header row is located (top, bottom, middle). Global text alignment for non-header cells is done by putting '''''<code>style=text-align:VALUE</code>''''' in the top line of the table wikitext. See example in the next section.

=== Aligning the data in data columns to the right ===

Both tables below use '''''<code>class=wikitable</code>'''''
The table to the right also aligns the text and data in all cells (except header cells) to the right.

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
{| class=wikitable
|+ Basic table
|-
! Header !! Header !! Header
|-
| Text || data 12 || data 12
|-
| Text || data 123 || data 123
|-
| Text || data 1234 || data 1234
|}
</div>

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
{| class=wikitable style=text-align:right
|+ style=text-align:right
|-
! Header !! Header !! Header
|-
| Text || data 12 || data 12
|-
| Text || data 123 || data 123
|-
| Text || data 1234 || data 1234
|}
</div>

If most columns consist of data cells, then you might choose to align the data to the right. It is easy. <br>
Just add <code>style=text-align:right</code> to the top line of the wikitext for the table:
:<code>{| class=wikitable style=text-align:right</code>
or
:<code>{| class="wikitable sortable" style=text-align:right</code>
and so on.

=== Decimal point alignment ===

There is no easy way to align a column of numbers so that the decimal points align. See multiple ways below.

One way to align columns of numbers at the decimal point is to use two columns, with the first right-justified and the second left-justified.

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| style="border-collapse: collapse;"
| style="text-align: right;" | 432 || .1
|-
| style="text-align: right;" | 43 || .21
|-
| style="text-align: right;" | 4 || .321
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| style="border-collapse: collapse;"
| style="text-align: right;" | 432 || .1
|-
| style="text-align: right;" | 43 || .21
|-
| style="text-align: right;" | 4 || .321
|}
</div>

If the column of numbers appears in a table with cell padding or cell borders, you can still align the decimal points without an unsightly gap in the middle, by forcing the border and padding between those two columns off.

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| class=wikitable
!colspan=2| Heading
|-
| style="text-align:right; border-right:none; padding-right:0;" | 432
| style="text-align:left;  border-left: none; padding-left: 0;" | .1
|-
| style="text-align:right; border-right:none; padding-right:0;" | 43
| style="text-align:left;  border-left: none; padding-left: 0;" | .21
|-
| style="text-align:right; border-right:none; padding-right:0;" | 4
| style="text-align:left;  border-left: none; padding-left: 0;" | .321
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| class=wikitable
!colspan=2| Heading
|-
| style="text-align:right; border-right:none; padding-right:0;" | 432
| style="text-align:left;  border-left: none; padding-left: 0;" | .1
|-
| style="text-align:right; border-right:none; padding-right:0;" | 43
| style="text-align:left;  border-left: none; padding-left: 0;" | .21
|-
| style="text-align:right; border-right:none; padding-right:0;" | 4
| style="text-align:left;  border-left: none; padding-left: 0;" | .321
|}
</div>

Or alternatively the {{tl|decimal cell}} template can be used:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| class=wikitable
! colspan=2 |Heading
|-
| {{decimal cell|432.1}}
|-
| {{decimal cell|43.21}}
|-
| {{decimal cell|4.321}}
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| class=wikitable
!colspan=2 |Heading
|-
| {{decimal cell|432.1}}
|-
| {{decimal cell|43.21}}
|-
| {{decimal cell|4.321}}
|}
</div>

Using two columns like this does have the disadvantage that searching the web page (either with a browser or a search engine) will usually not be able to find text that straddles the column boundary.

Also, if the table has cell ''spacing'' (and thus <code>border-collapse=separate</code>), meaning that cells have separate borders with a gap in between, that gap will still be visible.

A cruder way to align columns of numbers is to use a [[figure space]] <code>&amp;#8199; or &amp;#x2007;</code>, which is intended to be the width of a numeral, though is font-dependent in practice:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="html">
{|
| 432.1
|-
| &#8199;43.21
|-
| &#8199;&#8199;4.321
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{|
| 432.1
|-
| &#8199;43.21
|-
| &#8199;&#8199;4.321
|}
</div>

More companions in this line are: [[whitespace character#Unicode|punctuation space]] ({{Code|&#x2008;|html}}) to substitute a period or a comma, {{Code|&minus;|html}} instead of the easily available on the typewriter&#x27;s keyboard [[dash|hyphen-dash]] &ndash; this is the same width as the plus sign, also [[figure dash]] possibly the most useful for telephone numbers which you obviously will not find on Wikipedia.

When using [[OpenType]] fonts one may also alternate between {{Code|font-variant-numeric:tabular-nums|css}} and {{Code|font-variant-numeric:proportional-nums|css}} &ndash; this is especially visible in the kerning of [[Arabic digit]] &lang;1&rang;. In the standard browser sans-serif fonts &lang;1&rang; occupies the same width as other digits, ie. works as if {{Code|font-variant-numerals:tabular-nums|css}} was turned on.

Some may find {{Tl|0}} useful for the alignment.

As a last resort, when using pre-formatted text, you can dispense with the table feature entirely and simply start the lines with a space, and put spaces to position the numbers—however, there should be a good reason to use pre-formatted text in an article:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext (just spaces!):'''
<syntaxhighlight lang="text">
 432.1
  43.21
   4.321
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
 432.1
  43.21
   4.321
</div>

=== Column alignment ===
{{tl|Table alignment}} can be used to align the cells in a whole column without adding code to each cell. For example, left aligning the first column, and  center aligning the fourth column. And default aligning all other cells to the right:
:<syntaxhighlight lang=wikitext>
{{Table alignment}}
{| class="wikitable sortable col1left col4center defaultright"
</syntaxhighlight>

Place <code><nowiki>{{Table alignment}}</nowiki></code> just before the table and then add some classes to the table.

{| class="wikitable"
! classname
! Purpose
|-
| <code>defaultleft</code> || Align all table cells left by default
|-
| <code>defaultcenter</code> || Align all table cells center by default
|-
| <code>defaultright</code> || Align all table cells right by default
|-
| <code>col''N''left</code> || Align the cells in column ''N'' left, where N is a number
|-
| <code>col''N''center</code> || Align the cells in column ''N'' center, where N is a number
|-
| <code>col''N''right</code> || Align the cells in column ''N'' right, where N is a number
|}

The "'''col'''" classes never effect the header cells. 

The "'''default'''" classes also effect the header cells if wikitable class is not used. With the wikitable class header cell content is always centered unless individually adjusted. 

See template for more info, limitations, examples.

=== Aligning the text in the first column to the left ===

[[Template:Table alignment]] (see previous section) will not work on columns of row headers. There are some other limitations listed at [[Template:Table alignment]]. In these cases you can try the following method for the first column only. 

This can be done in the wikitext source editor. In [[Special:Preferences#mw-prefsection-editing|editing preferences]] check the box labeled: "enable the editing toolbar. This is sometimes called the '2010 wikitext editor'."

In the table section click "edit source" (wikitext editing). Click on "Advanced" in the editing toolbar. Then click on the "search and replace" icon on the right. In the popup form check the box for "Treat search string as a regular expression".

Fill in the "Search for" box with <code>(\|-\n\|)</code> <br>
Fill in the "replace with" box with
:<code>$1style=text-align:left|</code>
Then click "Replace all". All the text in the first column will be aligned to the left of their cells.

'''If for some reason those cells are header cells,''' then fill in the "Search for" box with
:<code>(\|-\n\!)</code>
Note the exclamation point for a header cell. Fill in the "replace with" box with
:<code>$1style=text-align:left|</code>
Then click "Replace all".

== Side by side tables ==
'''''Note:''' See also [https://en.wikipedia.org/w/index.php?title=Together_Again_(Janet_Jackson_song)&oldid=1235924258#Charts this version] of [[Together Again (Janet Jackson song)#Charts]]. It uses {{t|col-begin}}, {{t|col-2}}, {{t|col-end}}.''

You can place two or more tables side by side. But the tables must wrap (one dropping below the other) in narrow screens if horizontal scrolling is to be avoided. Narrow your browser window to see the tables below wrap. This works in mobile view too. Click on "mobile view" at the bottom of any Wikipedia page. These tables are adapted excerpts from versions of [[Iceland men's national handball team]]. Many sport articles have side by side tables.

<div style=display:inline-grid>
{{Static row numbers}}
{| class="wikitable sortable static-row-numbers" border=1 style=text-align:right
|+ Total number of matches played in official competitions only.
|-
!Player
!Matches
!Goals
|-
|style=text-align:left|[[Guðmundur Hrafnkelsson]]
|'''407'''
|0
|-
|style=text-align:left|[[Guðjón Valur Sigurðsson]]
|'''364'''
|1,875
|}
</div>
<div style=display:inline-grid>
{{Static row numbers}}
{| class="wikitable sortable static-row-numbers" border=1 style=text-align:right
|+ Total number of goals scored in official matches only.
|-
!Player
!Goals
!Matches
!Average
|-
|style=text-align:left|[[Guðjón Valur Sigurðsson]]
|'''1,875'''
|364
|5.15
|-
|style=text-align:left|[[Ólafur Stefánsson]]
|'''1,570'''
|330
|4.76
|}
</div>

Here is the relevant wikitext below. More info [https://www.w3schools.com/jsref/prop_style_display.asp here]. A blind editor who uses a [[screen reader]] says [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AManual_of_Style%2FAccessibility&diff=1196667296&oldid=1196634188 this method is OK]. 

<syntaxhighlight lang=wikitext>
<div style=display:inline-grid>
--Table--
</div>
<div style=display:inline-grid>
--Table--
</div>
</syntaxhighlight>

The code box below was created by adding the same div around the whole [[mw:Extension:SyntaxHighlight|syntaxhightlight]] box: 

<div style=display:inline-grid>
<syntaxhighlight lang=wikitext>
<div style=display:inline-grid>
--Table--
</div>
<div style=display:inline-grid>
--Table--
</div>
</syntaxhighlight>
</div>

Note that the space between the above handball tables happens because <nowiki></div></nowiki> is on a line by itself. If you want no space use this:
:<nowiki></div><div style=display:inline-grid></nowiki>

<code><nowiki>style=display:inline-grid</nowiki></code> can not be added within the table wikitext. It must be added outside the table wikitext. This is because the table captions will not be correctly placed in mobile portrait view, or other narrow mobile screens, when the tables wrap. This is especially noticeable if the caption is longer. In that case when one table drops below the other, then the caption will be severely wrapped above only the first column of the table.

== Side by side tables/images ==

You can add images to the mix too. Add '''''<code>vertical-align:top;</code>''''' to align an item to the top. See '''[https://www.w3schools.com/cssref/pr_pos_vertical-align.asp CSS vertical-align property]''' for other options. The tables and images will wrap depending on screen width. Narrow your browser window to see. For example:
*<code><nowiki><div style="display:inline-grid; vertical-align:top;"></nowiki></code>

<div style="display:inline-grid; vertical-align:top;">
{| class=wikitable
|+Table 1
|-
! Name
! Color
|-
|Fred
|Orange
|-
|Bob
|Green
|-
|Lindy
|Yellow
|}
</div>
<div style="display:inline-grid; vertical-align:top;">
[[File:New-York-Jan2005.jpg|200px|thumb|none|New York City]]
</div>
<div style="display:inline-grid; vertical-align:top;">
{| class=wikitable
|+Table 2
|-
! Animal
! State
|-
|Raccoon
|Maine
|-
|Whale
|Alaska
|-
|Manta Ray
|Florida
|}
</div>
<div style="display:inline-grid; vertical-align:top;">
[[File:Gold star on blue.gif]]
</div>

Add '''''<code>vertical-align:bottom;</code>''''' to align an item to the bottom. You can choose the alignment for each item. Note the star aligned to the bottom.

<div style="display:inline-grid; vertical-align:top;">
{| class=wikitable
|+Table 1
|-
! Name
! Color
|-
|Fred
|Orange
|-
|Bob
|Green
|-
|Lindy
|Yellow
|}
</div>
<div style="display:inline-grid; vertical-align:top;">
[[File:New-York-Jan2005.jpg|200px|thumb|none|New York City]]
</div>
<div style="display:inline-grid; vertical-align:top;">
{| class=wikitable
|+Table 2
|-
! Animal
! State
|-
|Raccoon
|Maine
|-
|Whale
|Alaska
|-
|Manta Ray
|Florida
|}
</div>
<div style="display:inline-grid; vertical-align:bottom;">
[[File:Gold star on blue.gif]]
</div>

You can add '''indentation''' by adding margin styling to the first div:

*<code><nowiki><div style="display:inline-grid; vertical-align:top; margin-left:4em;"></nowiki></code>

<div style="display:inline-grid; vertical-align:top; margin-left:4em;">
{| class=wikitable
|+Table 1
|-
! Name
! Color
|-
|Fred
|Orange
|-
|Bob
|Green
|-
|Lindy
|Yellow
|}
</div>
<div style="display:inline-grid; vertical-align:top;">
[[File:New-York-Jan2005.jpg|200px|thumb|none|New York City]]
</div>
<div style="display:inline-grid; vertical-align:top;">
{| class=wikitable
|+Table 2
|-
! Animal
! State
|-
|Raccoon
|Maine
|-
|Whale
|Alaska
|-
|Manta Ray
|Florida
|}
</div>
<div style="display:inline-grid; vertical-align:bottom;">
[[File:Gold star on blue.gif]]
</div>

These tables below wrap better with '''display:inline-table;''' instead of '''display:inline-grid;'''

<div style="display:inline-table; vertical-align:top; width:310px;">
{| class=wikitable
|'''[[Commons:File talk:Template map of US states and District of Columbia.svg/Instructions|Convert a US list/table to a state-by-state data map. ]]''' With examples and step-by step instructions. Example:
|-
|[[File:Map of US minimum wage by state.svg|thumb|310px|none|See: [[List of US states by minimum wage]].]]
|}
</div>
<div style="display:inline-table; vertical-align:top; width:310px;">
{| class=wikitable
|Simple map below using another method. See '''[[Commons:File talk:Medicaid expansion map of US. Affordable Care Act.svg|its talk page]]''' for info.
|-
|[[File:Medicaid expansion map of US. Affordable Care Act.svg|thumb|310px|none|[[Medicaid coverage gap]] of US [[Affordable Care Act]].]]
|}
</div>

Tables and images can also be '''floated to the right''' by adding '''float:right;'''
<div style="display:inline-table; vertical-align:top; float:right;">
[[File:Female incarceration rates by country and US state.gif|thumb|none|upright=0.5|Female incarceration rates by country and US state.]]
</div>
<div style="display:inline-table; vertical-align:top; float:right;">
[[File:World incarceration rates if every U.S. state were a country.png|thumb|none|upright=0.5|World incarceration rates by country and US state.]]
</div>

See example to the right from '''[https://en.wikipedia.org/w/index.php?title=List_of_U.S._states_and_territories_by_incarceration_and_correctional_supervision_rate&oldid=1235102187#U.S._states_compared_to_countries this version]''' of [[List of U.S. states and territories by incarceration and correctional supervision rate]].

<syntaxhighlight lang=wikitext highlight=1,4>
<div style="display:inline-table; vertical-align:top; float:right;">
[[File:Female incarceration rates by country and US state.gif|thumb|none|upright=0.5|Female incarceration rates by country and US state.]]
</div>
<div style="display:inline-table; vertical-align:top; float:right;">
[[File:World incarceration rates if every U.S. state were a country.png|thumb|none|upright=0.5|World incarceration rates by country and US state.]]
</div>
</syntaxhighlight>

{{clear}}

== Scrolling tables ==
{{anchor|Scrolling tables|scrolling tables}}
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 [[Talk:COVID-19 pandemic deaths/Archive 1#Scrolling versus expanded_tables|this article discussion]]. 

===Vertical scrolling table===
<div style="display:inline-table;">
<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>

<div style="display:inline-table; border:">
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight></div>

===Horizontal scrolling table===
Adding {{code|-x}} to {{code|overflow:auto}} → {{code|overflow-x:auto}} forces overflowing table data to fit within page's width margin or otherwise predetermined wiki markup.

<div style="display:inline-table;">
<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></div>

<div style="display:inline-table;">
<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight></div>

== Tables with sticky headers ==

:'''''History:''' See [[Wikipedia:Village pump (technical)/Archive 208#Vector 2022. Sticky page title covers top 2 lines of sticky table headers|most recent Village Pump discussion]]. And other archived discussions: [[Wikipedia:Village pump (technical)/Archive 206#Vertical scrollable table with sticky headers|1.]] [[Wikipedia talk:Reliable sources/Perennial sources/Archive 3#Technical idea: make the header row of the table sticky|2.]] [[Help talk:Table#Scrolling tables and sticky headers|3.]] [[Help talk:Table/Archive 8#Sticky table headers?|4.]] [[Wikipedia:Village pump (technical)/Archive 170#Sticky table headers|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]].''

A 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 '''[[Template:Sticky header]]''' for examples, more info, and specialized cases. 

<div style="display: inline-grid; vertical-align:top;">
{{sticky header}}
{| class="wikitable sortable sticky-header"
|+ Caption
|-
! Color !! A !! B
! class="unsortable" | C
|- class=sorttop
| '''Max''' || 10 || 11 || 12
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}
</div>
<div style="display: inline-grid; vertical-align:top;">
{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ Caption
|-
! rowspan=2 | Color
! colspan=3 | Data
|-
! A !! B
! class="unsortable" | C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Max''' || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}
</div>

See [[Special:WhatLinksHere/Template:Sticky header|list of articles]] transcluding {{tlc|sticky header}}. See [https://templatecount.toolforge.org/index.php?lang=en&namespace=10&name=Sticky_header#bottom transclusion count].

== Scrolling tables with sticky column and row headers ==
'''''Note:''' Sticky left-side row headers do not work correctly if table is inside a [[Template:Collapse top|collapsible show/hide box]]. See [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk:WikiProject_Tennis&oldid=1232355612#Timeshifter_table example]. ("Timeshifter table" section)''<br>

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:2020 monthly cumulative COVID-19 death totals by country]]
*[[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 '''[[Talk:COVID-19 pandemic deaths/Archive 1#Scrolling versus expanded tables|here]]''' that the scrolling tables in the related article ([[COVID-19 pandemic deaths]]) were not a problem.

== Automatically updated scrolling tables with sticky headers ==

These two scrolling tables with row/column sticky headers are also automatically updated:
*[[Template:COVID-19 pandemic death rates]] 
*[[Template:COVID-19 vaccination data]] 
See: 
*[[Template talk:COVID-19 pandemic death rates#Automation of updates]]. 
*[[Template talk:COVID-19 vaccination data#Automation of updates to this template]].

== Sortable tables ==
{{anchor|Sortable|Sorting|reason=pld section names}}

{{Main|Help:Sortable tables|mw:Help:Sortable tables}}

See [[Help:Sortable tables]] for details of how to make sortable tables. Tables can be made sortable by adding <code>class="wikitable sortable"</code> to the top line of the table wikitext. Individual columns can then be excluded from sorting with <code>class=unsortable</code> in the lowest header cell. '''Note''': that <code>data-sort-type=''VALUE''</code> 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|Help:Sortable tables § Forcing a column to have a particular data type]]).

== Collapsible tables ==
{{see also|Help:Collapsing#Collapsible tables|mw:Manual:Collapsible elements}}

Classes can also be used to collapse tables, so they are hidden by default. Use the class {{nowrap|<code>mw-collapsible</code>}} to enable collapsing behaviour. Collapsible tables can be sortable, too, by also including the <code>sortable</code> class {{See below|{{section link||Sortable tables}}}}. By default, a collapsible table begins expanded. To change this, add the additional class {{nowrap|<code>mw-collapsed</code>}}. Alternatively, you can add <code>autocollapse</code>, instead of {{nowrap|<code>mw-collapsed</code>}}, 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 <code>collapsible</code> class, but {{nowrap|<code>mw-collapsible</code>}} 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. {{nowrap|<code>mw-collapsible</code>}} also does not require a header row in the table, as <code>collapsible</code> did. Tables will show the {{nowrap|"[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 below|{{section link||Tables with captions}}}}

'''Example with a header row'''

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable mw-collapsible mw-collapsed"
|-
! Header
|-
| Content that starts hidden
|-
| More hidden content
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| class="wikitable mw-collapsible mw-collapsed"
|-
! Header
|-
| Content that starts hidden
|-
| More hidden content
|}
</div>

'''Examples without a header row'''

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable mw-collapsible"
|-
| First row is always visible
|-
| Content that starts visible
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| class="wikitable mw-collapsible"
|-
| First row is always visible
|-
| Content that starts visible
|}
</div>


<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1">
{| class="wikitable mw-collapsible mw-collapsed"
|-
| First row is always visible
|-
| Other rows start hidden
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| class="wikitable mw-collapsible mw-collapsed"
|-
| First row is always visible
|-
| Other rows start hidden
|}
</div>

'''Tables with captions''' 

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

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{| class="wikitable mw-collapsible"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts visible
|-
| More visible content
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result.<br>Click "hide" to see'''
----
{| class="wikitable mw-collapsible"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts visible
|-
| More visible content
|}
</div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result<br>(without <nowiki>{{nowrap}}</nowiki>.<br>Click "hide" to see'''
----
{| class="wikitable mw-collapsible"
|+Somewhat long table caption
|-
! Header
|-
| Content starts visible
|-
| More visible content
|}
</div>
{{clear}}

Starting off collapsed:
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{| class="wikitable mw-collapsible mw-collapsed"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts hidden
|-
| More hidden content
|}
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result.<br>Click "hide" to see'''
----
{| class="wikitable mw-collapsible mw-collapsed"
|+{{nowrap|Somewhat long table caption}}
|-
! Header
|-
| Content starts hidden
|-
| More hidden content
|}
</div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result<br>(without <nowiki>{{nowrap}}</nowiki>.<br>Click "hide" to see'''
----
{| class="wikitable mw-collapsible mw-collapsed"
|+Somewhat long table caption
|-
! Header
|-
| Content starts hidden
|-
| More hidden content
|}
</div>

'''Sorting and collapsing''' 

{{shortcut|WP:TABLECOLLAPSE}}
It is possible to collapse a sortable table. To do so, you need to use this code:
:<code>'''class="wikitable sortable mw-collapsible"'''</code>

For example:

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1">
{| 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.
|}
</syntaxhighlight></div>

<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result'''
{| 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.
|}
</div>

If you want the table to default to collapsed state, use the code
:<code><nowiki>{|</nowiki> class="wikitable sortable mw-collapsible '''mw-collapsed'''"</code>
in place of
:<code><nowiki>{|</nowiki> class="wikitable sortable mw-collapsible"</code>

== Highlight rows on hover ==
'''''Note:''' For usage examples, etc. go to {{t|row hover highlight}}.''

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

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

== Colors in tables ==
{{Hatnote|'''Guidelines, help, info:''' [[Wikipedia:Manual of Style/Tables|Manual of Style/Tables]], [[MOS:COLOR]] (guideline), [[Help:Using colours]], [[List of colors (alphabetical)|List of colors]], [[Web colors]].}}
{{hatnote|'''Link colors:''' [[MOS:COLORS]] (help), [[Help:Link color]], [https://webaim.org/resources/linkcontrastchecker WebAIM: Link Contrast Checker].}} 
{{Hatnote|'''Contrast tools:''' [https://webaim.org/resources/contrastchecker WebAIM: Contrast Checker], {{t|Color contrast ratio}}, {{t|Greater color contrast ratio}}, {{t|Color contrast conformance}}.}}
{{Hatnote|'''Templates:''' {{t|background color}}, {{t|font color}}, {{t|Coltit}}, {{t|Color}}.}}
{{Hatnote|'''Value-dependent color:'''  {{t|cell color}}.}}

Background colors are common in table cells. In many sports articles for example. See '''[[List of top-division football clubs in UEFA countries|here]].''' For the accessibility reasons stated in [[WP:COLOR]], information should not be communicated by the use of color alone.

Two ways of specifying [[Help:Using colours|color]] of text and background for a single cell are as follows:

<div style="display:inline-grid; border: 2px solid; padding: 3px;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{|
|-
| style="background-color: red; color: white;"|abc
| def
| style="background-color: red;"|<span style="color: white;">ghi</span>
| jkl
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid; padding: 3px;">
'''Produces'''
{|
|-
| style="background-color: red; color: white;"|abc
| def
| style="background-color: red;"|<span style="color: white;">ghi</span>
| jkl
|}
</div>

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.{{which}}

<div style="display:inline-grid; border: 2px solid; padding: 3px;">
'''Wiki markup'''
<syntaxhighlight lang=wikitext>
{| 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
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid; padding: 3px;">
'''Produces'''
{| 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
|}
</div>

To force a cell to match one of the default colors of the [[Help:User style|<code>class=wikitable</code> template]], use <code>style="background-color:#EAECF0;"</code> {{Legend inline|#EAECF0|outline=#A2A9B1}} for the darker header, and <code>style="background-color:#F8F9FA;"</code> {{Legend inline|#F8F9FA|outline=#A2A9B1}} for the lighter body. #A2A9B1 is the wikitables border color.

===Avoid background:none or transparent===

Avoid using <code>background: none</code> or <code>background: transparent</code>. See: 
*[[mw:Recommendations for night mode compatibility on Wikimedia wikis#Avoid using background: none or background: transparent]]

=== Background colors for column headers ===
<code>style="background-color:…"</code> works in sortable header cells. <code>style="background:…"</code> does not. It breaks sorting in that cell. See [[Help:Sortable tables]]. So use <code>style="background-color:…"</code> for all column header cells whether currently sortable or not. Someone may attempt to make them sortable later.

===Color contrast with visited and unvisited links===

See the link colors for various skins: [[Help:Link color#Standard colors]]. Unvisited Vector link: #3366CC. Visited Vector link: #795CB2.

Test contrast of link color with background color and text color:
*[https://webaim.org/resources/linkcontrastchecker WebAIM: Link Contrast Checker].
Substitute various background colors for the default white Vector background (#FFFFFF): 
*[https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=3366CC '''''Unvisited''''' Vector link color, white background color, and Vector text color]. 
*[https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=795CB2 '''''Visited''''' Vector link color, white background color, and Vector text color]. 

From [[MOS:COLORS]]: For the default Vector 2022 skin normal text color is #202122, and unvisited blue link is #3366CC. "When links and references are not present, extra contrast is possible by setting the text color to pure black (#000000). If a dark background is desired, it should be used against white text (#FFFFFF) without links or references."

=== Color contrast of links in dark mode ===

In dark mode in article namespace table cells with background colors have black underlined links. For example:
*[[List of top-division football clubs in UEFA countries#Spain]]
So any cell with [[WCAG]]-acceptable link color contrast in light mode has even better link color contrast in dark mode. 
{{tracked|T376931}}
Unfortunately, the links are only black in article namespace. Not in template, help, talk, user, and other namespaces. For example see the Spain table template from the above-linked article: [[Template:2022–23 La Liga table]].

=== Breaking up tables without losing colors ===

Normally, copying and pasting columns or rows removes the inline CSS styling such as cell colors. There is a way to break up a table (a too-wide table for example) into more tables without losing all the background colors, and other inline styling. Copy the table to 2 sandboxes (or one sandbox, and in the article itself). Then delete the columns not needed on one of the new tables. Repeat in the other sandbox (or in the article) except delete different columns.

=== Copying off-wiki tables with colored cells to wikis ===

There are many off-wiki tables with useful coloring that meet [[WCAG]] access standards. Currently, there does not seem to be a way to copy those tables to a wiki and keep styling such as colors (background or text color). It is possible to convert PDF tables to Excel and keep the colors. Or to HTML tables and keep the colors. But there does not seem to be a way to copy any of those colored tables (PDF, Excel, HTML, etc.) to a wiki. If there is a way, please leave a note on [[Help talk:Table]]. 

If desired one can keep the coloring by copying the table as an image. This may be necessary for frequently updated colored tables where it would be too time consuming to add color to many cells after each update. There is no problem with copyright for most data tables, colored or not. They are in the public domain. See [[Commons:Template:PD-chart]].

== Other table syntax ==
The types of table syntax that MediaWiki supports are:
# Wikicode <code>&thinsp;|&thinsp;</code> syntax
# HTML (and XHTML)
# Mixed XHTML and wikicode ('''Do not use''')

All three are supported by MediaWiki and create (currently) valid HTML output, but the [[#Wikicode syntax|§&nbsp;Wikicode syntax]] is the simplest. Mixed HTML and wikicode <code>&thinsp;|&thinsp;</code> syntax (i.e., unclosed <code>&thinsp;|&thinsp;</code> and <code><nowiki>|-</nowiki></code> tags) don't necessarily remain browser-supported in the future, especially on mobile devices.<!--Is this saying what it is supposed to say? This sentence and the corresponding bullet point above were unclear. What is meant by "unclosed |" here? Does this mean starting and ending the table with "<table>...</table>" instead of "{|...|}"? How could this possibly be affected by "browser support"? MediaWiki converts it not matter what into HTML output on the fly. The only real reason not to mix the markup is probably simply because it's sloppy and confusing. -->

See also [[HTML element#Tables]]. 

=== Unsupported Html elements ===
Note, however, that the <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>colgroup</code>, and <code>col</code> elements are currently not [[Help:HTML in wikitext#thead, tfoot, tbody|not supported in MediaWiki]], {{as of|lc=y|2025|01}}.

=== Table syntax comparison ===
{{mw-datatable}}
{| class="wikitable mw-datatable"
|+ Table syntax comparison
!
! scope="col" | XHTML
! scope="col" | Wiki-pipe
|-
! scope="row" | Table
| {{tag|table}}
| <code><nowiki>{|</nowiki><br>...<br><nowiki>|}</nowiki></code>
|-
! scope="row" | Caption
| {{tag|caption|content={{var|caption}}}}
| <code><nowiki>|+</nowiki> {{var|caption}}</code>
|-
! scope="row" | Header cell
| {{tag|th|params=scope="col"|content={{var|column header}}}}<br>
{{tag|th|params=scope="row"|content={{var|row header}}}}
| <code><nowiki>! scope="col" | </nowiki>{{var|column header}}</code><br>
<code><nowiki>! scope="row" | </nowiki>{{var|row header}}</code>
|-
! scope="row" | Row
| {{tag|tr}}
| <code><nowiki>|-</nowiki></code>
|-
! scope="row" | Data cell
| {{tag|td|content={{var|cell1}}}}{{tag|td|content={{var|cell2}}}}<br>{{tag|td|content={{var|cell3}}}}
| <code><nowiki>| </nowiki>{{var|cell1}} <nowiki>||</nowiki> {{var|cell2}} <nowiki>||</nowiki> {{var|cell3}}</code><br>
or<br>
<code><nowiki>|</nowiki> {{var|cell1}}</code><br>
<code><nowiki>|</nowiki> {{var|cell2}}</code><br>
<code><nowiki>|</nowiki> {{var|cell3}}</code>
|-
! scope="row" | Cell attribute
| {{tag|td|attribs=style="font-size: 87%;"|content={{var|cell1}}}}
| <code><nowiki>| </nowiki>style="font-size: 87%;" <nowiki>|</nowiki> {{var|cell1}}</code>
|-
! scope="row" | Sample table
| <syntaxhighlight lang=html><table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table></syntaxhighlight>
| <pre>{|
| 1 || 2
|-
| 3 || 4
|}</pre>
<div>
{| class="wikitable" style="margin: auto;"
|-
| 1||2
|-
| 3||4
|}
</div>
|- style="vertical-align: top;"
! scope="row" | Pros
|
* Can preview or debug with any XHTML editor
* Can be indented for easier reading
* Well-known
* Insensitive to newlines
* No characters like "|", which can collide with template and parser function syntax
|
* Easy to write
* Easy to read
* Takes little space
* Can be learned quickly
|- style="vertical-align: top;"
! scope="row" | Cons
|
* Tedious
* Takes a lot of space
* Difficult to read quickly
* Debugging more difficult because of tag pairing requirements
* Indented code might not match nesting.
* Confusing newline behaviour as they only occasionally break cells.
|
* Unfamiliar syntax for experienced HTML editors
* Rigid structure
* Cannot be indented for clarity
* HTML tag text may be easier to read than pipes, plus signs, dashes, etc.
* Requires using {{tlx|!}} to pass a <code>&thinsp;|&thinsp;</code> character in a parameter.
* Sensitive to newlines; see [[Help:Newlines and spaces]].
|}

== See also ==

*[[Help:Table]] for general information about using tables. It also has many links in its "See also"  and "External links" sections. Rather than duplicating them here.

{{Help navigation}}
{{Wikipedia technical help|collapsed}}

[[Category:Wikipedia tables| ]]
[[Category:Wikipedia how-to]]
[[Category:Wikipedia text help]]