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

UPDATE: I've added the use of IDs and "headers" attribute to, somehow, semantically mark up the hierarchy.

That's definitively tabular data (you should really push the definition of "list" to justify using an UL or DL here!).

I think a good approach would be using different tbodys to group those related rows together (something like this it used here http://www.w3.org/TR/2012/WD-html5-20120329/the-table-element.html#the-table-element see "table being used to mark up a Sudoku puzzle")

  

    

      
Seq
      
Item Name
      
Min
      
Max
    
  
  

    

      
1
      
Identifier
      
1
      
1
    
  
  

    

      
2
      
Name
      
1
      
1
    
    

      
2.1
      
First Name
      
1
      
1
    
    

      
2.2
      
Middle Name
      
-
      
-
    
    

      
2.3
      
Last Name
      
1
      
1
    
    

      
2.3.1
      
Last Name
      
1
      
1
    
    

      
2.3.2
      
Last Name
      
1
      
1
    
  
  

    

      
3
      
Age
      
-
      
1
    
  

Then you could use something like this:

table { border-collapse: collapse; }
tbody { border-bottom:1px solid #000; }
tbody .sub td { padding-left: 10px; }

If fact, I think you can only use tbody to group rows together and leave single rows alone

  1
  Identifier
  1
  1


  
    2
    Name
    1
    1
  
  
    2.1
    First Name
    1
    1
  
  ...


  3
  Age
  -
  1