Editing Help:Table (section)

== Cell operations ==

=== Setting cell parameters ===
At the start of a cell, add your parameter followed by a single pipe. For example, <code>style="width: 300px;"|</code> sets that cell to a width of 300 pixels. To set more than one parameter, leave a space between each one.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| style="color: white;"
|-
| style="background-color: red;"|cell1 
| style="width: 300px; background: blue;"|cell2
| style="background-color: green;"|cell3
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| style="color:white"
|-
| style="background-color: red;"|cell1 || style="width: 300px; background: blue;"|cell2
| style="background-color: green;"|cell3
|}
</div>

=== Vertical alignment in cells ===
{{See also|Help:Table/Advanced#Horizontal alignment in cells}}
'''''Note:''' The <code>valign=...</code> attribute is [[WP:HTML5|deprecated]] and MediaWiki may stop using it. See: [[Help:HTML in wikitext#Tables]].''<br> 
'''''Note:'''  Use {{t|Vertical align rows}} to align all rows at once.''

By default, text is aligned to the vertical middle of the cell (2nd column in table below). [[CSS]] can be used to vertically align individual cells, or single rows.

<div class="box-aligned">
{| class=wikitable
|+ Demo of vertical alignment of individual cells
|-
|Three<br>lines<br>of{{nbsp}}text
|No alignment
|style=vertical-align:top |Top-aligned
|style="vertical-align:middle |Middle-aligned
|style="vertical-align:bottom |Bottom-aligned
|}
</div>

<div class="box">
'''Relevant wikitext:'''
<syntaxhighlight lang=wikitext highlight=1-3>
|style=vertical-align:top |Top-aligned
|style=vertical-align:middle |Middle-aligned
|style=vertical-align:bottom |Bottom-aligned
</syntaxhighlight></div>

The example below illustrates the need for top alignment of a row. 

{| class=wikitable style=width:400px
|-
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><span style="color: #13a;">Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.</span>
| style=width:20% |Short text
|}

To align the text to the top of each cell in the row, apply the <code>style="vertical-align: top;"</code> CSS to the row.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=2>
{| class=wikitable style=width:400px
|- style=vertical-align:top
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece ...
| style=width:20% |Short text
|}
</syntaxhighlight>
</div>
<div class="box">
'''Produces'''
{| class=wikitable style=width:400px;
|- style=vertical-align:top
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><span style="color: #13a;">Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.</span>
| style=width:20% |Short text
|}
</div>

Documentation and more options for the CSS <code>vertical-align</code> property is [https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align here].

=== Cell content indenting and padding ===
The contents of a cell can be indented or padded on any side. Also, the text can be aligned. In the third row the text is aligned to the right. See the following examples.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| class=wikitable
|-
| Cell content that is not indented or padded
|-
| style="padding-left: 2em;" | <code>style="padding-left: 2em;"</code>
|-
| style="text-align:right; padding-right: 2em;" | <code>style="text-align:right; padding-right: 2em;"</code>
|-
| style="padding-top: 2em;" | <code>style="padding-top: 2em;"</code>
|-
| style="padding-bottom: 2em;" | <code>style="padding-bottom: 2em;"</code>
|-
| style="padding: 3em 5%;" | <code>style="padding: 3em 5%;"</code> {{space|4}} (Top and Bottom: 3em. Left and Right: 5%)
|-
| style="padding: 3em 4em 5%;" | <code>style="padding: 3em 4em 5%;"</code> {{space|4}} (Top: 3em. Left and Right: 4em. Bottom: 5%)
|-
| style="padding: 3%;" | <code>style="padding: 3%;"</code> {{space|4}} (Top, Right, Bottom, and Left: all 3%)
|-
| style="padding: 1em 20px 8% 9em;" | <code>style="padding: 1em 20px 8% 9em;"</code> {{space|4}} (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| Cell content that is not indented or padded
|-
| style="padding-left: 2em;" | <code>style="padding-left: 2em;"</code>
|-
| style="text-align:right; padding-right: 2em;" | <code>style="text-align:right; padding-right: 2em;"</code>
|-
| style="padding-top: 2em;" | <code>style="padding-top: 2em;"</code>
|-
| style="padding-bottom: 2em;" | <code>style="padding-bottom: 2em;"</code>
|-
| style="padding: 3em 5%;" | <code>style="padding: 3em 5%;"</code> {{space|4}} (Top and Bottom: 3em. Left and Right: 5%)
|-
| style="padding: 3em 4em 5%;" | <code>style="padding: 3em 4em 5%;"</code> {{space|4}} (Top: 3em. Left and Right: 4em. Bottom: 5%)
|-
| style="padding: 3%;" | <code>style="padding: 3%;"</code> {{space|4}} (Top, Right, Bottom, and Left: all 3%)
|-
| style="padding: 1em 20px 8% 9em;" | <code>style="padding: 1em 20px 8% 9em;"</code> {{space|4}} (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)
|}
</div>
{{clear}}

{{anchor|Pattern for arguments involving four sides|Clock order}}
[[File:Westclox Big Ben.jpg|frameless|right|upright=0.55]]
'''Pattern for arguments:'''
The arguments to <code>style="padding: "</code> can be seen as being ordered by a [[12-hour clock]], starting at [[noon]] and going [[clockwise]], in the following sense: "top" is associated with noon (i.e. 12 o'clock, the top of a [[12-hour clock|clock]]), "right" is 3 o'clock, "bottom" is 6 o'clock, and "left" is 9 o'clock. The arguments are ordered clockwise starting at noon: top &rarr; right &rarr; bottom &rarr; left (see this<ref group=note>In <code>style="padding: 3em 4em 5%;"</code>, the value <code>4em</code> is used for both the "left" padding and the "right" padding, so the order going clockwise is: top (3em) &rarr; right [and hence also left] (4em) &rarr; bottom (5%); there is no "&rarr; left" in this case because the "left" padding has already been defined. In <code>style="padding: 3em 5%;"</code>, the value <code>3em</code> is used for both the "top" and "bottom" padding while the value <code>5%</code> is used for both the "left" and "right" padding, so the order going clockwise is: top [and hence also bottom] (3em) &rarr; right [and hence also left] (5%); there is no "&rarr; bottom" nor is there "&rarr; left" in this case because the "bottom" and "left" padding have already been defined. The same reasoning also applies to <code>style="padding: 1em 20px 8% 9em;"</code>, and <code>style="padding: 3%;"</code>.</ref> footnote for an example with an explanation).

This same order is also used elsewhere, such as when specifying [[#Individual cell borders|§&nbsp;cell borders]] with <code>border-style: </code>.

'''Setting default cell padding'''

Use <code>cellpadding=</code> to set the default padding for each cell in a table. If <code>class=wikitable</code> is used then <code>cellpadding</code> is ignored. 
The default space between cells can be changed using <code>cellspacing=</code>.

If <code>cellpadding</code> is not used

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</div>
{{clear}}

Using <code>cellpadding=10</code>:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{| cellpadding=10; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| cellpadding=10; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</div>

Using <code>cellpadding=0</code>:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| cellpadding=0; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| cellpadding=0; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</div>

Using <code>cellpadding=0</code> and <code>cellspacing=0</code>:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| cellpadding=0; cellspacing=0; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| cellpadding=0; cellspacing=0; style="border:1px solid black"
|-
| Cell || Cell 
|-
| Cell || Cell 
|}
</div>

=== Individual cell borders ===

The same [[#Borders|§&nbsp;CSS used for tables]] can be used in a cell's format specifier (enclosed in <code>|</code>...<code>|</code>) to put a border around each cell:

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=6,8,10>
{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:Starred.svg |120px]]
| style="border: 1px solid #777777;"|
[[File:Star full.svg |120px]]
| style="border: 1px solid #22AA55;"|<!-- greenish border -->
[[File:Stargreen.svg |120px]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:Starred.svg |120px]]
| style="border: 1px solid #777777;"|
[[File:Star full.svg |120px]]
| style="border: 1px solid #22AA55;"|<!-- greenish border -->
[[File:Stargreen.svg |120px]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}
</div>

Note that only the image cells have individual borders, not the text. The lower hex-colors (such as: <code>#616161</code>) are closer to black. Typically, all borders in a table would be one specific color.

;Border styles

The <code>style='border:'</code> and <code>style='border-style:'</code> properties can accept the following arguments:

{| style="border-spacing: 5px;"
! Argument
! Cell border
! Additional notes
|-
|<code>none</code>
|style="padding: 1em; border-style: none;"|<samp>style="border-style: none;"</samp>
|style="padding: 1em;"|
|-
|<code>solid</code>
|style="padding: 1em; border-style: solid;"|<samp>style="border-style: solid;"</samp>
|style="padding: 1em;"|
|-
|<code>double</code>
|style="padding: 1em; border-style: double;"|<samp>style="border-style: double;"</samp>
|style="padding: 1em;"|
|-
|<code>dashed</code>
|style="padding: 1em; border-style: dashed;"|<samp>style="border-style: dashed;"</samp>
|style="padding: 1em;"|
|-
|<code>dotted</code>
|style="padding: 1em; border-style: dotted;"|<samp>style="border-style: dotted;"</samp>
|style="padding: 1em;"|
|-
|<code>ridge</code>
|style="padding: 1em; border:5px ridge red;"|<samp>style="border:5px ridge red;"</samp>
|style="padding: 1em;"|3D ridged border
|-
|<code>groove</code>
|style="padding: 1em; border:5px groove blue;"|<samp>style="border:5px groove blue;"</samp>
|style="padding: 1em;"|3D grooved border
|-
|<code>inset</code>
|style="padding: 1em; border: 5px inset yellow;"|<samp>style="border: 5px inset yellow;"</samp>
|style="padding: 1em;"|3D inset border
|-
|<code>outset</code>
|style="padding: 1em; border: 5px outset cyan;"|<samp>style="border: 5px outset cyan;"</samp>
|style="padding: 1em;"|3D outset border
|-
|<code>inherit</code>
|style="padding: 1em; border-style: inherit;"|<samp>style="border-style: inherit;"</samp>
|style="padding: 1em;"|Inherit value from parent
|-
|<code>initial</code>
|style="padding: 1em; border-style: initial;"|<samp>style="border-style: initial;"</samp>
|style="padding: 1em;"|Set to default value
|}

;Borders of a cell using <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| 
! style="border-top: solid;" | <code>style="border-top: solid;"</code>
|-
| style="border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |<pre>border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;</pre>
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| 
! style="border-top: solid;" | <code>style="border-top: solid;"</code>
|-
| style="border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;" |<pre>border-top: solid 2px red;
border-right: dashed 3px green;
border-bottom: double 5px blue;
border-left: dotted 6px yellow;</pre>
|}
</div>

;Top, right, bottom, and left borders of a cell using <code>style='border-style:'</code>

To set the left, right, bottom, or top border of a single cell, one may use <code>style='border-style:'</code> which takes between 1 and 4 arguments, each of which is either <code>none</code>, <code>solid</code>, <code>double</code>, <code>dotted</code>, <code>dashed</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>, <code>inherit</code>, or <code>initial</code>.

These arguments are ordered according to the [[#Clock order|§&nbsp;pattern described here]].
For instance, <code>style="border-style: solid none solid none;"</code> where the four parameters correspond respectively to the<br>
{{in5}}<code>'border-style: top right bottom left;'</code><br>
borders of the cell.
For reasons described after this example, there are many ways to change the following {{em|code}} that would '''{{em|not}}''' result in any changes to the table that is actually {{em|displayed}}.

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
| Top_Left
<!-- border-style: top right bottom left; -->
| style="border-style: solid solid none none;" | Top_Center
| Top_Right
|-
| style="border-style: none none solid solid;" | Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: solid solid none none;" | Middle_Right
|-
| Bottom_Left
| style="border-style: none none solid solid;" | Bottom_Center
| Bottom_Right
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| Top_Left
| style="border-style: solid solid none none;" | Top_Center
| Top_Right
|-
| style="border-style: none none solid solid;" | Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: solid solid none none;" | Middle_Right
|-
| Bottom_Left
| style="border-style: none none solid solid;" | Bottom_Center
| Bottom_Right
|}
</div>

Note, however, that in the following table, none of the central cell's (i.e. <code>Middle_Center</code>'s) borders are removed despite the code <code>style="border-style: none none none none;"</code>:

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
</div>

This happens because the code <code>class="wikitable"</code> places a border (top, right, bottom, and left) around {{em|every}} cell in the table so that, for instance, there are actually {{em|two}} borders between the cells "Middle_Center" and "Middle_Right".
So to remove the border between cells "Middle_Center" and "Middle_Right", it is necessary to remove both the right border of "Middle_Center" {{em|and}} the left border of "Middle_Right":

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
<!-- 'border-style: top right bottom left;' -->
| style="border-style: none none none none;" | Middle_Center
| style="border-style: none none none none;" | Middle_Right
<!-- In the above line, the three left-most "none" arguments can be replaced with "solid" (or other valid arguments) and there would be no change to the table that is displayed. Only the fourth argument, which is Middle_Right's left border, needs to be "none". For example, the line above could be replaced with:
| style="border-style: solid solid solid none;" | Middle_Right
-->
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| Top_Left || Top_Center || Top_Right
|-
| Middle_Left
| style="border-style: none none none none;" | Middle_Center
| style="border-style: none none none none;" | Middle_Right
|-
| Bottom_Left || Bottom_Center || Bottom_Right
|}
</div>

To remove selected external borders of a wikitable, both remove them from the  adjacent cells and begin the whole table with code like <code>{| class="wikitable" style="border: none;"</code>.

Note that replacing <code>{| class="wikitable"</code> with<br>
{{in5}}<code>{| style="border-collapse: collapse;"</code><br>
has the effect of removing all cell borders that would otherwise appear by default around every cell in the table.
With this change, you must {{em|insert}} a {{em|single}} cell border between two adjacent cells rather than remove {{em|two}} cell borders.

=== Table cell templates ===
{{See also|Template:Shade}}
See {{tl|Table cell templates}} for a large set of templates to configure text and color in cells in a standard way, producing stock output. For example: "Yes" ({{Tlx|Yes}}), "No" ({{Tlx|No}}), "—" ({{Tlx|N/A}}), "[[N/A]]" ({{Tlx|N/A|N/A}}), "?" ({{Tlx|dunno}}), on colored backgrounds.
{| class="wikitable"
|+ Template output for selected table cell templates
! Template usage !! Using template !! Without template
|-
! {{tlc|Yes}} 
| {{Yes}} || Yes
|-
! {{tlc|No}}
| {{No}} || No
|-
! {{tlc|Dunno}}
| {{dunno}} || ?
|-
! {{tlc|N/A}}
| {{N/A}} || —
|-
! {{tlc|N/A|N/A}}
| {{N/A|N/A}} || N/A
|-
! {{tlc|n/a|n/a}}
| {{n/a|n/a}} || n/a
|}

For example, see [[Comparison of text editors]], which makes frequent use of table cell templates.

=== Tooltips ===
You can add tooltips to columns by using the {{T|Tooltip}} template. Simply replace the column-title with <code><nowiki>{{Tooltip|Column title|The tool tip}}</nowiki></code>, which makes it appear like so: {{tooltip|Column title|The tool tip}}. Use {{tl|abbr}} (same format) for abbreviations. For example: {{abbr|Pop|Population}}.