0

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

Also common to see in printed probability/impact matrix

risk matrix with a separation diagonal bar

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 excel example1

Fig.2 excel example2

Fig.3 excel example3

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?

4
  • 1
    CSS solution in SO, Excel solution here
    – Danielillo
    Feb 8, 2022 at 10:17
  • I see it too complicated, i was hoping a more "simple/standard" solution. At the moment a solution based in fig3 is working fine Feb 16, 2022 at 15:00
  • 1
    Fig.3 (and to an extent, Fig.1) violate the WCAG rule that color should not be used as the only visual means of conveying information. For a color-blind reader, there's nothing to indicate that the word "processes" is associated with the column headings, and "categories" is associated with the row headings. Fig. 2 successfully makes that clear, although the rotated text has its own drawbacks.
    – FeRD
    Nov 20, 2023 at 1:13
  • Fig 2. format is not good for integration purposes and the import/export from/to tabular formats Nov 23, 2023 at 10:51

1 Answer 1

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; }

enter image description here

5
  • Can you explain more why this is delivers a better UX, why it's more accessible, readable etc. and focus less on the code? This isn't StackOverflow.
    – jazZRo
    Nov 20, 2023 at 8:57
  • I actually had an error (just fixed) in my HTML, now the "Categories" heading is correctly scoped to the column rather than the row.
    – FeRD
    Nov 24, 2023 at 9:48
  • (Actually, two errors. As I just learned, the "Processes" heading should have scope="colgroup", not scope="column".)
    – FeRD
    Nov 24, 2023 at 10:02
  • @jazZRo The 'diagonal trick' in the top-left cell adds an inconsistency: For all other columns the header is the header of that column. For the cell in the top-left it is the header of both the column and the row. Of course after some second most end users will understand what is meant. I think the audience is also important here: In case of power users, it is less of a problem. For casual users it might be.
    – koosvdkolk
    Nov 24, 2023 at 10:21
  • @jazZRo It can be difficult to discuss accessibility without focusing on code, because most accessibility features are invisible in normal rendering. Screen readers leverage well-defined semantic structure and invisible metadata embedded in the code. For data tables, they rely on headings being th elements that are properly defined with scope= attributes. When navigating a data table, in addition to cell contents some may announce all relevant headings for each cell, or announce only the changed headings when moving between cells. ("Categories, Cat1, Processes, Proc2, (cell content)")
    – FeRD
    Nov 24, 2023 at 10:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.