Best practises for tables with header titles in both axis (vertical/horizontal)

Question

For tables/matrix in printed paper is very common to see the 2 axis/header titles separated by a diagonal bar

Also common to see in printed probability/impact matrix

However, HTML or excel(AFAIK) doesn't allow this visualization, so previous style is not common to see in digital content.

I think the more standard/common options are:

Fig.1

Fig.2

Fig.3

Fig1 has be the format/style more compatible with CSV (just missing color and bold)

Are there other options? Is there any theory or study about this type of tables? What do you think is the best solution in terms of UX?

Is there any modern language or technology that supports the cell with 2 values separated by a diagonal bar?

Answer 1

You left out an obvious form: Columnar with two-row headers for some columns. It's like your Fig.1, but conveys the associations of the various headers semantically, for the benefit of screen readers and other assistive technologies.

At codepen: https://codepen.io/ferdnyc/pen/WNPMzxj

(I used colgroup to define the two groups of columns, which both makes it easier to style them collectively and provides additional semantic structure to the table.)

HTML:

<table>
<colgroup>
<col class="categories" />
<col span=3 class="processes" />
</colgroup>
<thead>
<tr>
<th scope="column" rowspan=2 style="vertical-align:bottom">Categories</th>
<th scope="copgroup" colspan=3 style="border-bottom: 0">Processes</th>
</tr>
<tr>
<th scope="column">Proc1</th>
<th scope="column">Proc2</th>
<th scope="column">Proc3</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Cat1</th><td>x</td><td>x</td><td>x</td></tr>
<tr><th scope="row">Cat2</th><td>x</td><td>x</td><td>x</td></tr>
<tr><th scope="row">Cat3</th><td>x</td><td>x</td><td>x</td></tr>
</tbody>
</table>

CSS:

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #000;
  margin: 0;
  padding: 2px;
}
thead {
  border-bottom: 2px solid #000;
}
.categories {
  border-right: 2px solid black;
  background-color: rgba(0, 255, 0, 0.2)
}
.processes {
  background-color: rgba(0, 128, 255, 0.2)
}
td { text-align: center; }