Using HTML to present stuctured data - html

Question

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.

Answer 1

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)

Answer 2

You're talking about nesting in the hierarchal structure of HTML. By its very nature you don't really have to do any special work at all.
A simple, recursive list is all you need, without any special considerations for depth or anything. You can even add expand-collapse functionality to any level if you want without much extra work.
<ul>
<li>
<div class="task-group">
<span class="task-title">Task 1</span>
<span class="task-status">Complete</span>
<ul>
<li>
<div class="task-group">
<span class="task-title">Task 1a</span>
<span class="task-status">Complete</span>
</div>
<li>
<div class="task-group">
<span class="task-title">Task 1b</span>
<span class="task-status">Incomplete</span>
</div>
</li>
</ul>
</div>
</li>
</ul>
Then you just style each task-group to have a relative margin to its parent so that the nesting becomes recursive. Set up fancy (or no) bullets for the tasks with li's style, and customize the positioning of the task-status class to make it lay out the way you want it.
You can also get lower subtasks to recursively inherit smaller text size by setting a relative text-size in the CSS. Something like .75em, so that each level is three quarters smaller than the previous level.
Something like this:
.task-group {
font-size: .75em;
margin-left: 1em;
}
.task-title {
text-decoration: underline;
float: left;
}
.task-status {
float: right;
}

Answer 3

UL, OL and LI are good for this purpose. Structuring it as JSON is even better. You can render the HTML from JSON in any way you wish.

Answer 4

The question has no right or wrong answer. But I'll answer this question within a question.
If using CSS, would that be by adding
something like class="level1" through
class="level6" to show the nesting
level?
No. You would use the appropriate selector in CSS.
li {
// level one style
}
li li
{
// level two style
}
etc.