数据本质上是分层次的，但是具有需要用户容易看到的属性。所需的布局类似于下面。
Seq Item Name Min Max - Anything under here isn't shown 1 Identifier 1 1 (required) 2 Name 1 1 2.1 First Name 1 1 2.2 Middle Name - - (Optional but unlimted) 2.3 Last Name 1 1 3 Age - 1 (Optional)
在这一刻，这是一个整个表，而序列(Seq)数字的插入是通过插入附加的表格单元来实现的，这些都是颠覆所有的东西。
我所面临的挑战是弄清楚如何有效地显示这些信息。
首先是这个表格数据？我会说不，因为层次结构很重要，“列”只是每个“行”中项目的属性。
如果不是表格，它是怎么做的呢？我个人认为这是一组嵌套的UL列表 – 序列号是可选的，并不总是一个数字。如果它的一组列表，将缩进的子列表正确，但什么是最好的方式呈现短的属性？
如果是表，表格中层次结构的语义存在的最好方法是什么？
解决方法
不幸的是，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合理吗？”经验法则比上述任一嵌套列表方法好得多。
