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

From Dragalia Lost Wiki
Jump to navigation Jump to search
>Mornsta-gpuser
>Mornsta-gpuser
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Usage==
+
{{doc/start}}
 +
== 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:0 auto;text-align:center;"
 
{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header|<span style{{=}}"padding-right:2em;">From</span>|To&nbsp;}} !! Solid !! Liquid !! Gas
+
! {{diagonal split header|From|To}} ! Solid !! Liquid !! Gas
 
|-
 
|-
 
! Solid
 
! Solid
Line 14: Line 15:
 
|}
 
|}
  
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|COLOR-OF-ROW-HEADERS|COLOR-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>), 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.
+
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>). The template user is responsible for checking that it does not overrun on common Web browsers.
  
 
=== 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 and fourth 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.
{| class="wikitable" style="margin:0 auto;text-align:center;"
+
{{doc/end}}
! {{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|"Foe"<br />(defect)}}
 
|-
 
! style="width:6em;background:yellow;" | {{color|#009|"Friend"<br />(cooperate)}}
 
| {{diagonal split header|{{color|#009|1}}|{{color|#900|1}}|#99ff99}}
 
| {{diagonal split header|{{color|#009|0}}|{{color|#900|2}}|transparent}}
 
|-
 
! style="width:6em;background:yellow;" | {{color|#009|"Foe"<br />(defect)}}
 
| {{diagonal split header|{{color|#009|2}}|{{color|#900|0}}|transparent}}
 
| {{diagonal split header|{{color|#009|0}}|{{color|#900|0}}|#fcc}}
 
|}
 
 
 
=== 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 &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:
 
 
 
{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
 
! colspan="2" rowspan="2" {{diagonal split header|&nbsp; City|''n''}} !!{{#expr:{{CURRENTYEAR}} - 1}} !!  colspan="2"|{{CURRENTYEAR}}&nbsp;
 
|-
 
! Dec !! Jan !! Feb
 
|-
 
! Roma !! Rome
 
| 8 || 1 || 6
 
|-
 
! Venezia !! Venice
 
| 3 || 5 || 7
 
|-
 
! Firenze !! Florence
 
| 4 || 9 || 2
 
|}
 

Latest revision as of 02:15, 23 March 2019

50px Documentation

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|COLOR-OF-ROW-HEADERS|COLOR-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 (<br />), and/or CSS (escape = signs as {{=}}). The template user is responsible for checking that it does not overrun on common Web browsers.

Background colour and non-header cells

A third and fourth 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.