Difference between revisions of "Template:Diagonal split header/doc"
>Mornsta-gpuser |
>Mornsta-gpuser |
||
| Line 1: | Line 1: | ||
| − | ==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 | + | {| class="wikitable" style="margin:0 auto;text-align:center;" |
| − | ! {{diagonal split header| | + | ! {{diagonal split header|<span style{{=}}"padding-right:2em;">From</span>|To }} !! Solid !! Liquid !! Gas |
|- | |- | ||
! Solid | ! Solid | ||
| Line 20: | Line 20: | ||
=== Background colour and non-header cells === | === 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 <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: | 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: | ||
| − | {| class="wikitable | + | {| class="wikitable" style="margin:0 auto;text-align:center;" |
! {{diagonal split header|{{color|#009|Pair 1}}|{{color|#900|Pair 2}}|yellow}} | ! {{diagonal split header|{{color|#009|Pair 1}}|{{color|#900|Pair 2}}|yellow}} | ||
! style="width:6em;background:yellow;" | {{color|#900|"Friend"<br />(cooperate)}} | ! style="width:6em;background:yellow;" | {{color|#900|"Friend"<br />(cooperate)}} | ||
Revision as of 15:55, 21 March 2019
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 (<br />), 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:
| Template:Color | Template:Color | |
|---|---|---|
| Template:Color | ||
| Template:Color |
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 |