Utilisation du HTML pour présenter des données structurées

Question

J'ai une question sur la façon de présenter des données structurées en HTML.

J'ai des données arborescentes, que vous pourriez normalement présent à l'aide de sections et sous-sections (à savoir <h1>, <h2>, etc.) et/ou en utilisant des listes imbriquées (à savoir les listes dont les éléments contiennent des listes de sous-éléments).

Un exemple de ces données est une liste de tâches, qui comporte des tâches comprenant des sous-tâches et des sous-sous-tâches.

Chacune de ces données a également des propriétés associées, par exemple:

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

Ma question est, que proposez-vous comme un bon moyen de présenter ces données sur une page, en utilisant le HTML?

---

Ma première idée est de le présenter comme une table:

• L'une des colonnes de la table montre la tâche ou sous-tâche
• D'autres colonnes de chaque ligne montrent les valeurs des propriétés (par exemple "terminé", etc.) associé à cette tâche

Mon problème avec ceci est que montrer toutes les tâches et sous-tâches dans une colonne de table perdrait l'information sur la façon dont les tâches sont n ested: par exemple, il ne montrerait pas que la deuxième ligne est réellement une sous-tâche de la première rangée. Pouvez-vous suggérer un moyen de contourner ce problème? Je pensais à la décoration des articles avec un nombre variable de Chevrons comme « > » pour montrer à quel point imbriqué chaque élément est, par exemple:

TASK     COMPLETED 

Some major task   No 
> A subtask    Yes 
> Another subtask   Yes 
> > A sub-subtask   Yes 
Next major task   No 

Certains problèmes avec ce sont cependant:

• Il pourrait ressembler laid, et je ne suis pas sûr que c'est aussi intuitivement compréhensible et aussi lisible que possible. Un autre ornement, ou simplement un retrait d'espace blanc de longueur variable, pourrait-il être meilleur?
• Je ne vois pas une façon élégante de l'encoder en HTML + CSS; par exemple, inséreriez-vous l'ornement en utilisant le HTML, ou insérez-le en utilisant CSS; et si vous utilisez CSS, serait-ce en ajoutant quelque chose comme class="level1" à class="level6" pour afficher le niveau d'imbrication?

---

Une autre façon serait de le présenter sous forme de texte qui circule verticalement, par exemple ...

<h1>Some major task</h1> 
<p>Completed: no.</p> 
<h2>A subtask</h2> 
...etc... 

... que je vais faire aussi bien, mais je veux aussi qui permet au lecteur d'analyser la colonne des valeurs de propriété, ce qui est plus facile lorsque les valeurs de la propriété sont alignées dans une colonne au lieu d'être intercalées avec un autre texte.

---

Il s'agit plus de la conception de l'interface utilisateur que du codage, mais ...Je ne suis sûrement pas la première personne à vouloir afficher ce type de données, mais je ne me souviens pas avoir vu d'exemples, alors j'aimerais vous poser la question.

Answer 1

Le composant d'interface utilisateur souhaité est appelé TreeTable (ou TreeTable). Il y en a various implementations en Javascript/HTML. Voici one qui utilise Javascript. Voici another one qui est pur HTML/CSS (mais ne pas réduire/développer)

Answer 2

UL, OL et LI sont bons à cette fin. Structurer comme JSON est encore mieux. Vous pouvez rendre le code HTML de JSON comme vous le souhaitez.

Answer 3

La question n'a pas de bonne ou de mauvaise réponse. Mais je vais répondre à cette question dans une question.

Si vous utilisez CSS, serait-ce en ajoutant quelque chose comme class = "niveau1" par class = "Level6" pour montrer le niveau d'imbrication ?

Non. Vous utiliseriez le sélecteur approprié dans CSS.

li { 
    // level one style 
} 

li li 
{ 
    // level two style 
} 

etc. 

Answer 4

Vous parlez d'imbrication dans la structure hiérarchique de HTML. De par sa nature, vous n'avez pas vraiment besoin de faire un travail spécial.

Une liste simple et récursive est tout ce dont vous avez besoin, sans aucune considération particulière pour la profondeur ou quoi que ce soit. Vous pouvez même ajouter des fonctionnalités expand-collapse à n'importe quel niveau si vous le souhaitez sans trop de travail supplémentaire.

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

Ensuite, vous le style que chaque tâche groupe d'avoir une marge par rapport à son parent de sorte que l'imbrication devient récursive. Configurez des puces sophistiquées (ou non) pour les tâches avec le style de li, et personnalisez le positionnement de la classe task-status pour le faire se présenter comme vous le souhaitez.

Vous pouvez également obtenir des sous-tâches inférieures pour hériter de façon récursive de la plus petite taille de texte en définissant une taille de texte relative dans le CSS. Quelque chose comme .75em, de sorte que chaque niveau est trois quarts plus petit que le niveau précédent.

Quelque chose comme ceci:

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