使用 HTML 呈现结构化数据
我有一个关于如何使用 HTML 呈现一些结构化数据的问题。
我有一些类似树的数据，您通常可以使用节和子节（即
该数据的一个示例是待办事项列表，其中的任务包括子任务和子子任务。
这些数据中的每一个也都有关联的属性，例如：
boolcompleted;DateTimecompletionDate;Prioritypriority;
我的问题是，你有什么建议作为在一页上显示这些数据的好方法，使用 HTML？
我的第一个想法是将其呈现为表格：
- 表格的一列显示任务或子任务
- 每行中的其他列显示与该任务关联的属性值（例如“已完成”等）
我的问题是这是因为在一个表列中显示所有任务和子任务将丢失有关任务如何嵌套的信息：例如，它不会显示第二行实际上是第一行的子任务。 您能建议一种解决该问题的方法吗？ 我想到用不同数量的 V 形来装饰物品，比如“>” 例如，显示每个项目的嵌套深度：
TASK COMPLETED
Some major task No
> A subtask Yes
> Another subtask Yes
> > A sub-subtask Yes
Next major task No
然而，这样做的一些问题是：
- 它可能看起来很难看，而且我不确定它是否可以直观地理解和可读。 其他一些装饰，或者简单的可变长度空白缩进，可能会更好吗？
- 我没有看到使用 HTML+CSS 对其进行编码的优雅方法； 例如，您会使用 HTML 插入装饰物，还是使用 CSS 插入装饰物？ 如果使用 CSS，是否可以通过添加诸如
class="level1"到class="level6"之类的内容来显示嵌套级别？
第二种方法是将其呈现为垂直流动的文本，例如……
<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...
我也会这样做，但我也想要一个视图，让读者扫描属性值列，这在以下情况下更容易属性值在一列中对齐，而不是与其他文本散布。
这更多的是关于 UI 设计而不是编码，但是......我肯定不是第一个想要显示此类数据的人，但我不记得见过任何示例，所以我想问你。
I have a question about how to present some structured data using HTML.
I have some tree-like data, which you might normally present using sections and subsections (i.e. <h1>, <h2>, etc.) and/or using nested lists (i.e. lists whose items contain lists of sub-items).
An example of this data is a to-do list, which has tasks that include sub-tasks and sub-sub-tasks.
Each of these data also has associated properties, for example:
bool completed;DateTime completionDate;Priority priority;
My question is, what do you suggest as a good way to present this data on one page, using HTML?
My first idea is to present it as a table:
- One of the table's columns shows the task or sub-task
- Other columns in each row show the values of the properties (e.g. "completed", etc.) associated with that task
My problem with this is that showing all tasks and sub-tasks in one table column would lose the information about how the tasks are nested: for example it wouldn't show that the second row is actually a subtask of the first row. Can you suggest a way to work-around that problem? I thought of decorating items with a variable number of chevrons like '>' to show how deeply nested each item is, for example:
TASK COMPLETED
Some major task No
> A subtask Yes
> Another subtask Yes
> > A sub-subtask Yes
Next major task No
Some problems with that however are:
- It might look ugly, and I'm not sure that it's as intuitively understandable and as readable as it can be. Might some other ornament, or simply variable-length whitespace indent, be better?
- I don't see an elegant way to encode it using HTML+CSS; for example, would you insert the ornament using HTML, or insert it using CSS; and if using CSS, would that be by adding something like
class="level1"throughclass="level6"to show the nesting level?
A second way would be to present it as text that flows vertically, for example ...
<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...
... which I will do as well, but I also want a view which lets the reader scan the column of property values, which is easier when the property values are aligned in a column instead of interspersed with other text.
This is more about UI design than coding, but ... I'm surely not the first person to want to display this kind of data, but I don't remember having seen any examples, so I'd like to ask you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您想要的 UI 组件称为 TreeTable（或 Tree Table）。 它在 Javascript/HTML 中有各种实现。 这是使用 Javascript 的一个。 这是另一个，它是纯 HTML/CSS（但不会折叠/扩张）
The UI component you want is called a TreeTable (or Tree Table). There are various implementations of it in Javascript/HTML. Here's one that uses Javascript. Here's another one that's pure HTML/CSS (but doesn't collapse/expand)
您正在谈论 HTML 层次结构中的嵌套。 就其本质而言，您根本不需要做任何特殊的工作。
您只需要一个简单的递归列表，无需任何深度或任何特殊考虑。 如果您愿意，您甚至可以将展开/折叠功能添加到任何级别，而无需太多额外的工作。
然后，您只需将每个任务组设置为与其父任务组有相对边距，以便嵌套成为递归的。 使用
li的样式为任务设置花哨的（或没有）项目符号，并自定义task-status类的位置，使其按照您想要的方式布局它。您还可以通过在 CSS 中设置相对文本大小来让较低的子任务递归继承较小的文本大小。 类似于
.75em，这样每个级别都比前一个级别小四分之三。像这样的东西：
You're talking about nesting in the hierarchal structure of HTML. By its very nature you don't really have to do any special work at all.
A simple, recursive list is all you need, without any special considerations for depth or anything. You can even add expand-collapse functionality to any level if you want without much extra work.
Then you just style each task-group to have a relative margin to its parent so that the nesting becomes recursive. Set up fancy (or no) bullets for the tasks with
li's style, and customize the positioning of thetask-statusclass to make it lay out the way you want it.You can also get lower subtasks to recursively inherit smaller text size by setting a relative text-size in the CSS. Something like
.75em, so that each level is three quarters smaller than the previous level.Something like this:
UL、OL 和 LI 非常适合此目的。 将其构造为 JSON 会更好。 您可以按照您希望的任何方式从 JSON 呈现 HTML。
UL, OL and LI are good for this purpose. Structuring it as JSON is even better. You can render the HTML from JSON in any way you wish.
这个问题没有正确或错误的答案。 但我会在一个问题中回答这个问题。
不。您可以在 CSS 中使用适当的选择器。
The question has no right or wrong answer. But I'll answer this question within a question.
No. You would use the appropriate selector in CSS.