Editing Help:Table (section)

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