HTML+CSS : combining / and faux-tabular format

Question

我有一个要以 HTML 格式显示的分层表。 <ul>和 <ol>标签对于事物的层次部分非常有用，但我希望总共有 2 或 3 列，其中最左边的列按层次缩进，例如

• 富
  • foo1
  • foo2
    • foo2a
  • foo3
    • foo3a
    • foo3b
• 酒吧
  • 酒吧1
    • bar1a
    • 酒吧1b
  • 酒吧2

但我还希望每个元素在右侧的列中都有一些相应的信息。

我如何使用 HTML 和 CSS 做到这一点？

Answer 1

有一张 table 。

but I also want each item to have some corresponding information on a column on the right.

这是表格信息。

否则，您也许可以使用 <ol>/<ul>并使每个元素成为 <dl> (definition list) , 以这样的方式设置样式以使其看起来像表格，例如通过 float 每个 <dd>向右。

<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>