Difference between revisions of "Template:Diagonal split header/doc"

From blackwiki
Jump to navigation Jump to search
imported>Cmglee
(→‎Usage: Update documentation)
imported>Vanisaac
m (→‎Template data: clean up per WP:CAT#T and WP:AWBREQ add template:Sandbox other)
 
(9 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
== Usage ==
 
== Usage ==
 
This template simulates a table header cell split diagonally, a device often used to compactly label headers of rows and columns, as in this example:
 
This template simulates a table header cell split diagonally, a device often used to compactly label headers of rows and columns, as in this example:
{| class="wikitable" style="margin-left:auto;margin-right:auto;text-align:center;"
+
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header|From |To}} !! Solid !! Liquid !! Gas
+
! {{diagonal split header|<span style{{=}}"padding-right:2em;">From</span>|To&nbsp;}} !! Solid !! Liquid !! Gas
 
|-
 
|-
 
! Solid
 
! Solid
Line 19: Line 19:
 
To use it, create a header cell using <code>!</code> followed by <code><nowiki>{{diagonal split header|NATURE-OF-ROW-HEADERS|NATURE-OF-COLUMN-HEADERS}}</nowiki></code>.
 
To use it, create a header cell using <code>!</code> followed by <code><nowiki>{{diagonal split header|NATURE-OF-ROW-HEADERS|NATURE-OF-COLUMN-HEADERS}}</nowiki></code>.
  
As the effect is achieved by drawing a diagonal line across the cell, the two headers are still part of the same cell and can easily overrun the line. A remedy is to pad the headers with non-breaking spaces (<code>&amp;nbsp;</code>) and/or line breaks (<code>&lt;br /&gt;</code>), as in the example above. The template user is responsible for checking that it does not overrun on common Web browsers.
+
As the effect is achieved by drawing a diagonal line across the cell, the two headers are still part of the same cell and can easily overrun the line. A remedy is to pad the headers with non-breaking spaces (<code>&amp;nbsp;</code>), line breaks {{nobr|(<code>&lt;br /&gt;</code>),}} and/or CSS (escape <code>=</code> signs as <code><nowiki>{{=}}</nowiki></code>), as in the example above. The template user is responsible for checking that it does not overrun on common Web browsers.
  
A third parameter can be added to change the background colour from the standard header cell colour. Changing it to <code>white</code>, <code>#fff</code>, or <code>#f8f9fa</code> (the standard non-header background colour) lets the template be applied to non-header cells. Prefix it with <code>|</code> instead of <code>!</code>, as in this ''Friend or Foe?'' payoff matrix:
+
=== Background colour and non-header cells ===
{| class="wikitable" style="margin-left:auto;margin-right:auto;text-align:center;"
+
A third parameter can be added to change the background colour from the standard header cell colour. Changing it to <code>transparent</code> (or another colour such as <code>white</code>, or <code>#ffffff</code>) lets the template be applied to non-header cells. Prefix it with <code>|</code> instead of <code>!</code>, as in this ''Friend or Foe?'' payoff matrix:
! {{diagonal split header|{{color|#009|Pair 1}}|{{color|#900|Pair 2}}}}
+
{| class="wikitable" style="margin:0 auto;text-align:center;"
! scope="col" style="width:6em;" | {{color|#900|"Friend"<br />(cooperate)}}
+
! {{diagonal split header|{{color|#009|Pair 1}}|{{color|#900|Pair 2}}|yellow}}
! scope="col" style="width:6em;" | {{color|#900|"Foe"<br />(defect)}}
+
! style="width:6em;background:yellow;" | {{color|#900|"Friend"<br />(cooperate)}}
 +
! style="width:6em;background:yellow;" | {{color|#900|"Foe"<br />(defect)}}
 
|-
 
|-
! scope="row" style="width:6em;" | {{color|#009|"Friend"<br />(cooperate)}}
+
! style="width:6em;background:yellow;" | {{color|#009|"Friend"<br />(cooperate)}}
| {{diagonal split header|{{color|#009|1}}|{{color|#900|1}}|white}}
+
| {{diagonal split header|{{color|#009|1}}|{{color|#900|1}}|#99ff99}}
| {{diagonal split header|{{color|#009|0}}|{{color|#900|2}}|white}}
+
| {{diagonal split header|{{color|#009|0}}|{{color|#900|2}}|transparent}}
 
|-
 
|-
! scope="row" | {{color|#009|"Foe"<br />(defect)}}
+
! style="width:6em;background:yellow;" | {{color|#009|"Foe"<br />(defect)}}
| {{diagonal split header|{{color|#009|2}}|{{color|#900|0}}|white}}
+
| {{diagonal split header|{{color|#009|2}}|{{color|#900|0}}|transparent}}
| {{diagonal split header|{{color|#009|0}}|{{color|#900|0}}|white}}
+
| {{diagonal split header|{{color|#009|0}}|{{color|#900|0}}|#fcc}}
 
|}
 
|}
  
The template is compatible with collapsible tables, and cells using colspan or rowspan, in which case place the colspan/rowspan attribute between <code>!</code> and <code><nowiki>{{diagonal split header &hellip;}}</nowiki></code>. It is not compatible with sortable tables, as the sort arrows are not drawn, but this problem can be resolved by using a second header row:
+
=== Spanning columns and rows, and collapsible and sortable tables ===
 +
The template is compatible with collapsible tables, and cells using colspan or rowspan, in which case place the colspan/rowspan attribute between <code>!</code> and <code><nowiki>{{diagonal split header ...}}</nowiki></code>. It is not compatible with sortable tables, as the sort arrows are not drawn, but this problem can be resolved by using a second header row:
  
{| class="wikitable sortable mw-collapsible" style="margin-left:auto;margin-right:auto;text-align:center;"
+
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{diagonal split header|Township|''n''<br />}} !! colspan="2"|{{#expr:{{CURRENTYEAR}} - 1}} !! {{CURRENTYEAR}}
+
! colspan="2" rowspan="2" {{diagonal split header|&nbsp; City|''n''}} !!{{#expr:{{CURRENTYEAR}} - 1}} !! colspan="2"|{{CURRENTYEAR}}&nbsp;
 
|-
 
|-
! Nov !! Dec !! Jan
+
! Dec !! Jan !! Feb
 
|-
 
|-
! Aoraki !! Mount Cook
+
! Roma !! Rome
 
| 8 || 1 || 6
 
| 8 || 1 || 6
 
|-
 
|-
! Aparima !! Riverton
+
! Venezia !! Venice
 
| 3 || 5 || 7
 
| 3 || 5 || 7
 
|-
 
|-
! Waiau !! Franz Josef
+
! Firenze !! Florence
 
| 4 || 9 || 2
 
| 4 || 9 || 2
 
|}
 
|}
 
 
==Template data==
 
==Template data==
 
+
 
<templatedata>{
 
<templatedata>{
  "description": "Simulate a table header cell split diagonally",
+
"description": "Simulate a table header cell split diagonally",
  "params": {
+
"params": {
    "1": {
+
"1": {
      "label": "Rows",
+
"label": "Rows",
      "description": "header of row headers, shown on the bottom left",
+
"description": "header of row headers, shown on the bottom left",
      "example": "''Y-axis''",
+
"example": "''Y-axis''",
      "type": "string",
+
"type": "string",
      "required": true
+
"required": true
    },
+
},
    "2": {
+
"2": {
      "label": "Columns",
+
"label": "Columns",
      "description": "header of column headers, shown on the top right",
+
"description": "header of column headers, shown on the top right",
      "example": "{{color|#6cf|X-axis}}",
+
"example": "{{color|#6cf|X-axis}}",
      "type": "string",
+
"type": "string",
      "required": true
+
"required": true
    },
+
},
    "3": {
+
"3": {
      "label": "Background colour",
+
"label": "Background colour",
      "description": "Optional colour of background, otherwise the standard header background is used",
+
"description": "Optional colour of background, use <code>transparent</code> for standard non-header background",
      "default": "#eaecf0",
+
"default": "#eaecf0",
      "example": "#f8f9fa",
+
"example": "transparent",
      "type": "string",
+
"type": "string",
      "required": false
+
"required": false
    }
+
}
  }
+
}
 
}</templatedata>
 
}</templatedata>
 
+
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | |
+
<includeonly>{{Sandbox other||
 
<!-- Categories below this line, please; interwikis at Wikidata -->
 
<!-- Categories below this line, please; interwikis at Wikidata -->
 
[[Category:Table cell templates]]
 
[[Category:Table cell templates]]
 
}}</includeonly>
 
}}</includeonly>

Latest revision as of 23:40, 24 April 2020

Usage

This template simulates a table header cell split diagonally, a device often used to compactly label headers of rows and columns, as in this example:

To 
From
Solid Liquid Gas
Solid Solid-solid transformation Melting Sublimation
Liquid Freezing Boiling/evaporation
Gas Deposition Condensation

To use it, create a header cell using ! followed by {{diagonal split header|NATURE-OF-ROW-HEADERS|NATURE-OF-COLUMN-HEADERS}}.

As the effect is achieved by drawing a diagonal line across the cell, the two headers are still part of the same cell and can easily overrun the line. A remedy is to pad the headers with non-breaking spaces (&nbsp;), line breaks Template:Nobr and/or CSS (escape = signs as {{=}}), as in the example above. The template user is responsible for checking that it does not overrun on common Web browsers.

Background colour and non-header cells

A third parameter can be added to change the background colour from the standard header cell colour. Changing it to transparent (or another colour such as white, or #ffffff) lets the template be applied to non-header cells. Prefix it with | instead of !, as in this Friend or Foe? payoff matrix:

Pair 2
Pair 1
"Friend"
(cooperate)
"Foe"
(defect)
"Friend"
(cooperate)
1
1
2
0
"Foe"
(defect)
0
2
0
0

Spanning columns and rows, and collapsible and sortable tables

The template is compatible with collapsible tables, and cells using colspan or rowspan, in which case place the colspan/rowspan attribute between ! and {{diagonal split header ...}}. It is not compatible with sortable tables, as the sort arrows are not drawn, but this problem can be resolved by using a second header row:

n
  City
2025 2026 
Dec Jan Feb
Roma Rome 8 1 6
Venezia Venice 3 5 7
Firenze Florence 4 9 2

Template data

Simulate a table header cell split diagonally

Template parameters

ParameterDescriptionTypeStatus
Rows1

header of row headers, shown on the bottom left

Example
''Y-axis''
Stringrequired
Columns2

header of column headers, shown on the top right

Example
{{color|#6cf|X-axis}}
Stringrequired
Background colour3

Optional colour of background, use <code>transparent</code> for standard non-header background

Default
#eaecf0
Example
transparent
Stringoptional