Combining a table and hierarchical list in HTML

Question

I\'m working to redesign a legacy toolset and I\'m looking at how to better display some information both presentationally and semantically.

The data hierarchically in n

Answer 1

My suggestion would be to use nested ordered lists to retain your hierarchical structure, and then description lists to represent the "columns" for each row.

For example, the description list for the first row could look something like this:

  
Item Name
  
Identifier
  
Min
  
1
  
Max
  
1
  
Notes
  
(Required)

You would have to use CSS to hide the description terms (since you don't want them showing up on every row) and to adjust the layout to look more like a table.

The downside to this format is that you are going to be duplicating the column headings on every single row. But semantically I think that makes the most sense, and it should also make the content more meaningful to a screen reader.

I've made a first attempt at the CSS for this so you can get an idea of how it could work. This is probably not very well done, but at least it'll give you something to start with.

CodePen Link