Editing Help:Table (section)

== Width ==
{{See also|Help:Table/Width}}
'''''Note:''' <code>width=X</code> is obsolete in [[HTML 5]], and so it could eventually be ignored by [[MediaWiki]]. See: [[Wikipedia: HTML 5#Table attributes]]. Use CSS styles or line breaks (<code><nowiki><br></nowiki></code>) instead.''

=== Vertical headers ===
Sometimes it is desirable (such as in a table predominantly made of numbers) to rotate text such that it proceeds from top to bottom or bottom to top instead of from left to right or right to left.
This can be done with CSS but the easiest way on Wikipedia is to enclose the text of each heading in a '''{{tl|vertical header}}''' template. For example:
<syntaxhighlight lang="wikitext">
! {{vertical header|Date/Page}}
</syntaxhighlight>
If the text includes an equals sign then replace it with <code><nowiki>{{=}}</nowiki></code>.
{| class="wikitable" style="text-align: center;"
|+ Rotated column headers using {{tlx|vertical header}}
|-
! {{vertical header|Date/Page}}
! {{vertical header|[[Wikipedia:WikiProject Video games|VG: Project]]}}
! {{vertical header|[[Wikipedia talk:WikiProject Video games|VG: Talk]]}}
! {{vertical header|[[Portal:Video games|VG: Portal]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Article guidelines|VG: Article guidelines]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Templates|VG: Templates]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Sources|VG: Sources]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Assessment|VG: Assessment]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Cleanup|VG: Cleanup]]}}
! {{vertical header|[[Wikipedia:WikiProject Video games/Requests|VG Requests]]}}
|-
! 05/08
| 4266 || 7828 || 7282 || 1105 || 224 || 161 || 916 || 506 || 231
|-
! 04/08
| 4127 || 6190 || 6487 || 1139 || 241 || 205 || 1165 || 478 || 301
|}

If you want to use '''[[Template:Sticky table start|sticky headers]]''' with vertical headers it is important to make the sticky header less tall for cell phone use. '''{{t|abbr}}''' is one way. Also by moving some info to the table caption. See example with various methods at '''{{tl|vertical header}}.'''

=== Line breaks in headers ===

An editor who is blind says line breaks '''<code><nowiki><br></nowiki></code>''' are fine in this discussion '''[[Help talk:Table/Advanced#Line breaks in table cells|here]]'''. If it is just two words in the column header, then a line break is simplest. Or if you want three words on separate lines in the header. But for longer header text, max-width is sometimes better, because when the viewport is narrow enough the browser may narrow the header to be less than the max-width setting. The browser often does this better than what line breaks allow in a narrow viewport. 

=== Max-width ===

Narrowing columns with '''max-width''' style is fine; such as <code>style="max-width:Xpx;"</code> or <code>style="max-width:Xem;"</code> or [https://www.w3schools.com/cssref/css_units.php other CSS units]. The number by itself without units defaults to pixels.

See width examples on this '''[[Help:Table/Width|subpage]]'''. There it is easier to narrow the browser window and not lose one's place as on a long page such as here on Help:Table. Overall table width does not act the same on Wikipedia mobile view as it does on mobile view on webpages outside Wikipedia. See the subpage examples. 

Setting strict widths (<code>style="width:Xpx;"</code> or <code>style="width:Xem;"</code>) is discouraged for the most part on Wikipedia because it interferes with the ability of the browser to adjust content to suit the browser window, device size, portrait view, landscape view, zoom settings, user-end font size choices, and other constraints. Verbose notes columns are almost always a problem, especially when there are more than a few other columns. Editors sometimes try to make the notes column wider, which messes up the other columns. For this reason, verbose notes columns should be avoided, or the notes should be shortened and links to longer notes below the table should be added instead.

'''<code>style=max-width:Xem</code>''' can be used in table headers. The following table excerpt is adapted from [https://en.wikipedia.org/w/index.php?title=List_of_countries_by_wealth_per_adult&oldid=1023784152 this version] of [[List of countries by wealth per adult]]. The goal is to '''narrow the data columns,''' and have the '''country names spread out on one line each'''. All of this makes it easier when scanning down a country list. But the country names have to wordwrap if needed (in narrow portrait views on some cell phones, etc.). So '''<code>style=max-width:Xem</code>''' was used in selected column heads. '''[[Em units]]''' are good because they increase in size along with the zoom setting. It is important to check if the max-width you have chosen also works correctly in cell phones, and is not breaking words. You may need to increase it a bit. Here is the relevant header wikitext:

<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=6-8>
{{static row numbers}}{{sticky header}}{{table alignment}}
{|class="wikitable sortable static-row-numbers sticky-header col1left" style=text-align:right
|+ Median and mean wealth per adult ([[USD]]) by country
|- 
! Location
! style=max-width:4em | Median wealth
! style=max-width:4em | Mean wealth
...
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{{static row numbers}}{{sticky header}}{{table alignment}}
{|class="wikitable sortable static-row-numbers sticky-header col1left" style=text-align:right
|+ Median and mean wealth per adult ([[USD]]) by country
|- 
! Location
! style=max-width:4em | Median wealth
! style=max-width:4em | Mean wealth
|-
|{{DRC}}
|382
|1,084
|-
|{{MOZ}}
|352
|880
|}
</div>

'''{{t|sort under}}''' narrows the table columns further:
<div class="box" style="max-width:25em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{{static row numbers}}{{sticky header}}{{sort under}}{{table alignment}}
{|class="wikitable sortable static-row-numbers sticky-header sort-under col1left" style=text-align:right
</syntaxhighlight>
</div>

<div class="box">
'''Produces'''
{{static row numbers}}{{sticky header}}{{sort under}}{{table alignment}}
{|class="wikitable sortable static-row-numbers sticky-header sort-under col1left" style=text-align:right
|+ Median and mean wealth per adult ([[USD]]) by country
|-
! Location
! style=max-width:4em | Median wealth
! style=max-width:4em | Mean wealth
|-
|{{DRC}}
|382
|1,084
|-
|{{MOZ}}
|352
|880
|}
</div>

If using '''{{t|sticky header}}''', then for cell phones even narrower headers are better:

{{static row numbers}}{{sticky header}}{{table alignment}}{{sort under}}
{|class="wikitable sortable static-row-numbers sticky-header col1left sort-under" style=text-align:right
|+ [[Median]] and [[mean]] wealth per adult ([[USD]]) by country
|- 
! Location
! Median
! Mean 
|-
|{{DRC}}
|382
|1,084
|-
|{{MOZ}}
|352
|880
|}

Here below is what the table looks like without '''<code>style=max-width:Xem</code>''' and without a '''caption'''.<br>
Narrow your browser window to see how the table below contracts versus the ones above. The table above (even if some more columns are added) maintains one line per country for narrower browser and screen widths. So it is therefore more readable and scannable in long country tables. The table format below can greatly increase in number of lines, and require more vertical scrolling, especially if more columns are added.

{{static row numbers}}{{sticky header}}{{table alignment}}
{|class="wikitable sortable static-row-numbers sticky-header col1left" style=text-align:right
|-
! Location
! Median wealth per adult ([[USD]])
! Mean wealth per adult ([[USD]])
|-
|{{DRC}}
|382
|1,084
|-
|{{MOZ}}
|352
|880
|}

=== Other width methods ===

{{hatnote|'''Note:''' Fixed widths are not recommended for tables. Max-width is better. See previous section}}
To force initial column widths to specific requirements, rather than accepting the width of the widest text element in a column's cells, follow this example. Note that [[Word wrap|wrap-around of text]] is forced for columns where the width requires it. Do not use <code>min-width:Xpx;</code>

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
! scope="col" style="width: 50px;" | Name
! scope="col" style="width: 250px;" | Effect
! scope="col" style="width: 350px;" | Games found in
|-
| Poké Ball || Regular Poké Ball || All versions
|-
| Great Ball || Better than a Poké Ball || All versions
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
! scope="col" style="width: 50px;" | Name
! scope="col" style="width: 250px;" | Effect
! scope="col" style="width: 350px;" | Games found in
|-
|Poké Ball || Regular Poké Ball || All versions
|-
|Great Ball || Better than a Poké Ball || All versions
|}
</div>

To set column widths in a table without headers, specify the width in the first cell for each column.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
| style="width: 100pt;" | This column is 100 points wide
| style="width: 200pt;" | This column is 200 points wide
| style="width: 250pt;" | This column is 250 points wide
|-
| blah || blih || bluh
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
| style="width: 100pt;" | This column is 100 points wide
| style="width: 200pt;" | This column is 200 points wide
| style="width: 250pt;" | This column is 250 points wide
|-
| blah || blih || bluh
|}
</div>

You can also use percentages, such as <code>style="width: 50%;"</code> to equalize the widths of a two-column table.

One application of setting the widths is aligning columns of consecutive tables. The following are separate tables, with columns set to 350px and 225px. 

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
! scope=col style="width: 350px;" | Country
! scope=col style="width: 225px;" | Capital
|-
| Netherlands || Amsterdam
|}

{| class=wikitable
|-
! scope=col style="width: 350px;" | Country
! scope=col style="width: 225px;" | Capital
|-
| France || Paris
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
! scope=col style="width: 350px;" | Country
! scope=col style="width: 250px;" | Capital
|-
| Netherlands || Amsterdam
|}

{| class=wikitable
|-
! scope=col style="width: 350px;" | Country
! scope=col style="width: 250px;" | Capital
|-
| France || Paris
|}
</div>

=== Nowrap ===

A column will be as wide as its widest cell. To keep a cell from wrapping use <code>style="white-space: nowrap;"</code> 

If the cell is too wide though this may not be a good idea in cell phones. Part of the table may extend past the screen (especially in portrait view). 

Without <code>nowrap</code>, as it appears in a browser:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext">
{|class="wikitable sortable"
|-
! scope=col | Episode
! scope=col | Date
! scope=col | Summary
|-
|"The Journey Begins"
|January 1, 2010
|{{lorem ipsum|1}}... <!-- produces the long text -->
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{|class="wikitable sortable"
|-
! scope=col | Episode
! scope=col | Date
! scope=col | Summary
|-
|"The Journey Begins"
|January 1, 2010
|{{lorem ipsum|1}}
|}
</div>

With <code>nowrap</code>, on both the Episode and Date columns, as it appears in a browser:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=7,8>
{|class="wikitable sortable"
|-
! scope=col | Episode
! scope=col | Date
! scope=col | Summary
|-
| style="white-space: nowrap;" |"The Journey Begins"
| style="white-space: nowrap;" |January 1, 2010
|{{lorem ipsum|1}}... <!-- produces the long text -->
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{|class="wikitable sortable"
|-
! scope=col | Episode
! scope=col | Date
! scope=col | Summary
|-
| style="white-space: nowrap;" |"The Journey Begins"
| style="white-space: nowrap;" |January 1, 2010
|{{lorem ipsum|1}}
|}
</div>