I want to show data that has more than two dimensions in HTML.
As simple example consider this four-dimensional array, each of whose dimensions can take only the indices 0 and 1, keeping in mind that in practice
- the number of dimensions might be higher;
- there might be more than two values for the index;
- the data is not single letters but numbers of varying length - including about 50% empty cells.
w x y z value
0 0 0 0 A
0 0 0 1 B
0 0 1 0 C
0 0 1 1 D
0 1 0 0 E
0 1 0 1 F
0 1 1 0 G
0 1 1 1 H
1 0 0 0 I
1 0 0 1 J
1 0 1 0 K
1 0 1 1 L
1 1 0 0 M
1 1 0 1 N
1 1 1 0 O
1 1 1 1 P
The above list is, of course, utterly unreadable to the human observer. So I'm looking for a way to display the data in a more human-friendly way.
My idea is to use nested tables to represent the hierarchy of dimensions (unless you got a better idea). For this,
- each nested subtable (representing the higher dimensions) must be visually distinguishable from the encompassing tables;
- similar coordinates in each table need to line up with each other as they would be in the case of only 2 dimensions by being in same row or column.
Consider the snippet below for some illustrations of the issue:
table{border:thin solid;border-collapse:collapse;}
/* Borders should distinguish the nesting depths. */
td{border:thin solid;}
/* Giving explicit width doesn't work since it can't be predicted beforehand - giving fixed widths is just as unmaintainable as giving the borders in the below version. */
td{min-width:1em;}
/* This only helps with alignment of the first row of the subtable. */
td{vertical-align:top;}
/* Resetting to defaults for the flat table. */
.flat-table td{border:none;}
/* This is needed if putting it all into a flat table - but how to distinguish if there's deeper nesting with more than four dimensions? */
td.top{border-top:thin solid;}
td.left{border-left:thin solid;}<h3>1. What it should look like.</h3>
<table>
<tr>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>M</td>
<td>N</td>
</tr>
<tr>
<td>O</td>
<td>P</td>
</tr>
</table>
</td>
</tr>
</table>
<h3>2. How different content sizes break it.</h3>
<table>
<tr>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K - text is longer than in the table above, so the columns don't line up with the table above.</td>
<td>L</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>M</td>
<td>N - text causes a line-break, so the next row of the table won't line up with the other table cell in the horizontal neighbor.</td>
</tr>
<tr>
<td>O</td>
<td>P</td>
</tr>
</table>
</td>
</tr>
</table>
<h3>3. Putting it all in a flat table is unsemantic.</h3>
<table class="flat-table">
<tr>
<td>A</td>
<td>B</td>
<td class="left">E</td>
<td>F</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td class="left">G</td>
<td>H</td>
</tr>
<tr>
<td class="top">I</td>
<td class="top">J</td>
<td class="left top">M</td>
<td class="top">N</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td class="left">O</td>
<td>P</td>
</tr>
</table>
<h3>3.a And it breaks for more than 4 dimensions.</h3>
<table class="flat-table">
<tr>
<td>A1</td>
<td>A2</td>
<td class="left">B</td>
<td class="left">E</td>
<td>F</td>
</tr>
<tr>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td class="top">C</td>
<td class="top">D</td>
<td class="left">G</td>
<td>H</td>
</tr>
<tr>
<td class="top">I</td>
<td class="top">J</td>
<td class="left top">M</td>
<td class="top">N</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td class="left">O</td>
<td>P</td>
</tr>
</table>
<p>
The border between <code>A1 A2</code> and <code>B</code> looks like the border between <code>B</code> and <code>E F</code>, yet it constitutes a different nesting level.
Thicker or differently colored borders are not intuitively comprehensible, unilke the nesting of the tables.
</p>