Template:Diagonal split header/doc: Difference between revisions
(Created page with "{{Documentation subpage}} <!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see Wikipedia:Wikidata) --> == Usage == This...") |
No edit summary |
||
Line 80: | Line 80: | ||
<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, use <code>transparent</code> for standard non-header background", | "description": "Optional colour of background, use <code>transparent</code> for standard non-header background", | ||
"default": "# | "default": "#3498DB", | ||
"example": "transparent", | "example": "transparent", | ||
"type": "string", | "type": "string", | ||
"required": false | "required": false | ||
} | } | ||
} | } | ||
}</templatedata> | }</templatedata> | ||
Latest revision as of 20:05, 26 May 2021
This is a documentation subpage for Template:Diagonal split header. It contains usage information, categories and other content that is not part of the original template page. |
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 (
), 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.
Wiki source | Rendered result | ||||||||
---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" ! {{diagonal split header|From|To}} ! Solid !! Liquid !! Gas |- ! Solid | Solid-solid transformation || Melting || Sublimation= |} |
|
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 |
2023 | 2024 | ||
---|---|---|---|---|
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
Parameter | Description | Type | Status | |
---|---|---|---|---|
Rows | 1 | header of row headers, shown on the bottom left
| String | required |
Columns | 2 | header of column headers, shown on the top right
| String | required |
Background colour | 3 | Optional colour of background, use <code>transparent</code> for standard non-header background
| String | optional |
Technical notes
- It is possible to create a version without the line-overrun per Krautzberger. This one works by drawing a line and using a 2x2 CSS grid with the bottom-left and top-right corners.
See caniuse for support of the required css-grid feature; compare with (unprefixed) 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.