Wikipedia:Autowidening tables

The following describes techniques to auto-widen, or expand, any wp:wikitable, based on each user's default text-size set for their browser or device.

The major technique is to pad columns with column-spacers, as groups of non-breaking spaces ( ) at the end of each column, such as by template {{ns|15}}, where those spaces will shift below the column on narrow screens, to move the columns closer together, but spread columns apart on wider screens. When a user views the page, the table will be resized for that user's default textsize setting.

Issues with pixel-width or percent-width columns

There is an alternative, built-in spacing of columns when sized by n% (such as: width="7%"), but that feature will spread a table to stretch across the entire screen window, often with vast amounts of space between columns, obviously looking peculiar with wide gaps inside a table. On the other extreme, when columns are sized in absolute pixels (px) or ems (width=40px, or width=3em), then the columns will not spread across the screen, and the text remains cramped in each column if viewed with larger text-size zoom settings.

Instead, the solution (to both) as autowidened tables, with column-spacers (and no column "width="), will avoid both extremes, of too-wide percent-width columns or too-narrow pixel-width columns, and will allow a table to auto-adjust to the user's screen size, or various text-size zoom views.

Examples

The following markup generates an autowidened table:

::{| class=wikitable
|- valign=top
||
* AA
* BB {{ns|13}}
||
* CC text
* DD text {{ns|9}}
||
*EE
*FF
|}

The above markup generates the following table:

AA BB

CC text DD text

EE FF

Note, in the above example, how the column-spacer of the 2nd column is set to only 9 spaces (compared to 13 on column 1), due to the text entries being longer words in column 2. In general, a set of 3 columns can each be spaced between 9-23 spaces apart, depending on wider column-spacers for shorter words in each column. Because most tables are rarely changed, with only a few occasional added entries, then the column-spacers can usually remain unchanged for months or years.

Purpose of autowidening

Because many users have begun viewing Wikipedia articles on various smaller devices, not just desktop PC computers, the autowidening of tables will allow each user to view those tables as smaller boxes on handheld devices, such as laptops, notebook or tablet computers, and some mobile phones. The users can set their browser Textsize zoom to select their default font size, for whichever handheld device they use for viewing Wikipedia pages. Autowidening of tables will also allow some sight-impaired users, per WP:Access, to greatly enlarge their default text-size (such as zoom 3x larger) to perhaps see details more clearly.

In general, spacing is a matter of perception, relative to the size of the overall window, and column gaps or indentation helps the viewing more on wide windows, rather than narrow screens, to improve the perception of items separated within a larger viewing area.

Related auto-indenting

A similar effect can be performed with math equations, by indenting a single blank space before an equation, and then on narrow screens, that indented blank space will wrap above the equation, to allow the equation to shift to the left-side margin and better fit within the margins of a narrowed window, but auto-indent further on wider windows.

See also

• WP:Autosizing images – to automatically resize images per user preference
• WP:Advanced table formatting
• WP:Advanced article editing

[ This essay is a quick draft to be expanded later. ]