在HTML中组合表和分层列表 [英] Combining a table and hierarchical list in HTML

问题描述

我正在努力重新设计一个旧版工具集，我正在寻找如何更好地显示一些信息的现实和语义。

具有需要对用户容易地可见的属性。所需的布局类似于下面。

  Seq项目名称最小值Max  - 此处未显示任何内容
 1标识符1 1（必需）
 2名称1 1 
 2.1名字1 1 
 2.2中间名 -   - （可选但未命名）
 2.3姓氏1 1 
 3 Age  -  1（可选）
  

此时这是一个整个表，

$ <$>

首先是表格数据？层次结构很重要，列只是每个行中项目的属性。

如果不是表格， 我会亲自认为这是一组嵌套的 UL 列表 - 序列号是可选的，并不总是一个数字。如果它的一组列表，将缩进sublists正确，但什么是最好的方式呈现短属性？

如果它是一个表，是表示层次结构的语义存在的最好方法？

解决方案

您想要表示的信息在一个方面是表格（它是一组具有相同标记的属性的项目），另一个层次（项目具有父母）。

不幸的是，HTML中的表格行没有嵌套分组机制： tbody 可用于对行进行分组，但嵌套是非法的（除非使用中间表里面 td ，这是非常可怕的）。

p>

1. 用某种类型的嵌套列表表示信息，并依靠CSS来使结果看起来像一个表。




2. 将信息表示为表，并依靠某种属性来表示其层次关系。

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

使用嵌套列表/ strong>

 < ul> 
< li> 
< dl> 
< dt> Seq< / dt> < dd> 1< / dd> 
< dt>项目名称< / dt> < dd>标识符< / dd> 
< dt> Min< / dt> < dd> 1< / dd> 
< dt> Max< / dt> < dd> 1< / dd> 
< / dl> 
< / li> 
< li> 
< dl> 
< dt> Seq< / dt> < dd> 2< / dd> 
< dt>项目名称< / 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>项目名称< / dt> < dd>名字< / 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>项目名称< / dt> < dd>中间名< / dd> 
< dt> Min< / dt> < dd>  - < / dd> 
< dt> Max< / dt> < dd>  - < / dd> 
< / dl> 
< / li> 
< li> 
< dl> 
< dt> Seq< / dt> < dd>< / dd> 
< dt>项目名称< / dt> < dd>姓氏< / 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>项目名称< / dt> < dd>年龄< / dd> 
< dt> Min< / dt> < dd>  - < / dd> 
< dt> Max< / dt> < dd> 1< / dd> 
< / dl> 
< / li> 
< ul> 
  

这将处理信息的分层方面，但是你最终重复了很多，必须跳过CSS中的一些圈，以表格的方式显示结果。使用：first-child 可能是可行的，但最终的结果是你已经走出你的方式来标记你想要呈现为一个

这也使得项目之间的关系的真正表格性质在标记中隐式而不是显式 - 不引用渲染的输出，不清楚这些项将始终具有相同数量和种类的属性。

使用嵌套列表（聪明方法）：

 < dl& 
< dt> 
< ul> < li> Seq< / li> < li>项目名称< / li> < li> Min< / li> < li> Max< / li> < / ul> 
< / dt> 
< dd> 
< ul> < li> 1< / li> < li>标识符< / li> < li> 1< / li> < li> 1< / li> < / ul> 
< / dd> 
< dd> 
< dl> 
< dt> 
< ul> < li> 2< / li> < li>名称< / li> < li> 1< / li> < li> 1< / li> < / ul> 
< / dt> 
< dd> 
< ul> < li> 2.1< / li> < li>名字< / li> < li> 1< / li> < li> 1< / li> < / ul> 
< / dd> 
< dd> 
< ul> < li> 2.2< / li> < li>中间名< / li> < li>  - < / li> < li>  - < li> < / ul> 
< / dd> 
< dd> 
< ul> < li> 2.3< / li> < li>姓氏< / li> < li> 1< / li> < li> 1< / li> < / ul> 
< / dd> 
< / dl> 
< / dd> 
< dd> 
< ul> < li> 3< / li> < li>年龄< / li> < li>  - < / li> < li> 1< / li> < / ul> 
< / dd> 
< / dl> 
  

在这里，我们使用描述列表来描述两件事：

1. 标题/细节关系'Item Name'和'Identifier'等。




2. 'Name'单位和'First Name'单位。

在每个标题及其细节元素之间最好是隐含的，并且没有额外的样式以视觉方式以表格方式组织信息，当呈现实际表示的内容时更不明显。

使用表：

 < thead> 
< tr> 
< th> Seq< / th> < th>项目名称< / th> < th> Min< / th> < th> Max< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr id = 100> 
< td> 1< / th> < th>标识符< / th> < td> 1< / td> < td> 1< / td> 
< / tr> 
< tr id = 200> 
< th> 2< / th> < th>名称< / th> < td> 1< / td> < td> 1< / td> 
< / tr> 
< tr id = 210 data-parent = 200 class = level-1& 
< th> 2.1< / th> < th>名字< / th> < td> 1< / td> < td> 1< / td> 
< / tr> 
< tr id = 220 data-parent = 200 class = level-1> 
< th> 2.2< / th> < th>中间名< / th> < td>  - < / td> < td>  - < / td> 
< / tr> 
< tr id = 230 data-parent = 200 class = level-1> 
< th> 2.3< / th> < th>姓氏< / th> < td> 1< / td> < td> 1< / td> 
< / tr> 
< tr id = 300> 
< th> 3< / th> < th>年龄< / th> < td>  - < / td> < td> 1< / td> 
< / tr> 
< / tbody> 
< / table> 
  

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

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

最终是个人喜好和方便的问题，但我认为< table> 方法更好，因为它满足它看起来合理没有CSS？经验法则比上述任何一种嵌套列表法都要好。

I'm working to redesign a legacy toolset and I'm looking at how to better display some information both presentationally and semantically.

The data hierarchically in nature but has properties that need to be readily visible to users. The desired layout is similar to below.

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)

At the moment this is one entire table, and the intdenting for the Sequence (Seq) number is achieved by inserting additional table cells to kind of bump everything across to the right.

The challenge I have is figuring out how to effectively display this information.

First of all is this tabular data? I would say no, as the hierarchy is important, and the 'columns' are merely attributes of the item in each 'row'.

If it isn't tabular, what is it and how would that be done ? I would personally argue this is a set of nested UL lists - the sequence number is optional and not always a number. If its a set of lists, that will indent sublists correctly, but what is the best way of presenting the short attributes?

If it is a table, what is the best way to present the semantic existance of the hierarchy in the table?

解决方案

The challenge here is that the information you want to represent is in one respect tabular (it's a set of items which have identically-labelled attributes), and in another hierarchical (items have parents).

Unfortunately, there's no nested grouping mechanism for table rows in HTML: tbody can be used to group rows, but nesting it is illegal (except with an intermediate table inside a td, which is pretty horrible).

That leaves you with two choices:

1. Represent the information with nested lists of some sort, and rely on CSS to make the result look like a table.

2. Represent the information as a table, and rely on attributes of some sort to represent its hierarchical relationships.

Here are some examples of how you could implement those choices:

Using nested lists (naïve approach):

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

This handles the hierarchical aspect of the information, but you end up repeating yourself a lot, and are going to have to jump through some hoops in the CSS to display the result in a tabular way. It's likely doable with judicious use of :first-child, but the end result is that you've gone out of your way to mark something up that you want to present as a table in a non-tabular way, and as a result given yourself more work pulling it back into shape.

It also makes the genuinely tabular nature of the relationships between the items implicit rather than explicit in the markup - without referring to the rendered output, it isn't clear that these items will always have the same number and kind of attributes.

Using nested lists ("clever" approach):

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

Here, we're using description lists to describe two things:

1. The header/detail relationship between e.g. 'Item Name' and 'Identifier' etc.

2. The parent/child relationship between e.g. the 'Name' unit and the 'First Name' unit.

It's certainly more compact, but unfortunately the specific relationship between each header and its detail elements is implicit at best, and without additional styling to visually organize the information in a tabular way, it'll be even less obvious when rendered what's actually being represented.

Using a table:

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

Here, the parent/child relationships are explicitly described by the data-parent attribute (which can be accessed via javascript if necessary), and a class=level-{n} attribute provides a hook that can be used by the CSS:

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

Ultimately it's a matter of personal preference and convenience, but I think the <table> approach is better simply because it satisfies the "does it look reasonable with no CSS?" rule of thumb much better than either of the nested-lists approaches above.

这篇关于在HTML中组合表和分层列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！