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

I think there are two sensible ways how to represent this in HTML:

• use a table and make the relation/hierarchy explicit with natural language
• use sectioning elements (resp. headings if you use HTML 4.01)

table with a column explaining the hierarchy

If there is no markup for defining this relationship, you should use text. If the visual representation is unambiguous, you could visually hide this text so that it is only accessible for screenreader/text browser users.

In your case, you could add a column that explains the relationship of rows that are "sub items":

  

    
Seq
 
    
Relation
 
    
Item Name
    
Min
    
Max
  

  

  

    
2
    
 
    
Name
    
1
    
1
  

  

    
2.1
    
child of Name
    
First Name
    
1
    
1
  

Each row could get an id (with value of Seq or Item Name), so that this row can be linked {note that id values starting with a digit are not allowed in HTML 4.01; you could use something like id="seq-2.1" there}. If an item is a child of another item, you could link to the row of the parent item.

This way you make it clear for humans, and machines still see that these rows are connected, although the specific semantics of this relation is not machine-readable. You could use a link type (rel value) here if to make the meaning of the relation explicitly clear. In HTML 4.01 you could create a value yourself, in HTML5 it would need to be registered first.

sectioning elements / headings

Instead of using a table, you could make use of HTML’s outlining. {The following example uses HTML5’s sectioning elements. If you use HTML 4.01, simply replace the sectioning elements with div (or no element at all) and use headings only.}

Each section (introduced by a heading) represents an item. The outline of the headings (resp. nesting of the sectioning elements) represents the hierarchy of your items.

Here is an example to see the whole structure:

 


   


   

     
Identifier
   

   

     
Name

     

       
First Name
     

     

       
Middle Name
     

     

       
Last Name
     

   

   

     
Age
   

 

Each section could contain a dl for the properties:

  
Age

  

    
Min
    
1
    
Max
    
1
  

Depending of the actual meaning of your content, you could use the code element for the item names (e.g. if it describes elements of a markup language, for example), and/or the dfn element, if the following content is a definition of that item.