Editing Help:Table (section)

== Workarounds ==

=== Overflowing tables ===
{{hatnote|Note: [[Template:Sticky table start]] does the same thing, and also shortens the table vertically too via a vertical [[scrollbar]]. Such a scroll box is a problem though if the sticky headers are too large. In some cases, only a horizontal scrollbar (as below) may be desired. In that case [[Template:Sticky header]] may be preferred as long as the top sticky header is not too tall. The overflow code below can not be used with it, or sticky will not work. {{t|Sticky header}} scrolling is via the whole page, not just for the table.}}

A horizontal scrollbar for the whole page shows up for any wikitable that is too wide for the screen. To create a scrollbar just for the table the following code may be used. Place the following code above a wikitable initialization:

<syntaxhighlight lang="html" highlight="2" class=gridbox>
<div class="overflowbugx" style="overflow-x:auto;">
</syntaxhighlight>

Then, after the closing bracket for the wikitable, place the following code:
<syntaxhighlight lang="html" highlight="2" class=gridbox>
</div>
</syntaxhighlight>

This will prevent the table from causing the entire page to scroll when scrolling through the table horizontally.

=== Non-rectangular tables ===
{{tlx|diagonal split header|''HEADER-FOR-ROW-HEADERS''|''HEADER-FOR-COLUMN-HEADERS''}} can be used to diagonally split a header cell, as in the top-left cell in the rendered result below:<ref group=note>A simplified version of [[Template:Table_of_phase_transitions]]</ref>

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="2">
{| class=wikitable
! {{diagonal split header|From|To}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation
|-
! Liquid
| Freezing || {{sdash}} || Boiling/evaporation
|-
! Gas
| Deposition || Condensation || {{sdash}}
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| class=wikitable
! {{diagonal split header|From|To}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation
|-
! Liquid
| Freezing || {{sdash}} || Boiling/evaporation
|-
! Gas
| Deposition || Condensation || {{sdash}}
|}
</div>

Cell borders can be hidden by adding {{xt|<code>border: none; background: none;</code>}} to the style attributes of either the table or the cell,<ref group=note>Applying <code>background: none</code> to the entire table will, perhaps predictably, subtly alter its color palette.</ref> though this may not work in older browsers. Another use case for this is for implementing aligned multi-column tables:

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="2" style="white-space: pre-wrap;">
{| class=wikitable style="border: none; background: none;"
! colspan=2 rowspan=2 style="border: none; background: none;" | [[File:Pfeil_SO.svg |none|link=|20px]]
! colspan=3 | To
|-
! Solid !! Liquid !! Gas
|-
! rowspan=3 | From
! Solid
| Solid–solid transformation || Melting || Sublimation
|-
! Liquid
| Freezing || {{sdash}} || Boiling/evaporation
|-
! Gas
| Deposition || Condensation || {{sdash}}
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| class=wikitable style="border: none; background: none;"
! colspan=2 rowspan=2 style="border: none; background: none;" | [[File:Pfeil_SO.svg |none|link=|20px]]
! colspan=3 | To
|-
! Solid !! Liquid !! Gas
|-
! rowspan=3 | From
! Solid
| Solid–solid transformation || Melting || Sublimation
|-
! Liquid
| Freezing || {{sdash}} || Boiling/evaporation
|-
! Gas
| Deposition || Condensation || {{sdash}}
|}
</div>

{{em|Note that the removal of the link on an image is [[WP:EIS#Link|dependent on it being purely decorative (as it will be ignored by assistive devices)]].}}

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext" style="white-space: pre-wrap;">
{| class=wikitable style="border: none; background: none;"
! scope=col | Year
! scope=col | Size
| rowspan=5 style="border: none; background: none;"|
! scope=col | Year
! scope=col | Size
| rowspan=5 style="border: none; background: none;"|
! scope=col | Year
! scope=col | Size
|-
| 1990 || 1000<br>(est) || 2000 || 1357 || 2010 || 1776
|-
| 1991 || 1010 || 2001 || 1471 || 2011 || 1888
|-
| colspan=2 style="text-align: center;"|⋮
| colspan=2 style="text-align: center;"|⋮
| colspan=2 style="text-align: center;"|⋮
|-
| 1999 || 1234 || 2009 || 1616 || 2019 || 1997<br>(est)
|}
</syntaxhighlight></div>
<div class="box">
'''Produces'''
{| class=wikitable style="border: none; background: none;"
! scope=col | Year
! scope=col | Size
| rowspan=5 style="border: none; background: none;"|
! scope=col | Year
! scope=col | Size
| rowspan=5 style="border: none; background: none;"|
! scope=col | Year
! scope=col | Size
|-
| 1990 || 1000<br>(est) || 2000 || 1357 || 2010 || 1776
|-
| 1991 || 1010 || 2001 || 1471 || 2011 || 1888
|-
| colspan=2 style="text-align: center;"|⋮
| colspan=2 style="text-align: center;"|⋮
| colspan=2 style="text-align: center;"|⋮
|-
| 1999 || 1234 || 2009 || 1616 || 2019 || 1997<br>(est)
|}
</div>

=== Rendering the pipe ===
{{anchor|Rendering_pipe_itself}}
When cell ''content'' that contains a [[vertical bar|pipe]] character does not render correctly, simply add an empty format for that cell. The second pipe character in a line of <code>|''cell&nbsp;code''</code> will not display; it is reserved for adding a format. Wikicode between the first and second pipe is a format, but since emptiness or an error there is ignored, it just disappears. When this happens, add a dummy format. {{Crossref|selfref=no|(For a real format, see {{section link||HTML attributes}}.)}} Use a third pipe character to render your first pipe character.

<div class="box">
Rendering the first pipe when it is the third pipe in the cell code.

'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
| ''formatting'' |P|i|p|e|
|C|e|l|l|2|
|-
| ''formatting'' |P|i|p|e|| ''formatting'' |C|e|l|l|2|
|-
||P|i|p|e|s|| C|e|l|l|2|
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| ''formatting'' |P|i|p|e|
|C|e|l|l|2|
|-
| ''formatting'' |P|i|p|e|| ''formatting'' |C|e|l|l|2|
|-
||P|i|p|e|s|| C|e|l|l|2|
|}
</div>

The third and later pipe characters will render, but to display two ''adjacent'' pipe characters in a cell, (instead of having them act as the first pipe at the start of a new cell), other pipe-rendering options are needed. Instead of using a dummy format to render a pipe, you can render it directly by 1) {{tag|nowiki|content={{!}}}} (preferred) or 2) [[html#Character and entity references| html]]: <code>&amp;#124;</code> or <code>&amp;#x7C;</code>. Each line of cell code in the following table has one wikicode pipe.

<div class="box">
Displaying adjacent pipes

'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
|<nowiki>|</nowiki> Pipes34:<nowiki>||</nowiki>
|-
|&#124; Pipes34:&#124;&#x7C;
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
|<nowiki>|</nowiki> Pipes34:<nowiki>||</nowiki>
|-
|&#124; Pipes34:&#124;&#x7C;
|}
</div>

Template {{tl2|!}}, because of the order in which things are parsed, is equivalent to typing in a single | pipe character. The single <code>[[help:nowiki|&lt;nowiki />]]|</code> parser-tag does not apply here. See how they do not [[escape character|escape]] the second pipe, as &amp;#124 and {{tag|nowiki|content={{!}}}} did above:

<div class="box">
Common mechanisms that do not work in tables.

'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
|<nowiki />| Pipe3:|
|-
|Pipe2:{{!}} Pipe3:{{!}}
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
|<nowiki />| Pipe3:|
|-
|Pipe2:{{!}} Pipe3:{{!}}
|}
</div>