Template:Vertical header/sandbox

Sample text

This is the template sandbox page for Template:Vertical header (diff).
See also the companion subpage for test cases.

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

This template uses TemplateStyles:

Module:Vertical header/styles.css

This template uses Lua:

Module:Vertical header (sandbox)

This is a template that helps create vertically oriented column headers in tables. It even works for sortable columns.

Although this template was made with table headers in mind, it can work with regular cells as well.

If the header cells have other attributes, for example, colspan or rowspan, there must be no vertical bar | between the attributes and the template call.

If your browser does not support CSS property writing-mode: vertical-rl that makes this template possible, it gracefully degrades to the default display of the table columns.

The |1= text can contain wikilinks ([[]]). You can escape the equals sign either by using {{=}} or by explicitly mentioning the |1= parameter. Styles may contain double quotes.

If you want to move or delete a column in the visual editor you will first need to change the vertical header to a regular header first. When done you can change it back.

Example

{|class="wikitable sortable" style="margin-left:0;"
! {{vertical header|Regular column}}
! {{vertical header|Vertical value column}}
! {{vertical header|nb=1|cellstyle=background-color:gold;color:#202122;|Thin gold column}}
! {{vertical header|class=unsortable|nb=1|Unsortable column}}
|-
| 0 || {{vertical header|va=middle|1}} || 1 || 2
|-
| 3 || {{vertical header|va=middle|5}} || 8 || 13
|-
! {{vertical header|va=top|Regular column}}
! {{vertical header|va=top|Vertical value column}}
! {{vertical header|nb=1|va=top|cellstyle=background-color:gold;color:#202122;|Thin gold column}}
! {{vertical header|class=unsortable|nb=1|va=top|Unsortable column}}
|}

Regular column	Vertical value column	Thin gold column	Unsortable column
0	1	1	2
3	5	8	13
Regular column	Vertical value column	Thin gold column	Unsortable column

Examples

! {{vertical header|Your text here}} – basic example
! {{vertical header|nb=1|Your text here}} – produces a no-bold, sortable header
! {{vertical header|class=unsortable|va=top|Your text here}} – produces an unsortable, top-aligned table header
! colspan="2" {{vertical header|cellstyle=background-color:gold|Your text here}} – produces a header spanning two columns, with a gold background; use no vertical bar after colspan

You can also use the ! {{verth|Your text here}} shorthand.

An example below (from Help:Sortable tables) with headers that span rows or columns (using rowspan and colspan). Note that there is no vertical bar | between rowspan=2 and {{vertical header...}}

name	data columns		another column
name	data	more data	another column
cats	273	53	1
dogs	65	8,492	2
mice	1,649	548	3

{| class="wikitable sortable"
|-
! rowspan=2 {{vertical header|name}}
! colspan=2 {{vertical header|class=unsortable|data columns}}
! rowspan=2 {{vertical header|another column}}
|-
! {{vertical header|data}}
! {{vertical header|more data}}
|-
| cats
| 273
| 53
| 1
|-
| dogs
| 65
| 8,492
| 2
|-
| mice
| 1,649
| 548
| 3
|}

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools.

Vertical header

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Text	`1`	no description	Content	optional
No bold	`nb`	Set to use a normal font weight Suggested values `y`	Unknown	optional
Vertical alignment	`va`	no description Suggested values `bottom` `top` `middle` Default bottom	String	optional
Manual width	`mw`	Override the automatic generation based on the number of br line breaks Example 5em	Unknown	optional
Cell additional classes	`class`	Additional classes for the cell, for example, \|class=unsortable would stop the column from being sortable Example unsortable	String	optional
Div additional styles	`style`	Additional styles for the div containing the rotated text.	String	optional
Cell additional styles	`cellstyle`	Additional styles for the entire cell. May contain double quotes. Use this not the cell's style="" attribute. Use background-color: not background: for sortable columns. Example background-color:red	String	optional