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.
<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:
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="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.