我有一个关于如何使用 HTML 呈现一些结构化数据的问题。
我有一些树状数据,您通常可以使用部分和子部分(即<h1>
,<h2>
等)和/或使用嵌套列表(即项目包含子项目列表的列表)来呈现这些数据。
该数据的一个示例是待办事项列表,其中的任务包括子任务和子子任务。
这些数据中的每一个还具有关联的属性,例如:
bool completed;
DateTime completionDate;
Priority priority;
我的问题是,您建议使用 HTML 在一个页面上呈现这些数据的好方法是什么?
我的第一个想法是将其呈现为表格:
- 表格的一列显示任务或子任务
- 每行中的其他列显示与该任务相关的属性值(例如“已完成”等)
我的问题是,在一个表列中显示所有任务和子任务会丢失有关任务嵌套方式的信息:例如,它不会显示第二行实际上是第一行的子任务。您能建议一种解决该问题的方法吗?我想用可变数量的人字形来装饰物品,比如“>”,以显示每个物品的嵌套程度,例如:
TASK COMPLETED
Some major task No
> A subtask Yes
> Another subtask Yes
> > A sub-subtask Yes
Next major task No
然而,一些问题是:
- 它可能看起来很难看,我不确定它是否能直观地理解和可读。其他一些装饰,或者只是可变长度的空白缩进,会更好吗?
- 我没有看到使用 HTML+CSS 对其进行编码的优雅方式;例如,您是使用 HTML 插入装饰,还是使用 CSS 插入?
class="level1"
如果使用 CSS,那会是通过添加类似的东西class="level6"
来显示嵌套级别吗?
第二种方法是将其呈现为垂直流动的文本,例如...
<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...
...我也会这样做,但我还想要一个视图,让读者可以扫描属性值列,当属性值在列中对齐而不是与其他文本穿插时,这更容易。
这更多是关于 UI 设计而不是编码,但是......我肯定不是第一个想要显示这种数据的人,但我不记得看过任何示例,所以我想问你。