Help:Width of tables, columns, and cells
Note: width=X 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 (<br>) instead.
Setting no widths is preferred wherever possible. This is because the browser can adjust table content to suit the browser window, device size, portrait view, landscape view, zoom settings, user-end font size choices, and other constraints. Moving words out of column headers, and into the table caption is a better way to make column headers narrower.
Setting strict widths (style="width:Xpx;" or style="width:Xem;") on any part of a table is discouraged for the most part on Wikipedia.
If widths must be set, then max-width is the preferred way to limit widths on tables. It works on divs too. See max-width sections below.
Test tables in narrower browser windows. Test in both desktop and mobile views (on cell phones in portrait orientation). See the mobile or desktop view link at the bottom of this Wikipedia page. Use a cell phone to get the true mobile view.
A Wikipedia page without tables can be greatly narrowed. For example, narrow your browser window while viewing this Wikipedia sandbox.
A Wikipedia page with a table using a wide strict width for the table will get a horizontal scroll bar for the page as a whole if the screen is narrower than the width setting. But curiously, the page scroll bar eventually disappears as the screen is narrowed further. At that point the table width setting is ignored, and the minimum width of the table is determined by the widest word in each column. See this Wikipedia sandbox. Narrow your browser window as far as you can. In any case text and tables outside the wide table wrap to fit the screen size, and so the horizontal scroll bar has no effect on that text.
Template:Sticky table start
[edit]Template:Sticky table start is helpful. It makes both the top header and the left-side column sticky. It works on mobile too. This makes wide tables visible on narrow screens via scrolling. Look at the examples in the documentation to understand. In some cases breaking up tables is a better solution.
Line breaks in headers
[edit]An editor who is blind says that line breaks <br> are fine in this discussion 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 is allowed to 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.
Soft hyphens
[edit]{{shy}} can be placed in long header words like "population" to add a soft hyphen when the screen is narrow (as on portrait view on cell phones):
- Wikitext
popu{{shy}}lation- Which appears as
- population
- Except in narrow screens where it looks like this
- popu-
lation
Vertical headers
[edit]Sometimes it is desirable to rotate header 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 headings in a vertical header template. Note that line breaks <br> may be placed in vertical headers. This allows cell phones in landscape view to see the table, and not just the headers. Note that if using a 2-column vertical header there must be at least one cell below it with a minimum of 3 characters. See {{vertical header}} for more info and tips.
! {{vertical header|[[Wikipedia:WikiProject Video games/Article guidelines|VG: Article<br>guidelines]]}}
If the text includes an equals sign then replace it with {{=}}.
Date/Page
|
|||||||||
|---|---|---|---|---|---|---|---|---|---|
| 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 sticky headers with vertical headers it is important to make the sticky header less tall for cell phone use. {{abbr}} is one way. Also by moving some info to the table caption. See example with various methods at {{vertical header}}.
style=max-width
[edit]You can narrow columns with the max-width style; such as style="max-width:Xpx;" or style="max-width:Xem;" or other CSS units. The number by itself without units defaults to pixels.
CSS max-width on column headers
[edit]style=max-width:Xem can be used in table headers. The following table excerpt is adapted from 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 style=max-width:Xem 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:
Wikitext
{{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
...
Produces
| Location | Median wealth | Mean wealth |
|---|---|---|
 Democratic Republic of the Congo
|
382 | 1,084 |
 Mozambique
|
352 | 880 |
{{sort under}} narrows the table columns further:
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
Produces
| Location | Median wealth | Mean wealth |
|---|---|---|
| Democratic Republic of the Congo
|
382 | 1,084 |
| Mozambique
|
352 | 880 |
If using {{sticky header}}, then for cell phones even narrower headers are better:
| Location | Median | Mean |
|---|---|---|
| Democratic Republic of the Congo
|
382 | 1,084 |
| Mozambique
|
352 | 880 |
Here below is what the table looks like without style=max-width:Xem and without a caption.
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.
| Location | Median wealth per adult (USD) | Mean wealth per adult (USD) |
|---|---|---|
| Democratic Republic of the Congo
|
382 | 1,084 |
| Mozambique
|
352 | 880 |
CSS max-width on a table cell
[edit]CSS max-width for a table cell works on both desktop and mobile. And it shrinks further as screen or browser narrows. Portrait versus landscape view on cell phone.
| Bottom left cell || Bottom center cell || style=max-width:40em; |"Lorem ipsum ...
| Left | Center | Right |
|---|---|---|
| Top left cell | Top center cell | Top right cell |
| Middle left cell | Middle center cell | Middle right cell |
| Bottom left cell | Bottom center cell | "Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." |
CSS max-width on table as a whole
[edit]CSS max-width for overall table width works on both desktop and mobile. And the table shrinks further as the screen or browser narrows. Or portrait versus landscape view on cell phones.
Overall table width does not act the same on Wikipedia mobile view as it does on mobile view on webpages outside Wikipedia.
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.
- Overall table width attempted via max-width
{| class=wikitable style="max-width:40em;"
| Left | Center | Right |
|---|---|---|
| Top left cell | Top center cell | Top right cell |
| Middle left cell | Middle center cell | Middle right cell |
| Bottom left cell | Bottom center cell | "Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." |
style=width
[edit]Note: Fixed widths are not recommended for tables.
CSS width on columns
[edit]Setting the width for a cell also sets the width for its column.
To force initial column widths to specific requirements, rather than accepting the width of the widest text element in a column's cells, you may follow this example. Note that wrap-around of text is forced for columns where the width requires it.
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
|}
Produces
| Name | Effect | Games found in |
|---|---|---|
| Poké Ball | Regular Poké Ball | All versions |
| Great Ball | Better than a Poké Ball | All versions |
To set column widths in a table without headers, specify the width in the first cell for each column.
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
|}
Produces
| This column is 100 points wide | This column is 200 points wide | This column is 250 points wide |
| blah | blih | bluh |
You can also use percentages, such as style="width: 50%;" 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.
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
|}
Produces
| Country | Capital |
|---|---|
| Netherlands | Amsterdam |
| Country | Capital |
|---|---|
| France | Paris |
CSS width setting for the overall table
[edit]A CSS width setting for the overall table in desktop view acts like width settings on divs and tables on webpages outside Wikipedia. A horizontal scrollbar is created when the screen is too narrow for the width setting. See width outside Wikipedia:
In mobile view on Wikipedia width settings on the table as a whole are ignored altogether for the most part (see next section). In mobile view all the tables below narrow without forming horizontal scrollbars. This is different from tables on webpages outside Wikipedia. Overall table widths (as opposed to max-widths) do not narrow on most pages outside Wikipedia. See max-width outside Wikipedia:
Experiment with em and other width settings on another page outside Wikipedia:
Example. CSS width on table as a whole
[edit]CSS width for overall table width works on Windows desktop. The width setting is ignored altogether on these iPhone browsers: Edge, Chrome, Firefox, Opera. But not on iPhone Safari where it works the same as on desktop.
A Wikipedia page with a table using a wide strict width for the table will get a horizontal scroll bar for the page as a whole if the screen is narrower than the width. But curiously, the page scroll bar eventually disappears as the screen is narrowed further. See this Wikipedia sandbox with a wide table via CSS width. Narrow your browser window as far as you can.
- Overall table width
{| class=wikitable style=width:50em
| Left | Center | Right |
|---|---|---|
| Top left cell | Top center cell | Top right cell |
| Middle left cell | Middle center cell | Middle right cell |
| Bottom left cell | Bottom center cell | Bottom right cell |
CSS width on table header cell
[edit]CSS width for a table header cell acts like a max-width setting. So it shrinks as browser window shrinks. It shrinks proportionally on mobile, too. No horizontal scrollbar in either mode.
- Center header width setting
! Left !! style=width:40em | Center !! Right
| Left | Center | Right |
|---|---|---|
| Top left cell | Top center cell | Top right cell |
| Middle left cell | Middle center cell | Middle right cell |
| Bottom left cell | Bottom center cell | Bottom right cell |
Nowrap
[edit]Nowrap in tables should be avoided. It can cause all kinds of problems in different screen sizes.
Normally, a column will be as wide as the widest word or number in one of its cells or header. To keep a cell from wrapping use class=nowrap or
style="white-space: nowrap;"
If the cell is too wide, then this may not be a good idea in cell phones. It may force part of the table to extend past the screen (especially in portrait view). This is even more true when used in multiple columns, or a whole header row. class=nowrap can be added to the top line of table wikitext in order to prevent any of the header row from wrapping.
Without class=nowrap, as it appears in a browser. Note the episode and date columns:
| Episode | Date | Summary |
|---|---|---|
| "The Journey Begins" | January 1, 2010 |
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
With class=nowrap, on both the Episode and Date columns, as it appears in a browser:
Wikitext
{| class="wikitable sortable"
|-
! Episode
! Date
! Summary
|-
| class=nowrap |"The Journey Begins"
| class=nowrap |January 1, 2010
|{{lorem ipsum|1}}... <!-- produces the long text -->
|}
Produces
| Episode | Date | Summary |
|---|---|---|
| "The Journey Begins" | January 1, 2010 |
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |