user interface - Using HTML to present stuctured data

Keywords: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.




4 Answers: 

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)

 

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

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.

 

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.
 

More Articles


r - How to Make RStudio Presentation Self-contained?

I'm writing a presentation in R using RStudio. To create new presentation, I select "R Presentation" from the File => New File menu. RStudio creates new document. Here is the template:New Presentation========================================================author: date: First Slide===================

r - Embed javascript in Xaringan presentation

I have an interactive pooling question created using polleverywhere that would like to insert into my Xaringan rmarkdown presentation:<script src="https://www.polleverywhere.com/multiple_choice_polls/U43TXrlame7hw6J/web.js?height=250&results_count_format=percent&width=300"></script&

objective c - iOS Project Structure for Presentation App

I'm gonna build presentation app, which will present a brandproduct.Presentation will have multiple slides (states) with commonbackground.In some slides I can go back to previous slideMy questions: 1. Do I have to use View Based Application? 2. For each state (slide) should I use separate UIViewCont


android - How to prevent AlertDialog using custom theme from appearing fullscreen?

I am using a custom style for my AlertDialogs, but it is making them appear fullscreen. I've searched around, but I could only seem to find people wanting to make it fullscreen... Here is my style <style name="MyDialog" parent="AlertDialog.AppCompat"> <item name="android:background">

android - Expression of time difference

Given a number of seconds/milliseconds, what is the best method to gracefully/cleanly express this time interval in the user's language, using the Android values/strings.xml API?I am not asking for how to get the days/hours/minutes -- answers for that can be found in how to show milliseconds in days

Print Powerpoint slide with python-pptx

I've been using python-pptx to access slides (I find it much smoother than using win32 as it doesn't need to open the Powerpoint window. However, I've checked the docs but can't find any method of printing a slide. Am I missing something?Here is what I have so far:from pptx import Presentationprs =


html - CSS - Background-size: Cover is too big

When i try to use the background-size:cover property with a fixed position my image becomes too big, and cropped. I'd like it to be the same size as the original image, but i can't figure this out. I'm trying to keep the affect of the image staying in position.#wrapper { width:100%; height:580px;

How can the CAPTCHA process be more user friendly or better implemented?

I have used CAPTCHA on my various web sites in the standard manner where I generated some obfuscated string of characters (odd pair of words, random number, etc.) in an image for the user to manually reproduce in a text box. I am also aware of recaptcha.net which extends the basic functionality of

xml - python-pptx - How to access presentation section titles programmatically?

In Powerpoint, I'd like to create agenda / table of content slides, with section titles serving as input to these agenda slides. Sections allow one to structure a presentation document. They are particularly useful in the slide-sorter and outline mode. Conveniently leveraging section titles for the

Proper way to present field name-value tuples in HTML?

I have a big form in a page and at some portions of it I have some static data that is not editable:First name: JohnBirthday: 1980/1/1These fields are not part of the form (no input), etc. but rather hard-fixed values. I did try a few things but I am confused as to what is the most appropriate thing