Content deleted Content added
Timeshifter (talk | contribs) |
Timeshifter (talk | contribs) →Highlight rows on hover: Moved "Colors in tables" section here. From Help:Table. |
||
Line 876:
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]].
== See also ==
| |||