Using HTML to present stuctured data

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

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 2

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 3

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.

Answer 4

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