Template:Table alignment

Template documentation[view] [edit] [history] [purge]

This template is used on approximately 17,000 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

This template uses TemplateStyles:

Template:Table alignment/tables.css

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
BBB	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
BBB	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.