Msozod: 1 revision imported

2026-10-12T16:18:12Z

1 revision imported

← Older revision		Revision as of 16:18, 12 October 2026
(No difference)

a>Jroberson108: Move to bottom, where normally is.

2026-10-01T15:23:13Z

Move to bottom, where normally is.

New page

{{Documentation subpage}}
{{High-use}}
{{Uses TemplateStyles}}

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

== Usage ==
Place <code><nowiki>{{Table alignment}}</nowiki></code> above the table and then add some classes to the table.

{| class="wikitable plainrowheaders"
|+ Classes for table start wikitext: <code><nowiki>{|</nowiki> class="''class1 class2''"</code>.
! Class
! Summary
|-
!scope="row"| <code>defaultleft</code>
| Align all table cells '''''left''''' by default. May not be needed since cells are normally left-aligned already.
|-
!scope="row"| <code>defaultcenter</code>
| Align all table cells '''''center''''' by default.
|-
!scope="row"| <code>defaultright</code>
| Align all table cells '''''right''''' by default.
|-
!scope="row"| <code>col''N''left</code>
| Align the cells in column ''N'' '''''left''''', where ''N'' is a number.
|-
!scope="row"| <code>col''N''center</code>
| Align the cells in column ''N'' '''''center''''', where ''N'' is a number.
|-
!scope="row"| <code>col''N''right</code>
| Align the cells in column ''N'' '''''right''''', where ''N'' is a number.
|-
!scope="row"| <code>col-''N''left</code>
| Align the cells in column ''N'' '''''left''''' counting from the right, where ''N'' is a number.
|-
!scope="row"| <code>col-''N''center</code>
| Align the cells in column ''N'' '''''center''''' counting from the right, where ''N'' is a number.
|-
!scope="row"| <code>col-''N''right</code>
| 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 <code>wikitable</code> class is '''not''' used.

{{table alignment}}
{| class="wikitable defaultcenter col2left col-2right"
|+ 4-column table using defaultcenter, col2left, and col-2right
|-
! col header !! col header !! col header !! col header
|-
! row header
| col2 || col3 || col4
|-
! row header
| col-3 || col-2 || col-1
|}

== Example ==

<div style="display:inline-table; vertical-align:top;">
<syntaxhighlight lang="wikitext" highlight="1-2">
{{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
|}
</syntaxhighlight>
</div>
<div style="display:inline-table; vertical-align:top;">
{{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
|}
</div>

== Example with rowspan ==

Fix <code>rowspan</code> issues by adding <code>text-align</code> inline styles.
<div style="display:inline-table; vertical-align:top;">
<syntaxhighlight lang="wikitext" highlight="1-2,11,16,18">
{{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
|}
</syntaxhighlight>
</div>
<div style="display:inline-table; vertical-align:top;">
{{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
|}
</div>

Bypass <code>rowspan</code> issues by changing the default alignment (not set since already left) to what the <code>rowspan</code> column needs and aligning other columns by counting from the right. If there are multiple <code>rowspan</code> columns aligned differently, then some <code>text-align</code> inline styles may be needed.
<div style="display:inline-table; vertical-align:top;">
<syntaxhighlight lang="wikitext" highlight="1-2,11">
{{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
|}
</syntaxhighlight>
</div>
<div style="display:inline-table; vertical-align:top;">
{{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
|}
</div>

== Align a column of row headers ==

With the <code>wikitable</code> class, the headers are always centered.

=== Plain row headers ===

The <code>plainrowheaders</code> 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 [[MOS:DATATABLES|accessibility]]:

<code>! scope="row" | Row header</code>

or

<code>! scope="rowgroup" rowspan="2" | Row group header</code>

=== Inline styles ===

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

<code>! style="text-align: left;" | Row header</code>

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: <code>!</code>

Fill in the '''"Replace with"''' box with: <code>! style=text-align:left |</code>

Make sure all the option boxes are unchecked. Click '''"Replace all".''' Remove <code>style=text-align:left |</code> 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.

== Limitations ==
* Column numbers up to <code>col29</code> (left-most 29) and <code>col-9</code> (right-most 9) are supported. A table can have more columns but it cannot be aligned with this method.
* On tables using <code>rowspan</code> or <code>colspan</code>, using the classes may not work well on those rows because the alignment appears in wrong cells. Normal table code like {{nowrap|1=<code>style="text-align: left/center/right;" {{!}} ''cell content''</code>}} can be added to individual cells, both to get the wanted alignment and override unwanted alignment.

== See also ==

* {{t|table vertical alignment}} - Same, but for vertical alignment.
* {{t|shy}} - Can be used to help narrow columns by adding a [[soft hyphen]] to a word to allow it to wrap.
More [[WP:template styles|template styles]] for tables:
* {{t|sticky header}} - Makes column headers stick to the top of the page while scrolling through table data.
* {{t|sticky table start}} - allows sticky rows and columns inside a scrollable area.
* {{t|sort under}} - moves the sorting arrows under the headers.
* {{t|row hover highlight}} - adds row hover highlighting, and option for white background.
* {{t|static row numbers}} - adds a column of row numbers to a table.

<includeonly>{{Sandbox other||

[[Category:Table templates]]
[[Category:Templates using TemplateStyles to style external elements]]
}}</includeonly>

Template:Table alignment/doc - Revision history

Msozod: 1 revision imported

a>Jroberson108: Move to bottom, where normally is.