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 use it, create a header cell using  followed by.

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 , 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
 * -style="vertical-align: top;"
 * style="padding-left:1em" |


 * }

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  (or another colour such as , or  ) lets the template be applied to non-header cells. Prefix it with  instead of , as in this Friend or Foe? payoff matrix:

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. 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
{ "description": "Simulate a table header cell split diagonally", "params": { "1": { "label": "Rows", "description": "header of row headers, shown on the bottom left", "example": "Y-axis", "type": "string", "required": true }, "2": { "label": "Columns", "description": "header of column headers, shown on the top right", "example": "X-axis", "type": "string", "required": true }, "3": { "label": "Background colour", "description": "Optional colour of background, use  for standard non-header background", "default": "#eaecf0", "example": "transparent", "type": "string", "required": false } } }

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.