Behavior comparison
Table vs Tree view
Decisive difference
Table lays out flat rows and columns read in document order; Tree view exposes nested nodes with expand and collapse.
Choice criteria, links and sources
- TableChoose Table if the user compares values across rows and columns without a parent-child structure.Open entry Table
- Tree viewChoose Tree view if items belong to parents and the user drills down through levels.Open entry Tree view
See the nine dimensionsSee the sources
Structure and explore data
Try it
Should people read tabular data, interact cell by cell, or expand a hierarchy?
Table
Shared trial context
A workspace presents a large information set whose structure and interaction model determine how people scan, edit, or expand it.
Table
Mission
Table
Sort Name ascending and then descending while confirming focus and header context remain intact.
| Status | Owner | |
|---|---|---|
| Beacon | Review | Léo |
| Atlas | Ready | Amina |
| Comet | Draft | Marta |
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Source order is shown with a caption and correctly scoped headers.
- Edge case
- Long values use horizontal overflow without converting rows into inaccessible cards or breaking header associations.
Tree view
Mission
Tree view
Enter once, expand Projects with Right Arrow, move to Design, select it, then return to and collapse the parent.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- Projects is focused and collapsed; hidden children are absent from navigation.
- Edge case
- Leaf nodes never expose aria-expanded, and children of collapsed parents leave navigation and focus.
What this example shows
Table is read as document content and its cells are not focus-managed; Data grid is a composite widget with arrow-key cell navigation, while Tree view organizes hierarchical nodes.
Which fits your need?
Table
People compare values across rows and columns
Tree view
People navigate a true parent-child hierarchy
Difference and sources
Table is read as document content and its cells are not focus-managed; Data grid is a composite widget with arrow-key cell navigation, while Tree view organizes hierarchical nodes.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Table
The tabular container that preserves row and column relationships.
Decision
Family question
Should people read tabular data, interact cell by cell, or expand a hierarchy?
Three criteria to choose
- Use case
Table
People compare values across rows and columns
Tree view
People navigate a true parent-child hierarchy
- Interactivity
Table
Cells are read in native table structure; any link, button, or sort control is a separate tab stop.
Tree view
Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable.
- Focus
Table
Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.
Tree view
Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked.
Nine dimensions
- Trigger
Table
Reading starts in the caption and headers; embedded controls keep their own normal activation.
Tree view
Tab enters the tree; arrows move focus and expand or collapse parent items.
- Modality
Table
Non-modal document structure, not a composite widget.
Tree view
Non-modal composite widget for a hierarchical collection.
- Placement
Table
Inline with its caption and column or row headers aligned to the represented data.
Tree view
A vertically ordered hierarchy whose indentation and disclosure state expose parent-child relationships.
- Interactivity
Table
Cells are read in native table structure; any link, button, or sort control is a separate tab stop.
Tree view
Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable.
- Focus
Table
Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.
Tree view
Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked.
- Dismissal
Table
A table is document content and is not dismissible.
Tree view
The tree is not dismissed; Left Arrow collapses an open parent, and Escape is not a required tree command.
- Accessible role
Table
table > (thead | tbody) > tr > (th | td)
Tree view
tree > treeitem + group
- Use case
Table
People compare values across rows and columns
Tree view
People navigate a true parent-child hierarchy
- Mobile behavior
Table
Preserve header relationships and offer a deliberate overflow or alternate layout instead of visually reordering cells.
Tree view
Use generous disclosure targets and consider progressive drill-down when deep indentation leaves too little room.
| Dimension | TableTable | Tree viewTree view |
|---|---|---|
| Trigger | Reading starts in the caption and headers; embedded controls keep their own normal activation. | Tab enters the tree; arrows move focus and expand or collapse parent items. |
| Modality | Non-modal document structure, not a composite widget. | Non-modal composite widget for a hierarchical collection. |
| Placement | Inline with its caption and column or row headers aligned to the represented data. | A vertically ordered hierarchy whose indentation and disclosure state expose parent-child relationships. |
| Interactivity | Cells are read in native table structure; any link, button, or sort control is a separate tab stop. | Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable. |
| Focus | Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus. | Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked. |
| Dismissal | A table is document content and is not dismissible. | The tree is not dismissed; Left Arrow collapses an open parent, and Escape is not a required tree command. |
| Accessible role | table > (thead | tbody) > tr > (th | td) | tree > treeitem + group |
| Use case | People compare values across rows and columns | People navigate a true parent-child hierarchy |
| Mobile behavior | Preserve header relationships and offer a deliberate overflow or alternate layout instead of visually reordering cells. | Use generous disclosure targets and consider progressive drill-down when deep indentation leaves too little room. |