Content deleted Content added
→Sortable tables: c/e |
→Collapsible tables: move {{shortcut}} up (as it redirects to the entire section rather than an anchor within it) |
||
| (25 intermediate revisions by 7 users not shown) | |||
Line 21:
=== 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.
Line 262 ⟶ 263:
'''''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.
<div style=display:inline-grid>
Line 319 ⟶ 304:
|}
</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.
Line 462 ⟶ 474:
|'''[[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:
|}
</div>
Line 493 ⟶ 505:
{{clear}}
== Scrolling tables ==
{{anchor|Scrolling tables|scrolling tables}}
Line 525 ⟶ 538:
===Horizontal scrolling table===
{{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.
Line 557 ⟶ 571:
:'''''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]].''
See '''
<div style="display: inline-grid; vertical-align:top;">
Line 622 ⟶ 636:
== Automatically updated scrolling tables with sticky headers ==
{{Hatnote|'''Note:''' Contact [[User:Tol]] ([[User talk: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]].
== Transclude a table from another page ==
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:
<syntaxhighlight lang=wikitext>
{{Excerpt|Page source of table|Section with the table|this=This table is}}
</syntaxhighlight>
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 <code><nowiki><!-- NOTE --></nowiki></code> just above the transcluded table is helpful. Such as:
:Table below is currently transcluded from here: <nowiki>https://en.wikipedia.org/wiki/Page_source_of_table#Section_with_the_table</nowiki>. 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: <nowiki>https://en.wikipedia.org/wiki/Page_with_transcluded_table#Section_with_the_table</nowiki>. 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 <nowiki>{{excerpt}}</nowiki> template there.
All broken excerpts are automatically tracked at [[:Category:Articles with broken excerpts]] and regularly fixed.
== Sortable tables ==
Line 639 ⟶ 677:
== Collapsible tables ==
{{see also|Help:Collapsing#Collapsible tables|mw:Manual:Collapsible elements}}
{{shortcut|WP:TABLECOLLAPSE}}
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.
Line 731 ⟶ 770:
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result.<br>Click "hide" to
----
{| class="wikitable mw-collapsible"
Line 744 ⟶ 783:
</div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result<br>(without <nowiki>{{nowrap}}</nowiki>.<br>Click "hide" to
----
{| class="wikitable mw-collapsible"
Line 773 ⟶ 812:
</syntaxhighlight></div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result.<br>Click "
----
{| class="wikitable mw-collapsible mw-collapsed"
Line 786 ⟶ 825:
</div>
<div style="display:inline-table; border: 2px solid lime; padding: 0.5em;">
'''Rendered result<br>(without <nowiki>{{nowrap}}</nowiki>.<br>Click "
----
{| class="wikitable mw-collapsible mw-collapsed"
Line 801 ⟶ 840:
'''Sorting and collapsing'''
It is possible to collapse a sortable table. To do so, you need to use this code:
:<code>'''class="wikitable sortable mw-collapsible"'''</code>
Line 863 ⟶ 901:
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}}.}}
{{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 '''[[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]] - scroll down a little to the table.
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]]. Go here for more info:
*[[Help:Table#Public ___domain image tables]]
== Other table syntax ==
The types of table syntax that MediaWiki supports are:
# Wikicode <code> | </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|§ Wikicode syntax]] is the simplest. Mixed HTML and wikicode <code> | </code> syntax (i.e., unclosed <code> | </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 [[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> | </code> character in a parameter.
* Sensitive to newlines; see [[Help:Newlines and spaces]].
|}
== See also ==
*[[Help:
{{Help navigation}}
| |||