HTML+CSS: combining <UL>/<OL> and faux-tabular format

I have a hierarchical table I want to 开发者_如何学Godisplay 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.

• foo
  • foo1
  • foo2
    • foo2a
  • foo3
    • foo3a
    • foo3b
• bar
  • bar1
    • bar1a
    • bar1b
  • bar2

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>