Une autre façon d'afficher une sous-ligne dans un tableau?

Question

J'essaye de déterminer une manière qui montre des sous-lignes pour une table. En règle générale, l'indentation de la ligne signifie qu'il s'agit d'une sous-ligne du parent.

La table peut avoir une seule rangée d'enfants du parent, donc d'autres aspects visuels peuvent fonctionner tels que l'expansion, etc.

Je suis curieux de savoir d'autres façons de représenter cette relation qui n'implique pas le retrait des enfants.

Exemple:

Answer 1

Pour ces types de tableaux, il est généralement utile pour l'utilisateur d'autoriser le pliage. Cela permet également de distinguer la relation parent/enfant.

Answer 2

D'après mon expérience, les utilisateurs préfèrent les menus accordéon. Il y a des tonnes d'excellents exemples là-bas, simplement Google "menus d'accordéon UI":

Cependant, pour faire une plongée plus profonde, surtout si vous avez un projet mobile ou un client/intervenant exigeant qui souhaite une prise de décision de conception motivée, vous devez connaître les éléments suivants;

• Votre "table" est-elle plus une table de données qui permettra aux utilisateurs de sélectionner plusieurs sous-lignes après avoir cliqué sur la ligne parent pour trier et grouper divers points de données?
• Ou s'agit-il plutôt d'un menu qui permettra uniquement aux utilisateurs d'afficher les sous-lignes des lignes parentes et de cliquer sur les liens à suivre vers la page? (Cela amène une toute autre discussion sur la façon d'afficher le "tableau"/menu lorsque les utilisateurs naviguent à travers les différentes pages auxquelles il renvoie - fixe, accordéon, menu hamburger, etc.)

J'imagine que vous cherchez une solution pour plus d'une table de type menu .

Google Material Design préconise l'imbrication.

Alternativement, un panneau d'extension peut être ce que vous recherchez, surtout si le tableau permet aux utilisateurs d'interagir avec les sous-lignes.

Answer 3

Vous pouvez afficher diminuer la taille d'un objet dans votre ligne montrant l'ordre hiérarchique sans modifier la taille du contenu inférieur.

Answer 4

S'il doit être basé sur du texte, vous pouvez utiliser la même approche que la commande d'arborescence (copier et coller ces caractères spéciaux):

.
├── animals
│   ├── fishes
│   │   ├── nemo
│   │   └── swordfish
│   └── mammals
│       ├── dog
│       ├── elephant
│       └── lion
└── plants
    ├── bushes
    │   └── maple
    └── trees
        ├── cedrela
        └── mahogany

Answer 5

En plus de ce que d'autres utilisateurs ont dit, à savoir la couleur d'arrière-plan ombrée, l'indentation, l'accordéon, etc., je pense que le biseautage 3D aide également. Vous pouvez afficher vos sous-lignes comme si elles étaient plus profondes que leur ligne parent en ajoutant des ombres au coin de votre préférence.

En outre, la ligne parent doit avoir une fonctionnalité accordéon et une indication de celle-ci, une couleur d'arrière-plan différente ou un symbole de liste déroulante.

Dans l'image, une ombre biseautée est ajoutée dans le coin supérieur gauche du sous-tableau. Mais une plus petite ombre devrait également être ajoutée dans le coin opposé pour la rendre plus 3D. C'était un peu difficile de le faire en utilisant CSS, donc je ne l'ai pas fait.

Voici un très basique violon qui génère le tableau ci-dessus.

Answer 6

Pour les tableaux de données avec zébrage, vous avez besoin d'une approche différente de celle indiquée dans les réponses précédentes. Dans ce cas, vous pouvez utiliser la couleur de ligne paire/impaire à votre avantage:

Answer 7

Vous pouvez utiliser des lignes extensibles pour afficher les hiérarchies dans un tableau, comme dans cet exemple de grille .