HTMLを使用して構造化データを表示

Question

HTMLを使用して構造化データを提示する方法について質問があります。

通常、セクションやサブセクション（つまり<h1>、<h2>など）を使用して、および/またはネストされたリスト（サブアイテムのリストを含むアイテムのリスト）を使用して表示される、いくつかのツリー状のデータがあります。

このデータの例は、サブタスクとサブサブタスクを含むタスクを持つToDoリストです。

これらの各データは、例えば、プロパティが関連付けられている：

• bool completed;
• DateTime completionDate;
• Priority priority;

を私の質問は、あなたがする良い方法として提案する何をすべきか、ありますこのデータをHTMLを使用して1ページに表示しますか？テーブルの列の

• 一つは、プロパティの値を示し、各行のタスクまたはサブタスク
• 他の列を示している：

  ---

  私の最初のアイデアは、テーブルとしてそれを提示することですそのタスクに関連付けられているタスク（たとえば、「完了済み」など）

私の問題は、すべてのタスクとサブタスクを1つのテーブル列に表示すると、タスクがどのようにn ested：例えば、2番目の行が実際に最初の行のサブタスクであることは示されません。あなたはその問題を回避する方法を提案できますか？私は深く、各アイテムをネストされた方法を示すために「>」のような山形の可変数でアイテムを飾る考えたとえば、されています。それにいくつかの問題はしかし、ある

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デザインの詳細ですが...私は確かにこの種のデータを表示したい最初の人ではありませんが、例を見たことは覚えていませんので、お聞きしたいと思います。

Answer 1

必要なUIコンポーネントは、TreeTable（またはTree Table）と呼ばれます。 Javascript/HTMLにはvarious implementationsがあります。ここには、JavaScriptを使用するoneがあります。ここには純粋なHTML/CSSのanother oneがあります（折りたたむ/展開しません）

Answer 2

UL、OL、LIはこの目的に適しています。 JSONとしてそれを構成することは、さらに優れています。 JSONからHTMLをレンダリングすることができます。

Answer 3

質問には間違った答えがありません。しかし、私は質問の中でこの質問に答えます。

CSSを使用している場合、それはネスティング レベルを表示するには=「LEVEL6」 クラスを通じてクラス=「LEVEL1」のような 何かを追加することによってでしょうか？

いいえ。あなたはCSSで適切なセレクタを使用します。

li { 
    // level one style 
} 

li li 
{ 
    // level two style 
} 

etc. 

Answer 4

あなたは、HTMLの階層構造にネストすることについて話しています。その性質上、特別な作業を行う必要はありません。

奥行きなどの特別な考慮を必要とせずに、必要なのは単純な再帰的なリストだけです。余分な作業をしなくても、任意のレベルに展開崩壊機能を追加することもできます。ネスティングが再帰的になるように

<ul> 
    <li> 
    <div class="task-group"> 
     <span class="task-title">Task 1</span> 
     <span class="task-status">Complete</span> 
     <ul> 
     <li> 
      <div class="task-group"> 
      <span class="task-title">Task 1a</span> 
      <span class="task-status">Complete</span> 
      </div> 
     <li> 
      <div class="task-group"> 
      <span class="task-title">Task 1b</span> 
      <span class="task-status">Incomplete</span> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </li> 
</ul> 

次に、あなただけの親に対する余裕を持つように各タスク・グループのスタイル。 liのスタイルで作業のための魅力的な（またはいいえ）弾丸を設定し、それがあなたがそれをレイアウトするようにtask-statusクラスの位置をカスタマイズします。

CSSで相対的なテキストサイズを設定することによって、小さなサブタスクを再帰的に小さなテキストサイズを継承するようにすることもできます。 .75emのようなものなので、各レベルは前のレベルの3/4よりも小さくなります。

このような何か：

.task-group { 
    font-size: .75em; 
    margin-left: 1em; 
} 
.task-title { 
    text-decoration: underline; 
    float: left; 
} 
.task-status { 
    float: right; 
}