Search code examples
htmluser-interfacepresentation

Using HTML to present stuctured data

I have a question about how to present some structured data using HTML.

I have some tree-like data, which you might normally present using sections and subsections (i.e. <h1>, <h2>, etc.) and/or using nested lists (i.e. lists whose items contain lists of sub-items).

An example of this data is a to-do list, which has tasks that include sub-tasks and sub-sub-tasks.

Each of these data also has associated properties, for example:

  • bool completed;
  • DateTime completionDate;
  • Priority priority;

My question is, what do you suggest as a good way to present this data on one page, using HTML?

My first idea is to present it as a table:

  • One of the table's columns shows the task or sub-task
  • Other columns in each row show the values of the properties (e.g. "completed", etc.) associated with that task

My problem with this is that showing all tasks and sub-tasks in one table column would lose the information about how the tasks are nested: for example it wouldn't show that the second row is actually a subtask of the first row. Can you suggest a way to work-around that problem? I thought of decorating items with a variable number of chevrons like '>' to show how deeply nested each item is, for example:

TASK                    COMPLETED

Some major task            No
> A subtask                Yes
> Another subtask          Yes
> > A sub-subtask          Yes
Next major task            No

Some problems with that however are:

  • It might look ugly, and I'm not sure that it's as intuitively understandable and as readable as it can be. Might some other ornament, or simply variable-length whitespace indent, be better?
  • I don't see an elegant way to encode it using HTML+CSS; for example, would you insert the ornament using HTML, or insert it using CSS; and if using CSS, would that be by adding something like class="level1" through class="level6" to show the nesting level?

A second way would be to present it as text that flows vertically, for example ...

<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...

... which I will do as well, but I also want a view which lets the reader scan the column of property values, which is easier when the property values are aligned in a column instead of interspersed with other text.

This is more about UI design than coding, but ... I'm surely not the first person to want to display this kind of data, but I don't remember having seen any examples, so I'd like to ask you.

Solution

  • The UI component you want is called a TreeTable (or Tree Table). There are various implementations of it in Javascript/HTML. Here's one that uses Javascript. Here's another one that's pure HTML/CSS (but doesn't collapse/expand)