Help:Table/Advanced#Colors in tables

You can add images to the mix too. Add vertical-align:top; 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:

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.

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

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

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

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.

{{clear}}

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

{{See also|Help:Table#Overflowing tables}}

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.

: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 {{tl|Sticky header}} examples below:

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

Note: Sticky left-side row headers do not work correctly if table is inside a 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)

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 here that the scrolling tables in the related article (COVID-19 pandemic deaths) were not a problem.

{{Hatnote|Note: Contact User:Tol (talk) for help with automated tables.}}

{{see also|Category:Automatically updated COVID-19 pandemic table templates}}

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 [https://en.wikipedia.org/wiki/Special:PrefixIndex?prefix=Template%3AList+of+countries+by+life+expectancy%2F&namespace=0 this list of life expectancy table template subpages]. You can search for template subpages:

• Special:PrefixIndex - choose the template namespace.

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

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

{{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|mw-collapsible}} to enable collapsing behaviour. Collapsible tables can be sortable, too, by also including the sortable class {{See below|{{section link||Sortable tables}}}}. By default, a collapsible table begins expanded. To change this, add the additional class {{nowrap|mw-collapsed}}. Alternatively, you can add autocollapse, instead of {{nowrap|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 {{nowrap|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. {{nowrap|mw-collapsible}} also does not require a header row in the table, as collapsible 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

Examples without a header row

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.

{{clear}}

Starting off collapsed:

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:

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 {{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 class=mw-datatable and class=hover-highlight. Both add a {{background color|#eaf3ff|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.)

{{Hatnote|Guidelines, help, info: Manual of Style/Tables, MOS:COLOR (guideline), Help:Using colours, 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}}.}}

{{Hatnote| Night mode: mw:Recommendations for night mode compatibility on Wikimedia wikis.}}

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:

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

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

Avoid using background: none or background: transparent. See:

• mw:Recommendations for night mode compatibility on Wikimedia wikis#Avoid using background: none or background: transparent

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

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

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.

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.

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.

The types of table syntax that MediaWiki supports are:

1. Wikicode  |  syntax
2. HTML (and XHTML)
3. Mixed XHTML and wikicode (Do not use)

All three are supported by MediaWiki and create (currently) valid HTML output, but the § Wikicode syntax is the simplest. Mixed HTML and wikicode  |  syntax (i.e., unclosed  |  and |- tags) don't necessarily remain browser-supported in the future, especially on mobile devices.

See also HTML element#Tables.

Note, however, that the thead, tbody, tfoot, colgroup, and col elements are currently not supported in MediaWiki, {{as of|lc=y|2025|01}}.

{{mw-datatable}}

|-

! scope="row" | Caption

| {{tag|caption|content={{var|caption}}}}

| |+ {{var|caption}}

|-

! scope="row" | Header cell

| {{tag|th|params=scope="col"|content={{var|column header}}}}

{{tag|th|params=scope="row"|content={{var|row header}}}}

| ! scope="col" | {{var|column header}}

! scope="row" | {{var|row header}}

|-

! scope="row" | Row

| {{tag|tr}}

| |-

|-

! scope="row" | Data cell

| {{tag|td|content={{var|cell1}}}}{{tag|td|content={{var|cell2}}}}
{{tag|td|content={{var|cell3}}}}

| | {{var|cell1}} || {{var|cell2}} || {{var|cell3}}

or

| {{var|cell1}}

| {{var|cell2}}

| {{var|cell3}}

|-

! scope="row" | Cell attribute

| {{tag|td|attribs=style="font-size: 87%;"|content={{var|cell1}}}}

| | style="font-size: 87%;" | {{var|cell1}}

|-

! scope="row" | Sample table

|

|

1
2
3
4

|- 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  |  character in a parameter.
• Sensitive to newlines; see Help:Newlines and spaces.

|}

• 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 how-to

Category:Wikipedia text help