数据本质上是分层次的,但是具有需要用户容易看到的属性。所需的布局类似于下面。
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合理吗?”经验法则比上述任一嵌套列表方法好得多。