Editing Help:Table (section)

== Table style ==

A {{kbd|style}} element may be added to apply to the entire table, to all the cells [[#Row style|§&nbsp;in a row]], or just to individual cells in the table. Adding a style to a column requires a template such as {{tl|table alignment}} (for horizontal alignment of text).

To add style to the entire table, add the {{kbd|style}} element to the [[#Begin and end delimiters|§&nbsp;Begin-table delimiter]] line at the top of the table. Note that in some cases, it may be better to use the style encapsulated in one of the predefined classes; see {{slink||Class}}.

=== Horizontal text alignment ===
{{More|Help:Table/Advanced#Horizontal alignment in cells}}
Text alignment (right/center/left) for the whole table (except the headers in a table using <code>class=wikitable</code>) can be done at the top line of the table wikitext:
<syntaxhighlight lang=wikitext highlight=1 class=gridbox>
{| class=wikitable style=text-align:right; 
 ...
|}
</syntaxhighlight>

Text alignment for a column can be done with {{tl|table alignment}}.

=== Height ===

The height of the whole table can be specified using standard CSS style properties on the [[#Wikicode syntax tutorial|§&nbsp;start table indicator]] line:

<syntaxhighlight lang=wikitext highlight=1,6 class=gridbox>
{| class=wikitable style=height:14em;
  . . .
|}
</syntaxhighlight>

Note that you may also specify the [[#Row style|§&nbsp;height of individual rows]], and if they add up to more than the table height you specified or if word wrapping increases row height, the table height you specified will be ignored and the table height increased as needed to accommodate all the rows (except on mobile where the bottom of the table will be cut off).

=== Borders ===
'''''Note:''' [[Wikipedia:HTML 5#Table attributes]]. CSS to replace obsolete attributes for borders, padding, spacing, etc.''

Add a border around a table using the CSS property <code>border: ''thickness style color'';</code>, for example <code>border:3px dashed red</code>. This example uses a solid (non-dashed) gray border that is one pixel wide:

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| style="border-spacing: 2px; border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Center
! style="width: 130px;" | Right
|-
| [[File:Starred.svg |120px| center]]
| [[File:Star full.svg |120px| center]]
| [[File:Stargreen.svg |120px| center]]
|- 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
|-
| [[File:Starred.svg |120px| center]]
| [[File:Star full.svg |120px| center]]
| [[File:Stargreen.svg |120px| center]]
|- style="text-align: center;"
|Red star || Orange star || Green star
|}
</div>
Note the bottom-row texts are centered by <code>style="text-align: center;"</code> to match the centering of the stars in their cells.

As long as the <code>File:</code> specs omit the parameter <code>|thumb</code> they don't show the caption lines in the table (only during mouse-over). The border color <code>darkgray</code> matches typical tables or infoboxes in articles; however, it could be any color name (as in <code>style="border: 1px solid darkgreen;"</code>) or use a [[Hex triplet|hex-color]] (such as: <code>#DDCCBB</code>).

=== Border-collapse: conflicting or double borders ===

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| border=1
|-
| A || B || C
|-
| D || E || F
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| border=1
|-
| A || B || C
|-
| D || E || F
|}
</div>

If all cells have the same border color, the resulting double borders may not be wanted; add the <code>border-collapse: collapse;</code> CSS property on the table opening tag to reduce them to single ones (<code>cellspacing=...</code> is [[WP:HTML5|obsolete]]).

Additionally, the [[W3C]] [http://www.w3.org/TR/html5/obsolete.html#attr-background allows] the use of the otherwise obsolete <code>border=</code> attribute on the table root (<code><nowiki>{|</nowiki></code>) if its value is "1". This adds a one-pixel border, in the default color, to the table and all of its cells at once:

Using the <code>border-collapse</code> property to combine the double borders, as described above:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| border=1 style="border-collapse: collapse;"
|-
| A || B || C
|-
| D || E || F
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| border=1 style="border-collapse: collapse;"
|-
| A || B || C
|-
| D || E || F
|}
</div>

=== Float table left or right ===

Two table classes <code>floatleft</code> and <code>floatright</code> (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. <code>floatleft</code> floats the table to the left and adjusts right margin. <code>floatright</code> does the opposite. Example:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=3,13>
This paragraph is before the table. 
[[File:Starred.svg |120px|right]]
{| class="wikitable floatleft"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}

{| class="wikitable floatright"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}
... Lorem text after table
</syntaxhighlight>
</div>

'''As it appears in a browser:'''

This paragraph is before the table. 
[[File:Starred.svg |120px|right]]
{| class="wikitable floatleft"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}

{| class="wikitable floatright"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}
{{lorem ipsum span|9}}


Alternatively, you can use '''CSS to get the same result:'''<br>
'''<nowiki>{| class="wikitable" style="float:left; clear:left; margin-right:8px;"</nowiki>'''<br>
'''<nowiki>{| class="wikitable" style="float:right; clear:right; margin-left:8px;"</nowiki>'''

This paragraph is before the table. 
[[File:Starred.svg |120px|right]]
{| class="wikitable" style="float:left; clear:left; margin-right:8px;"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}

{| class="wikitable" style="float:right; clear:right; margin-left:8px;"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|}
{{lorem ipsum span|9}}

=== Centering tables ===
{{shortcut|HELP:TABLECENTER}}

To center a table horizontally, use style {{kbd|margin: auto}}, which applies to the left and right margins. Text does not flow around centered tables as it does for floated tables; that is, no text appears to either side:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=2>
Text before table...
{| class="wikitable" style="margin: auto; border: none;"
|+ Centered table
|-
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after table
</syntaxhighlight>
</div>

'''As it appears in a browser:'''

Text before table...
{| class="wikitable" style="margin: auto; border: none;"
|+ Centered table
|-
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after table.

Style {{kbd|margin:auto}} may be combined with top and bottom margin in the standard way for CSS, e.g. <syntaxhighlight lang=wikitext  inline>style="margin:1em auto"</syntaxhighlight> defines top and bottom margins of 1em, and automatic (centered) left and right margins.

'''Tip:''' For Android Chrome, use:
:<code><nowiki>{| style="margin: auto; border: none;"</nowiki></code>{{efn|group=note|''border: none;'' 
to avoid an empty column in tables narrower than the browser window in Android Chrome.}}

'''Note:''' <code>align="center"</code> is [[Wikipedia:HTML 5|deprecated in HTML5]], and does not work well in Mediawiki software. For example; it will not override the left alignment of tables via <code>class=wikitable</code>.

=== Static ('sticky') headers===
Headers can be frozen so they're always at the top (or left) as one scrolls through a large table. 
See {{tl|Sticky header}} and {{tl|Sticky table start}}.

=== Nested tables ===
{{hatnote|Note: because they cause [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Avoiding nested data tables|accessibility issues]], header cells in nested tables should be avoided whenever possible. For accessibility, any complicated table must be carefully designed to maintain normal flow, i.e. the ordering of content in the page code should match the order in which it is to be presented.}}

Nesting data tables with header cells makes it difficult for assistive [[screen readers]] to parse them sensibly. 

Editors sometimes use headerless tables as an aid to content layout, especially where it is easier than the equivalent use of divs and CSS styling. For complex layouts, <code>rowspan</code> and <code>colspan</code> may be used, but again it is sometimes simpler and more maintainable to use nested tables.

{{em|Nested tables must start on a new line.}}

In the following example, five different tables are shown nested inside the cells of a sixth, main table. None has any header cells. Automatically, the two tables |A| and |B|B| are vertically aligned instead of the usual side-by-side of text characters in a cell. <code>float</code> is used to fix each of tables |C| and |D| to their own position within one cell of the table. This may be used for charts and schematics. 

<div class="box" style="background-color: white;">
{| style="border: 1px solid black;"
| style="border: 1px solid black;" | &alpha;
| style="border: 1px solid black; text-align:center;" | cell2
{| style="border: 2px solid black; background: #ffffcc;" <!-- The nested table must be on a new line -->
| style="border: 2px solid darkgray;" | NESTED
|-
| style="border: 2px solid darkgray;" | TABLE
|}
| style="border: 1px solid black; vertical-align: bottom;" | the original table again
| style="border: 1px solid black; width:100px" |
{| style="border: 2px solid black; background: #ffffcc"
| style="border: 2px solid darkgray;" | A
|}
{| style="border: 2px solid black; background: #ffffcc"
| style="border: 2px solid darkgray;" | B
| style="border: 2px solid darkgray;" | B
|}
| style="border: 1px solid black; width: 50px" |
{| style="border: 2px solid black; background:#ffffcc; float:left"
| style="border: 2px solid darkgray;" | C
|}
{| style="border: 2px solid black; background:#ffffcc; float:right"
| style="border: 2px solid darkgray;" | D
|}
|}
</div>

<div class="box">
'''Wikitext:'''
<syntaxhighlight lang=wikitext line highlight="4-8,11-17,19-24">
{| style="border: 1px solid black;"
| style="border: 1px solid black;" | &alpha;
| style="border: 1px solid black; text-align:center;" | cell2
{| style="border: 2px solid black; background: #ffffcc;" <!-- The nested table must be on a new line -->
| style="border: 2px solid darkgray;" | NESTED
|-
| style="border: 2px solid darkgray;" | TABLE
|}
| style="border: 1px solid black; vertical-align: bottom;" | the original table again
| style="border: 1px solid black; width:100px" |
{| style="border: 2px solid black; background: #ffffcc"
| style="border: 2px solid darkgray;" | A
|}
{| style="border: 2px solid black; background: #ffffcc"
| style="border: 2px solid darkgray;" | B
| style="border: 2px solid darkgray;" | B
|}
| style="border: 1px solid black; width: 50px" |
{| style="border: 2px solid black; background:#ffffcc; float:left"
| style="border: 2px solid darkgray;" | C
|}
{| style="border: 2px solid black; background:#ffffcc; float:right"
| style="border: 2px solid darkgray;" | D
|}
|}
</syntaxhighlight></div>