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 would present it by using a table and by adding custom data attributes to the td tags:

    

        
1
        
Test
        
Test 1
    
    

        
1.1
        
Another
        
Test 1.1
    
    

        
1.1.1
        
Another
        
Test 1.1.1
    
        

        
1.1.2
        
Another one
        
Another test 1.1.2
    
    

        
2
        
Test
        
Test 2
    

Then, with the help of jQuery, set the padding of each cell value in your table:

$("td")
    .css("padding-left", function (index) {
    return 10 * parseInt($(this).data("indent")) + "px";
});

See it working on jsFiddle.