在HTML中组合表和分层列表

不幸的是，HTML中的表行没有嵌套分组机制：tbody可用于对行进行分组，但嵌套它是非法的(除了td中的中间表，这是非常可怕的)。

这让你有两个选择：

>用某种类型的嵌套列表表示信息，并依靠CSS使结果看起来像一张表。
>将信息表示为表，依靠某种属性来表示其层次关系。

以下是一些如何实现这些选择的示例：

使用嵌套列表(na?veapproach)：

<ul>
  <li>
    <dl>
      <dt>Seq</dt> <dd>1</dd>
      <dt>Item Name</dt> <dd>Identifier</dd>
      <dt>Min</dt> <dd>1</dd>
      <dt>Max</dt> <dd>1</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>Seq</dt> <dd>2</dd>
      <dt>Item Name</dt> <dd>Name</dd>
      <dt>Min</dt> <dd>1</dd>
      <dt>Max</dt> <dd>1</dd>
    </dl>
    <ul>
      <li>
        <dl>
          <dt>Seq</dt> <dd>2.1</dd>
          <dt>Item Name</dt> <dd>First Name</dd>
          <dt>Min</dt> <dd>1</dd>
          <dt>Max</dt> <dd>1</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>Seq</dt> <dd>2.2</dd>
          <dt>Item Name</dt> <dd>Middle Name</dd>
          <dt>Min</dt> <dd>-</dd>
          <dt>Max</dt> <dd>-</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>Seq</dt> <dd>2.3</dd>
          <dt>Item Name</dt> <dd>Last Name</dd>
          <dt>Min</dt> <dd>1</dd>
          <dt>Max</dt> <dd>1</dd>
        </dl>
      </li>
    </ul>
  </li>
  <li>
    <dl>
      <dt>Seq</dt> <dd>3</dd>
      <dt>Item Name</dt> <dd>Age</dd>
      <dt>Min</dt> <dd>-</dd>
      <dt>Max</dt> <dd>1</dd>
    </dl>
  </li>
<ul>

这可以处理信息的分层方面，但是你最终会重复一遍，而且必须跳过CSS中的一些环，以表格方式显示结果。这可能是明智的使用：第一个孩子，但最终的结果是，你已经走出了你想要以非表格方式表现为一个表的东西，结果给了自己更多的工作把它拉回来。

它也使得项目隐含而不是显式的标记之间的关系的真实表格性质 – 而不是引用渲染的输出，但是这些项目总是具有相同的数量和种类的属性并不清楚。

使用嵌套列表(“clever”方法)：

<dl>
  <dt>
    <ul> <li>Seq</li> <li>Item Name</li> <li>Min</li> <li>Max</li> </ul>
  </dt>
  <dd>
    <ul> <li>1</li> <li>Identifier</li> <li>1</li> <li>1</li> </ul>
  </dd>
  <dd>
    <dl>
      <dt>
        <ul> <li>2</li> <li>Name</li> <li>1</li> <li>1</li> </ul>
      </dt>
      <dd>
        <ul> <li>2.1</li> <li>First Name</li> <li>1</li> <li>1</li> </ul>
      </dd>
      <dd>
        <ul> <li>2.2</li> <li>Middle Name</li> <li>-</li> <li>-</li> </ul>
      </dd>
      <dd>
        <ul> <li>2.3</li> <li>Last Name</li> <li>1</li> <li>1</li> </ul>
      </dd>
    </dl>
  </dd>
  <dd>
    <ul> <li>3</li> <li>Age</li> <li>-</li> <li>1</li> </ul>
  </dd>
</dl>

在这里，我们使用description lists来描述两件事情：

>例如， “项目名称”和“标识符”等
>例如， “名称”单位和“名字”单位。

它确实更紧凑，但不幸的是，每个标题及其细节元素之间的具体关系最多是隐含的，没有其他样式可以以表格的方式可视化地组织信息，当渲染实际表示的内容时，这将更不明显。

使用表格：

<table>
  <thead>
    <tr>
      <th>Seq</th> <th>Item Name</th> <th>Min</th> <th>Max</th>
    </tr>
  </thead>
  <tbody>
    <tr id=100>
      <td>1</th> <th>Identifier</th> <td>1</td> <td>1</td>
    </tr>
    <tr id=200>
      <th>2</th> <th>Name</th> <td>1</td> <td>1</td>
    </tr>
    <tr id=210 data-parent=200 class=level-1>
      <th>2.1</th> <th>First Name</th> <td>1</td> <td>1</td>
    </tr>
    <tr id=220 data-parent=200 class=level-1>
      <th>2.2</th> <th>Middle Name</th> <td>-</td> <td>-</td>
    </tr>
    <tr id=230 data-parent=200 class=level-1>
      <th>2.3</th> <th>Last Name</th> <td>1</td> <td>1</td>
    </tr>
    <tr id=300>
      <th>3</th> <th>Age</th> <td>-</td> <td>1</td>
    </tr>
  </tbody>
</table>

这里，父/子关系由data-parent属性明确描述(如果需要，可以通过javascript访问)，class = level- {n}属性提供了一个可由CSS使用的钩子：

.level-1 > th {
  padding-left: 1em;
}

最终这是一个个人偏好和方便的问题，但我认为< table>方法更好的是因为它满足“它没有CSS合理吗？”经验法则比上述任一嵌套列表方法好得多。