imported>Deadfire: creation

2024-11-08T20:27:26Z

creation

New page

{{Documentation subpage}}

{{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: white;"
|+ 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.
|-
| 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.
|-
|<code>static-row-header-left</code>
|Left aligns numbers. Default right.
|-
|<code>static-row-header-center</code>
|Center aligns numbers. Default right.
|}

{| class="wikitable" style="background-color: white;"
|+ 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.''

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

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>

== 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 [[w:soft hyphen|soft hyphen]] to a word to allow it to wrap.
More [[w: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

imported>Deadfire: creation