Editing Help:Table (section)

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