Help:Table/Advanced

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.

Shortcut

H:Table/A

Tables can be used as formatting instrument, but consider using a 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 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.

Aligning text in header cells versus other 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 class=wikitable does the header cell text not follow the global text alignment set in the top line of the table wikitext.

When using class=wikitable 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 style=text-align:VALUE 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 class=wikitable The table to the right also aligns the text and data in all cells (except header cells) to the right.

Basic table
Header	Header	Header
Text	data 12	data 12
Text	data 123	data 123
Text	data 1234	data 1234

style=text-align:right
Header	Header	Header
Text	data 12	data 12
Text	data 123	data 123
Text	data 1234	data 1234

If most columns consist of data cells, then you might choose to align the data to the right. It is easy.
Just add style=text-align:right to the top line of the wikitext for the table:

{| class=wikitable style=text-align:right

or

{| class="wikitable sortable" style=text-align:right

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.

Wikitext

{| style="border-collapse: collapse;"
| style="text-align: right;" | 432 || .1
|-
| style="text-align: right;" | 43 || .21
|-
| style="text-align: right;" | 4 || .321
|}

Rendered result

432	.1
43	.21
4	.321

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.

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
|}

Rendered result

Heading
432	.1
43	.21
4	.321

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

Wikitext

{| class=wikitable
! colspan=2 |Heading
|-
| {{decimal cell|432.1}}
|-
| {{decimal cell|43.21}}
|-
| {{decimal cell|4.321}}
|}

Rendered result

Heading
432	.1
43	.21
4	.321

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 border-collapse=separate), 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   or  , which is intended to be the width of a numeral, though is font-dependent in practice:

Wikitext

{|
| 432.1
|-
| &#8199;43.21
|-
| &#8199;&#8199;4.321
|}

Rendered result

432.1

43.21

4.321

More companions in this line are: punctuation space ( ) to substitute a period or a comma, − instead of the easily available on the typewriter's keyboard hyphen-dash – 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 font-variant-numeric:tabular-nums and font-variant-numeric:proportional-nums – this is especially visible in the kerning of Arabic digit ⟨1⟩. In the standard browser sans-serif fonts ⟨1⟩ occupies the same width as other digits, ie. works as if font-variant-numerals:tabular-nums was turned on.

Some may find {{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:

Wikitext (just spaces!):

 432.1
  43.21
   4.321

Rendered result

432.1
 43.21
  4.321

Column alignment

{{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:

{{Table alignment}}
{| class="wikitable sortable col1left col4center defaultright"

Place {{Table alignment}} just before the table and then add some classes to the table.

classname	Purpose
`defaultleft`	Align all table cells left by default
`defaultcenter`	Align all table cells center by default
`defaultright`	Align all table cells right by default
`colNleft`	Align the cells in column N left, where N is a number
`colNcenter`	Align the cells in column N center, where N is a number
`colNright`	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 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 (\|-\n\|)
Fill in the "replace with" box with

$1style=text-align:left|

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

(\|-\n\!)

Note the exclamation point for a header cell. Fill in the "replace with" box with

$1style=text-align:left|

Then click "Replace all".

Side by side tables

Note: See also this version of Together Again (Janet Jackson song)#Charts. It uses {{col-begin}}, {{col-2}}, {{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.

Total number of matches played in official competitions only.
Player	Matches	Goals
Guðmundur Hrafnkelsson	407	0
Guðjón Valur Sigurðsson	364	1,875

Total number of goals scored in official matches only.
Player	Goals	Matches	Average
Guðjón Valur Sigurðsson	1,875	364	5.15
Ólafur Stefánsson	1,570	330	4.76

Here is the relevant wikitext below. More info here. A blind editor who uses a screen reader says this method is OK.

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

The code box below was created by adding the same div around the whole syntaxhightlight box:

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

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

</div><div style=display:inline-grid>

style=display:inline-grid 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 vertical-align:top; to align an item to the top. See 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:

<div style="display:inline-grid; vertical-align:top;">

Table 1
Name	Color
Fred	Orange
Bob	Green
Lindy	Yellow

Table 2
Animal	State
Raccoon	Maine
Whale	Alaska
Manta Ray	Florida

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

Table 1
Name	Color
Fred	Orange
Bob	Green
Lindy	Yellow

Table 2
Animal	State
Raccoon	Maine
Whale	Alaska
Manta Ray	Florida

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

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

Table 1
Name	Color
Fred	Orange
Bob	Green
Lindy	Yellow

Table 2
Animal	State
Raccoon	Maine
Whale	Alaska
Manta Ray	Florida

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

Convert a US list/table to a state-by-state data map. With examples and step-by step instructions. Example:
See: List of US states by minimum wage.

Simple map below using another method. See its talk page for info.
Medicaid coverage gap of US Affordable Care Act.

Tables and images can also be floated to the right by adding float:right;

See example to the right from this version of List of U.S. states and territories by incarceration and correctional supervision rate.

<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>

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 this article discussion.

Vertical scrolling table

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

<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>

Horizontal scrolling table

Adding -x to overflow:auto → overflow-x:auto forces overflowing table data to fit within page's width margin or otherwise predetermined wiki markup.

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

<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>

Tables with sticky headers

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.

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.

See list of articles transcluding {{sticky header}}. See 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 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.

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.

Automatically updated scrolling tables with sticky headers

These two scrolling tables with row/column sticky headers are also automatically updated:

See:

Sortable tables

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).

Collapsible tables

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

Wikitext

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

Rendered result

Header
Content that starts hidden
More hidden content

Examples without a header row

Wikitext

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

Rendered result

First row is always visible
Content that starts visible

Wikitext

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

Rendered result

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.

Wikitext

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

Rendered result.
Click "hide" to see

Somewhat long table caption
Header
Content starts visible
More visible content

Rendered result
(without {{nowrap}}.
Click "hide" to see

Somewhat long table caption
Header
Content starts visible
More visible content

Starting off collapsed:

Wikitext

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

Rendered result.
Click "hide" to see

Somewhat long table caption
Header
Content starts hidden
More hidden content

Rendered result
(without {{nowrap}}.
Click "hide" to see

Somewhat long table caption
Header
Content starts hidden
More hidden content

Sorting and collapsing

Shortcut

WP:TABLECOLLAPSE

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

class="wikitable sortable mw-collapsible"

For example:

Wikitext

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

Rendered result

Sortable and collapsible table
Alphabetic	Numeric	Date	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"

Highlight rows on hover

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.)

v t e Wikipedia help pages
*Visit the Teahouse* or the Help desk for an interactive Q & A forum. FAQs (?) Reference desks (?) Noticeboards (?) Cheatsheet (?) Directories (?)**
About Wikipedia (?)	Administration Purpose Principles Policies and guidelines What Wikipedia is not Disclaimer (parental advice) Making requests Who writes Wikipedia?
Help for readers (?)	FAQ Books Copyright Glossary Mobile access Navigation Other languages Searching Students Viewing media
Contributing to Wikipedia (?)	Advice for young editors Avoiding common mistakes Etiquette Simplified Manual of Style Simplified rule-set "Ignore all rules" "The rules are principles" Style-tips Tip of the day Your first article (article wizard)
Getting started (?)	Why create an account? Introductions by topic Graphics tutorials Picture tutorial IRC (live chat) tutorial VisualEditor user guide
Dos and don'ts (?)	Accessibility Biographies Biographies (living) Categorization Consensus Discussions Disambiguation Images Leads Links Lists References Tables Titles (of articles)
How-to pages and information pages (?)	Appealing blocks Article deletion Categories Citations/references Referencing for beginners Citation Style 1 Cite errors References and page numbers Convert Diff Editing Minor edit toolbar edit conflict Find sources Files Footnotes Image deletion Infoboxes Linking (link color) Logging in Merging Page name Renaming pages Redirect Passwords Email confirmation Reverting Simple vandalism cleanup Talk pages (archiving simple archiving) User contributions WP search protocol
Coding (?)	Wiki markup Barcharts Calculations Characters Columns Elevation Hidden text HTML Lists Magic words Music symbols Sections Sounds Tables Templates Transclusion URL Visual files
Directories (?)	Abbreviations Contents (Encyclopedia proper) Departments Editor's index Essays FAQs Glossary Guidelines Manual of Style Policies Tasks Tips Tools
Missing Manual Ask for help on your talk page (?)

v t e Wikipedia technical help
Get personal technical help at the Teahouse, help desk, village pump (technical), talk pages or IRC.
General technical help	Browser notes Bypass cache Keyboard shortcuts Editing CharInsert Edit conflict Edit toolbar Reverting How to create a page IRC Tutorial Mobile access Multilingual support Page history Page information Page name Help Printing Software notices Editnotice Special Characters Entering User access levels VisualEditor Help
Special page-related	Special page help AllPages Edit filter Emailing users Logging in Reset passwords Logs Moving a page History merging Non-admin and admin-only page moves Notifications/Echo FAQ Page Curation Page import Pending changes Random pages Recent changes Related changes Searching Linksearch Tags User contributions Watchlist What links here
Wikitext	Wikitext Cheatsheet Columns Line-break handling Lists Magic words For beginners Conditional expressions Switch parser function Time function Redirects Sections and TOCs Tables Introduction Basics Advanced table formatting Collapsing Conditional tables Sortable tables Using colours
Links and diffs	Links Interlanguage Interwiki Permanent Diffs Simplest diff guide Simple diff and link guide Complete diff and link guide Colon trick Link color Pipe trick URLs
Media files: images, videos and sounds	Media help Files Creation and usage Moving files to Commons Images Introduction to images Picture tutorial Preparing images for upload Uploading images Options to hide an image Extended image syntax SVG help Gallery tag Graphics tutorials Basic bitmap image editing How to improve image quality Graphics Lab resources Sound file markup Visual file markup
Other graphics	Family trees Graphs and charts How to create Barcharts To scale charts Math formulas Math symbols Musical scores Musical symbols Timeline EasyTimeline syntax WikiHiero syntax
Templates and Lua modules	Templates Advanced template coding Template documentation Template index Template limits Template sandbox and test cases Citation templates Lua help Lua project Resources To do Substitution Purge Job queue Transclusion Labeled section Costs and benefits Guide to Scribbling
Data structure	Namespaces Main/Article Category Draft File File description page Help Portal Project/Wikipedia Talk Archiving Simple Template User User page design MediaWiki Bug reports and feature requests TimedMediaHandler extension Module Special
HTML and CSS	Cascading Style Sheets HTML in wikitext Catalogue of CSS classes Common.js and common.css User CSS for monospaced coding font Classes in microformats Markup validation Span tags Useful styles
Customisation and tools	Preferences Gadgets Skins Citation tools Cleaning up vandalism tools Customizing watchlists Hide pages IRC Scripts User scripts Guide List Techniques User style Tools Alternative browsing Browser tools Editing tools Navigation shortcuts Optimum tool set Wikimedia Cloud Services Beta Features at MediaWiki
Automated editing	AfC helper script AntiVandal AutoWikiBrowser Bots Creating history HotCat Huggle Navigation popups RedWarn Twinkle Ultraviolet WPCleaner Inactive igloo STiki
See also: Category:Wikipedia how-to Category:Wikipedia information pages Further navigation at: Help pages Administrators Accessibility Accounts Bots Referencing Citation metadata Templates User scripts

Caption
Color	A	B	C
Max	10	11	12
Red	1	2	3
Lime	4	5	6
Gold	7	8	9
Blue	10	11	12
Total	22	26	30

Caption
Color	Data
Color	A	B	C
Red	1	2	3
Lime	4	5	6
Gold	7	8	9
Blue	10	11	12
Max	10	11	12
Total	22	26	30