I have a hierarchical table I want to display in HTML. The <ul> and <ol> tags work great for the hierarchical part of things, but I want to have 2 or 3 columns total where the leftmost column is indented hierarchically, e.g.
but I also want each item to have some corresponding information on a column on the right.
How can I do this with HTML and CSS?
With a table.
but I also want each item to have some corresponding information on a column on the right.
That is tabular information.
Otherwise, you might be able to use <ol>/<ul> and make each element a <dl> (definition list), styled in such a way to make it look tabular, for example by floating every <dd> to the right.
<ol>
<li>
<dl>
<dt>element 1</dt>
<dd>corresponding information 1.1</dd>
<dd>corresponding information 1.2</dd>
</dl>
</li>
<li>
<dl>
<dt>element 2</dt>
<dd>corresponding information 2.1</dd>
</dl>
</li>
<ol>