Template:Diagonal split header/doc

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.

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

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

Template parameters

Parameter		Description	Type	Status
Rows	1	header of row headers, shown on the bottom left Example ''Y-axis''	String	required
Columns	2	header of column headers, shown on the top right Example {{color|#6cf|X-axis}}	String	required
Background colour	3	Optional colour of background, use <code>transparent</code> for standard non-header background Default #eaecf0 Example transparent	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.