У меня вопрос о том, как представить некоторые структурированные данные с использованием 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; и если использовать CSS, добавится ли что-то вроде
class="level1" через class="level6", чтобы показать уровень вложенности?
Второй способ - представить его в виде текста, который течет вертикально, например ...
<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...
... что я и сделаю, но я также хочу представление, которое позволяет читателю сканировать столбец значений свойств, что проще, когда значения свойств выровнены в столбце, а не перемежаются с другим текстом.
Это скорее дизайн пользовательского интерфейса, чем кодирование, но ... я, конечно, не первый человек, который хочет отображать такие данные, но я не помню, чтобы видел какие-либо примеры, поэтому я хотел бы прошу вас.