Template:Table alignment/doc

Purpose

To make it easier to align table columns with less code.

Usage

Place {{Table alignment}} above the table and then add some classes to the table.

Classes for table start wikitext: {| class="class1 class2".

Class	Summary
defaultleft	Align all table cells left by default. May not be needed since cells are normally left-aligned already.
defaultcenter	Align all table cells center by default.
defaultright	Align all table cells right by default.
colNleft	Align the cells in column N left, where N is a number.
colNcenter	Align the cells in column N center, where N is a number.
colNright	Align the cells in column N right, where N is a number.
col-Nleft	Align the cells in column N left counting from the right, where N is a number.
col-Ncenter	Align the cells in column N center counting from the right, where N is a number.
col-Nright	Align the cells in column N right counting from the right, where N is a number.

The col classes override the default classes. The col classes never affect header cells (column or row). The default classes affect header cells only when the wikitable class is not used.

A 5-column wikitable using defaultright, col2left, and col-1left

col header	col header	col header	col header	col header
row header	col2	col3	col4	col5
row header	col-4	col-3	col-2	col-1

Limitations

• Preview will not work unless {{table alignment}} is in that section. But if it is placed anywhere on the page, then table alignment will occur upon publishing. So to avoid bafflement and confusion by editors previewing sections, put it directly above each table its classes are used in. This is true for any table template using TemplateStyles.
• Column numbers up to col29 (left-most 29) and col-9 (right-most 9) are supported. A table can have more columns but it cannot be aligned with this method.
• On tables using rowspan or colspan, using the classes may not work well on those rows because the alignment appears in wrong cells. Normal table code like style="text-align: left/center/right;"| cell content can be added to individual cells, both to get the wanted alignment and override unwanted alignment.

Example

{{Table alignment}}
{| class="wikitable defaultcenter col1left col4right"
|-
! Header !! Header !! Header !! Header
|-
| AAAAAAA
| 10000–20000
| 3–4
| 53.43
|-
| BBB
| 5–6
| 113–125
| 2563.35
|-
| CCC
| 9–10
| 7–8
| 313.00
|}

Header	Header	Header	Header
AAAAAAA	10000–20000	3–4	53.43
BBB	5–6	113–125	2563.35
CCC	9–10	7–8	313.00

Example with rowspan

Fix rowspan issues by adding text-align inline styles.

{{Table alignment}}
{|class="wikitable defaultcenter col1left col4right"
|-
! Header !! Header !! Header !! Header
|-
| AAAAAAA
| 10000–20000
| 3–4
| 53.43
|-
| rowspan="2" | BBB
| 5–6
| 113–125
| 2563.35
|-
| style="text-align: center;" | 9–10
| 7–8
| style="text-align: right;" | 313.00
|}

Header	Header	Header	Header
AAAAAAA	10000–20000	3–4	53.43
BBB	5–6	113–125	2563.35
	9–10	7–8	313.00

Bypass rowspan issues by changing the default alignment (not set since already left) to what the rowspan column needs and aligning other columns by counting from the right. If there are multiple rowspan columns aligned differently, then some text-align inline styles may be needed.

{{Table alignment}}
{|class="wikitable col-3center col-2center col-1right"
|-
! Header !! Header !! Header !! Header
|-
| AAAAAAA
| 10000–20000
| 3–4
| 53.43
|-
| rowspan="2" | BBB
| 5–6
| 113–125
| 2563.35
|-
| 9–10
| 7–8
| 313.00
|}

Header	Header	Header	Header
AAAAAAA	10000–20000	3–4	53.43
BBB	5–6	113–125	2563.35
	9–10	7–8	313.00

Align a column of row headers

With the wikitable class, the headers are always centered.

Plain row headers

The plainrowheaders class can be added to the table to style row headers as left-aligned, normal font. Once Template:Plain row headers is no longer in pre-alpha, it can be used for more alignment options. Both require the row headers to have the scope attribute, which is recommended for accessibility:

! scope="row" | Row header

or

! scope="rowgroup" rowspan="2" | Row group header

Inline styles

Alternatively, you can add inline styles to each row header to align them, which will maintain the bold font styling:

! style="text-align: left;" | Row header

For many row headers, you can do a search-and-replace. These directions assume the row headers don't have attributes like style or scope. First, make sure the table is in a separate article section or a sandbox so you don't affect other tables. Next, click on the wikitext source editing link. Click on "Advanced" in the editing toolbar. Then click on the "search and replace" icon on the right.

Fill in the "Search for" box with: !

Fill in the "Replace with" box with: ! style=text-align:left|

Make sure all the option boxes are unchecked. Click "Replace all". Remove style=text-align:left| from the column headers. An easier way may be to temporarily move the column headers to Notepad or elsewhere before the search-and-replace. Other individual cell adjustments may be needed. Preview and publish the changes.

See also

• {{shy}} – Can be used to help narrow columns by adding a soft hyphen to a word to allow it to wrap.

More template styles for tables:

• {{sticky header}} - Makes column headers stick to the top of the page while scrolling through table data.
• {{sticky table start}} - allows sticky rows and columns inside a scrollable area.
• {{sort under}} - moves the sorting arrows under the headers.
• {{row hover highlight}} - adds row hover highlighting, and option for white background.
• {{static row numbers}} - adds a column of row numbers to a table.