WillSysAd: 1 revision imported

2026-07-20T02:09:16Z

1 revision imported

← Older revision	Revision as of 02:09, 20 July 2026
(No difference)

wikipedia>Timeshifter: /* */ {{High-use}}

2026-06-07T08:39:24Z

: {{High-use}}

New page

{{Documentation subpage}}
{{High-use}}

{{tsh|srn}}
{{Uses TemplateStyles|Template:Static row numbers/styles.css}}

This template adds a column of row numbers to a table. The numbers do not sort with the rest of the table, remaining static. Optional classes are provided to display a column label or disable numbers on specific rows.

It works on desktop and mobile versions of Wikipedia pages.

== Usage ==

Include this template by adding {{tlc|static row numbers}} or its redirect {{tlc|static-row-numbers}} above a table. Add the <code>static-row-numbers</code> class to the table start wikitext. Optionally add the other classes listed below.

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang=wikitext>
{{static row numbers}}
{| class="static-row-numbers"
</syntaxhighlight>
</div>

{| class="wikitable" style="background-color: var(--background-color-base, #fff); color: var(--color-base, #202122);"
|+ Classes for table start wikitext: <code><nowiki>{|</nowiki> class="''class1 class2''"</code>.
|-
! Table class
! Summary
|-
| class="nowrap" | <code>static-row-numbers</code>
| '''Required.''' Displays a column of row numbers aligned right. Requires at least one header row.
|-
|<code>static-row-numbers-center</code>
|Center aligns numbers. Default right.
|-
|<code>static-row-numbers-left</code>
|Left aligns numbers. Default right.
|-
| class="nowrap" | <code>static-row-header-text</code>
| Displays "No." text in column label.
|-
| class="nowrap" | <code>static-row-header-hash</code>
| Displays hash ("#") symbol in column label.
|}

{| class="wikitable" style="background-color: var(--background-color-base, #fff); color: var(--color-base, #202122);"
|+ Data attributes for table start wikitext: <code><nowiki>{|</nowiki> ''attribute''="''value''"</code>.
|-
! Table attribute
! Summary
|-
| class="nowrap" | <code>data-srn-limit="''N''"</code>
| Remove numbers beyond row ''N'' of the sortable data where ''N'' is the number 10. '''Requires sortable table.''' Unpredictable results when adding <code>sorttop</code> (uses <code>static-row-header</code>) rows above or <code>static-row-numbers-norank</code> rows in the sortable data. Example: <code><nowiki>{|</nowiki> class="static-row-numbers" data-srn-limit="10"</code>.
|}

{| class="wikitable" style="background-color: var(--background-color-base, #fff); color: var(--color-base, #202122);"
|+ Classes for row wikitext: <code><nowiki>|-</nowiki> class="''class1 class2''"</code>.
|-
! Row class
! Summary
|-
| class="nowrap" | <code>static-row-header</code>
| Disables a row number. Disables borders between consecutive row usages (simulates <code>rowspan</code>). Add to <code>sorttop</code> and <code>sortbottom</code> rows. Add to header rows except the first.
|-
| class="nowrap" | <code>static-row-numbers-norank</code>
| Disables a row number. Maintains borders between consecutive row usages. Optionally add to data rows.
|}

== Used with sortable ==

Multiple header rows in a sortable table should have the <code>static-row-header</code> class added to all header rows except the first one so that they are not numbered when JavaScript is disabled. It is also needed on rows that use the <code>sorttop</code> or <code>sortbottom</code> class, described at [[#Disable number on specific rows]].

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6,14,16>
{{static row numbers}}
{| class="wikitable sortable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|- class="sortbottom static-row-header"
| '''Total''' || 12 || 15 || 18
|- class="sortbottom static-row-header"
| '''Average''' || 4 || 5 || 6
|}
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable sortable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|- class="sortbottom static-row-header"
| '''Total''' || 12 || 15 || 18
|- class="sortbottom static-row-header"
| '''Average''' || 4 || 5 || 6
|}
</div>

== Used without sortable ==

Multiple header rows in a non-sortable table should have the <code>static-row-header</code> class added to all header rows except the first one, described at [[#Disable number on specific rows]].

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6>
{{static row numbers}}
{| class="wikitable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|}
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|}
</div>

== Display "No." text in column label ==
*'''''Note'''. This does not improve accessibility. A blind person [[Wikipedia talk:Manual of Style/Accessibility/Archive 17#Is Template:static row numbers accessible?|said it does nothing for screen reader users]]. [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AManual_of_Style%2FAccessibility&diff=1227858099&oldid=1227843888].''

To display the "No." text in the number column's header (label), add the <code>static-row-header-text</code> class to the table start wikitext.

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6>
{{static row numbers}}
{| class="wikitable static-row-numbers static-row-header-text"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
...
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable static-row-numbers static-row-header-text"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|}
</div>

== Display hash ("#") symbol in column label ==
*'''''Note'''. This does not improve accessibility. A blind person [[Wikipedia talk:Manual of Style/Accessibility/Archive 17#Is Template:static row numbers accessible?|said it does nothing for screen reader users]]. [https://en.wikipedia.org/w/index.php?title=Wikipedia_talk%3AManual_of_Style%2FAccessibility&diff=1227858099&oldid=1227843888].''

To display a hash ("#") symbol in the number column's header (label), add the <code>static-row-header-hash</code> class to the table start wikitext.

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6>
{{static row numbers}}
{| class="wikitable static-row-numbers static-row-header-hash"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
...
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable static-row-numbers static-row-header-hash"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|}
</div>

== Disable number on specific rows ==

This section details how to disable numbers on specific rows by adding either the <code>static-row-numbers-norank</code> or <code>static-row-header</code> class to the row wikitext.

The <code>static-row-numbers-norank</code> class can be added to data rows to disable the number.

The <code>static-row-header</code> class disables the number and border between other rows that use this class consecutively, simulating a <code>rowspan</code> (see [[Help:Table#Colspan and rowspan]]). It should be added to:
* Header rows excluding the first. For sortable tables, it prevents numbering when JavaScript is disabled.
* Rows using the <code>sorttop</code> or <code>sortbottom</code> class.

Note, the <code>sorttop</code> or <code>sortbottom</code> class is added to a row so it stays at the top or bottom of a sorted list, per [[Help:Sortable tables]].

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6,8,10,14,16,20,22>
{{static row numbers}}
{| class="wikitable sortable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|- class="sorttop static-row-header"
| '''Min''' || 1 || 2 || 3
|- class="sorttop static-row-header"
| '''Max''' || 10 || 11 || 12
|-
| Red || 1 || 2 || 3
|- class="static-row-numbers-norank"
| Lime || 4 || 5 || 6
|- class="static-row-numbers-norank"
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class="sortbottom static-row-header"
| '''Total''' || 22 || 26 || 30
|- class="sortbottom static-row-header"
| '''Average''' || 5.5 || 6.5 || 7.5
|}
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable sortable static-row-numbers"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|- class="sorttop static-row-header"
| '''Min''' || 1 || 2 || 3
|- class="sorttop static-row-header"
| '''Max''' || 10 || 11 || 12
|-
| Red || 1 || 2 || 3
|- class="static-row-numbers-norank"
| Lime || 4 || 5 || 6
|- class="static-row-numbers-norank"
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class="sortbottom static-row-header"
| '''Total''' || 22 || 26 || 30
|- class="sortbottom static-row-header"
| '''Average''' || 5.5 || 6.5 || 7.5
|}
</div>

== Limit numbers ==

{{Tracked|T6740}}
This section details how to remove numbers beyond a certain limit by adding the <code>data-srn-limit="''N''"</code> attribute and value to the table wikitext, where ''N'' is a number limited to certain values according to the "Usage" section above. 10 is one allowed value used in this section.

Due to limitations in CSS (styles), there are some restrictions to make it work properly. The table needs to use the <code>sortable</code> class so column headers are moved out of the sortable area ({{Tag|tbody|o}} element) to exclude them from the count. Avoid adding <code>sorttop</code> (uses <code>static-row-header</code>) rows above the sortable data since they aren't excluded from the count before sorting. Avoid adding <code>static-row-numbers-norank</code> rows in the sortable data since they aren't excluded from the count when ordered within the numbered limit.

<div style="display: inline-grid;">
'''Wikitext:'''
<syntaxhighlight lang="wikitext" highlight=1-2,6,32,34>
{{static row numbers}}
{| class="wikitable sortable static-row-numbers" data-srn-limit="10"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|-
| Orange || 2 || 9 || 5
|-
| Yellow || 3 || 7 || 4
|-
| Green || 5 || 6 || 2
|-
| Purple || 6 || 4 || 1
|-
| Pink || 8 || 3 || 7
|-
| Black || 9 || 2 || 8
|-
| White || 11 || 1 || 10
|-
| Gray || 12 || 12 || 11
|- class="sortbottom static-row-header"
| '''Total''' || 78 || 70 || 78
|- class="sortbottom static-row-header"
| '''Average''' || 6.5 || 5.8 || 6.5
|}
</syntaxhighlight>
</div>

<div style="display: inline-grid;">
'''Produces:'''
{{static row numbers}}
{| class="wikitable sortable static-row-numbers" data-srn-limit="10"
|-
! rowspan="2" | Color
! colspan="3" | Data
|- class="static-row-header"
! A !! B !! C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|-
| Orange || 2 || 9 || 5
|-
| Yellow || 3 || 7 || 4
|-
| Green || 5 || 6 || 2
|-
| Purple || 6 || 4 || 1
|-
| Pink || 8 || 3 || 7
|-
| Black || 9 || 2 || 8
|-
| White || 11 || 1 || 10
|-
| Gray || 12 || 12 || 11
|- class="sortbottom static-row-header"
| '''Total''' || 78 || 70 || 78
|- class="sortbottom static-row-header"
| '''Average''' || 6.5 || 5.8 || 6.5
|}
</div>

== Redirects ==

* {{tl|Srn}}
* {{tl|Fixed row numbers}}

== See also ==

* {{t|Row numbers}} - Alternative method to add row numbers that are sortable and adjust when rows are deleted/inserted.
* [[Help:Sortable tables#Maintaining tables sorted alphabetically or by rank]]
* {{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}} - makes row and/or column headers stick to the top and/or left of the page while scrolling through table data.
* {{t|sort under}} - moves the sorting arrows under the headers.
* {{t|row hover highlight}} - adds row hover highlighting, and option for white background.
* {{t|table alignment}} - aligns the cells in a column, or a whole table.

<includeonly>{{Sandbox other||

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

Template:Static row numbers/doc - Revision history

WillSysAd: 1 revision imported

wikipedia>Timeshifter: /* */ {{High-use}}