imported>Matma Rex: /* Spanning columns and rows, and collapsible and sortable tables */

2023-02-24T00:56:42Z

Spanning columns and rows, and collapsible and sortable tables

New page

{{Documentation subpage}}


== 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:
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header|From|To }} !! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation
|-
! Liquid
| Freezing || — || Boiling/evaporation
|-
! Gas
| Deposition || Condensation || —
|}

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

There are two variants of the template with different – and sadly incompatible – features:

* [[Template:Diagonal split header]] allows splitting the background color (see below)
* [[Template:Diagonal split header 2]] produces a line with consistent thickness in very large table cells (see below)

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>&nbsp;</code>), line breaks {{nobr|(<code> </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.

{|
! Wiki source
! Rendered result
|-style="vertical-align: top;"
|<pre><nowiki>
{| class="wikitable"
! {{diagonal split header|From|To}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation=
|}
</nowiki></pre>
| style="padding-left:1em" |
{| class="wikitable"
! {{diagonal split header|From|To}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation=
|}
|}

=== Background colour and non-header cells ===
''Diagonal split header only''

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.

You may also indicate a second color in the fourth parameter (its default is the same as the third parameter), the first color being used for the lower left half of the cell, the second color being used for the upper right half of the cell.

Prefix it with <code>|</code> for data cells instead of <code>!</code> for header cells, as in this ''Friend or Foe?'' payoff matrix:

;Example
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header| Pair 1 | {{color|#900|Pair 2}} | cyan | yellow}}
! style="width:6em;background:yellow;"| {{color|#900|"Friend" (cooperate)}}
! style="width:6em;background:yellow;"| {{color|#900|"Foe" (defect)}}
|-
! style="width:6em;background:cyan"| "Friend" (cooperate)
| {{diagonal split header| 1 | {{color|#900|1}} | transparent}}
| {{diagonal split header| 0 | {{color|#900|2}} | pink | palegreen}}
|-
! style="width:6em;background:cyan"| "Foe" (defect)
| {{diagonal split header| 2 | {{color|#900|0}} | palegreen | pink}}
| {{diagonal split header| 0 | {{color|#900|0}} | pink}}
|}

;Code
{{divhide|Wiki markup|color=#EAECF0}}
<pre><nowiki>
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header| Pair 1 | {{color|#900|Pair 2}} | cyan | yellow}}
! style="width:6em;background:yellow;"| {{color|#900|"Friend" (cooperate)}}
! style="width:6em;background:yellow;"| {{color|#900|"Foe" (defect)}}
|-
! style="width:6em;background:cyan "| "Friend" (cooperate)
| {{diagonal split header| 1 | {{color|#900|1}} | transparent}}
| {{diagonal split header| 0 | {{color|#900|2}} | pink | palegreen}}
|-
! style="width:6em;background:cyan "| "Foe" (defect)
| {{diagonal split header| 2 | {{color|#900|0}} | palegreen | pink}}
| {{diagonal split header| 0 | {{color|#900|0}} | pink}}
|}
</nowiki></pre>
{{divhide|end}}

=== Spanning columns and rows, and collapsible and sortable tables ===
''Diagonal split header 2 recommended''

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 2 ...}}</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.

In large table cells like this, use ''Diagonal split header 2'' to produce a better-looking line, with the same thickness as the cell borders:

;Example
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{diagonal split header 2|City|''n''}}
! {{#expr:{{CURRENTYEAR}} - 1}}
! colspan="2"|{{CURRENTYEAR}} 
|-
! Dec !! Jan !! Feb
|-
! Roma !! Rome
| 8 || 1 || 6
|-
! Venezia !! Venice
| 3 || 5 || 7
|-
! Firenze !! Florence
| 4 || 9 || 2
|}

;Code
{{divhide|Wiki markup|color=#EAECF0}}
<pre><nowiki>
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{diagonal split header 2|City|''n''}}
! {{#expr:{{CURRENTYEAR}} - 1}}
! colspan="2"|{{CURRENTYEAR}} 
|-
! Dec !! Jan !! Feb
|-
! Roma !! Rome
| 8 || 1 || 6
|-
! Venezia !! Venice
| 3 || 5 || 7
|-
! Firenze !! Florence
| 4 || 9 || 2
|}
</nowiki></pre>
{{divhide|end}}

==Template data==

<templatedata>{
"description": "Simulate a table header cell split diagonally",
"params": {
"1": {
"label": "Rows",
"description": "header of row headers, shown on the bottom left",
"example": "''Y-axis''",
"type": "string",
"required": true
},
"2": {
"label": "Columns",
"description": "header of column headers, shown on the top right",
"example": "{{color|#6cf|X-axis}}",
"type": "string",
"required": true
},
"3": {
"label": "Background colour",
"description": "Optional colour of background, use <code>transparent</code> for standard non-header background",
"default": "#eaecf0",
"example": "transparent",
"type": "string",
"required": false
},
"4": {
"label": "Upper right background colour",
"description": "Optional colour of background for the upper right half of the cell, use <code>transparent</code> for standard non-header background",
"default": "same background colour as parameter 3, #eaecf0 otherwise",
"example": "transparent",
"type": "string",
"required": false
}
}
}</templatedata>

== Technical notes ==
* It is possible to create a version without the line-overrun per [https://www.peterkrautzberger.org/0213/ Krautzberger]. This one works by drawing a line and using a 2x2 CSS grid with the bottom-left and top-right corners.See [https://caniuse.com/css-grid caniuse] for support of the required css-grid feature; compare with (unprefixed) [https://caniuse.com/css-gradients css-gradients] underlying the current implementation.
* Neither implementation supports laying out text along the diagonal, as the browser is unaware of the triangular shape. CSS-shapes may be a solution, but the easier shape-inside approach is yet to be standardized.
<includeonly>{{Sandbox other||

[[Category:Table cell templates]]
}}</includeonly>

Template:Diagonal split header/doc - Revision history

imported>Matma Rex: /* Spanning columns and rows, and collapsible and sortable tables */