HTML + CSS: объединение <UL>/ <OL>и поддельно-табличного формата

Question

У меня есть иерархическая таблица, которую я хочу отобразить в HTML. Теги <ul> и <ol> отлично работают для иерархической части, но я хочу иметь всего 2 или 3 столбца, где самый левый столбец имеет иерархический отступ, например

• Foo
  • foo1
  • foo2
    • foo2a
  • foo3
    • foo3a
    • foo3b
• бар
  • bar1
    • bar1a
    • bar1b
  • bar2

но я также хочу, чтобы каждый элемент имел соответствующую информацию в столбце справа.

Как я могу сделать это с помощью HTML и CSS?

Answer 1

С таблицей.

, но я также хочу, чтобы каждый элемент имел соответствующую информацию в столбце справа.

Это табличная информация.*

В противном случае вы можете использовать <ol> / <ul> и сделать каждый элемент <dl> (список определений) , стилизованный таким образом, чтобы он выглядел какНапример, плавая каждый <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>