Template:diagonal split header

From Wiktionary, the free dictionary
Jump to navigation Jump to search

Usage

[edit]

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 (<br>), and/or CSS (escape = signs as {{=}}), as in the example above.

For example, if a header "Header" is overrunning the line at the end of the word, it can be marked up like this: <span style{{=}}"padding-right: 2em;">Header</span>. If it is overrunning the line at the beginning of the word, use <span style{{=}}"padding-left: 2em;">Header</span>. To reduce the size of the header text, add font-size: 85%; to the span statement (this is equivalent to {{small}}), and to make the header text bold add font-weight: bold;.

The template user is responsible for checking that headers do 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=
|}
To
From
Solid Liquid Gas
Solid Solid-solid transformation Melting Sublimation=

Background colour and non-header cells

[edit]

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.

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 | for data cells instead of ! for header cells, as in this Friend or Foe? payoff matrix:

Example
Pair 2
Pair 1
"Friend" (cooperate) "Foe" (defect)
"Friend" (cooperate)
1
1
2
0
"Foe" (defect)
0
2
0
0
Code
{| 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}}
|}

Spanning columns and rows, and collapsible and sortable tables

[edit]

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

Template data

[edit]

Simulate a table header cell split diagonally

Template parameters[Edit template data]

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
Upper right background colour4

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
Stringoptional

Technical information

[edit]
  • 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.