Table

You might say

This order data is a mess. Lay it out in a table with one order per row.

Compare many records across the same columnsTables suit orders, members, inventory, and other records that share the same fields. Sorting, filtering, and pagination each need deliberate behavior. When there are many columns, plan for smaller screens, horizontal scrolling, and clear header relationships.

ProjectStatusLast updated ↓

Website refreshIn progressJust now

Annual report designCompletedYesterday

Payment flow rebuildOverdue3 days ago

You can say this to an AI Agent

Turn the order list into a table with one order per row and fixed ID, amount, status, and date columns while keeping current filters. Preserve essential columns on mobile and expose the rest by horizontal access or details. Verify rows remain aligned after sorting.

When to use it

Compare records field by field
TasksStatus
Sign-in pageIn progress
Payment flowCompleted
Sort and filter structured data
NamePrice ↑Stock
Keyboard¥ 99210
Mouse¥ 19986
Select several rows for a bulk action
ProjectsStatusActions
Website redesignIn progressEdit Delete
Annual report designCompletedEdit Delete
Review dense operational information
🔍 Search usernamesCreate user
Alex ChenAdmin
Maya LeeMembers

When NOT to use it

Use a table for content that has no shared columns
FieldValue
Versionv2.4.0
With one row of data, the header outweighs the content
Put every possible field on screen at once
New product launch
Images and paragraphs crammed into cells become distorted
Show too many columns unchanged on a narrow phone
ProjectsStatusOwnerTimeActionsToo many columns force constant horizontal scrolling on mobile
Use a tree when the task is really comparing several fields
NameSize
src/—
components/—
Indentation alone makes parent-child relationships unclear

Anatomy

ProjectStatusOwner

Website refreshIn progressAlex Chen

The entire table: a header + several data rows

Explains each column; sort controls usually go here too

One row per record

The smallest unit where a row and column meet; keep its content concise

Variants

Basic

NameInventory

Keyboard210

Mouse86

Use this for a modest amount of data with no special requirements

Striped

NameInventory

Keyboard210

Mouse86

When there are many rows, use stripes to help differentiate between adjacent rows

Compact

NameInventory

Keyboard210

Mouse86

Display42

For dense admin tables that fit more rows on screen

Sortable

NamePrice ↑

Keyboard¥99

Mouse¥199

When people need to sort by a column to find an item quickly

Typical use cases

Order management

UserRoleStatus

Alex ChenAdministratorActive

Maya LeeMemberDisabled

Member list

AllPending paymentPending shipmentCompleted

Order numberProductAmountStatus

2026071801Wireless headphones¥ 299.00Pending payment

2026071796Mechanical keyboard¥ 199.00To be shipped

Inventory

July Sales Report

WeeklySales ↓Number of ordersChange

Week 29¥ 286,4003,146↑ 12.5%

Week 28¥ 254,6002,903↓ 3.2%

Analytics report

Activity log

TimeTeam memberActivity

14:32:05Alex ChenPublished "Website Refresh v2"

14:28:41Maya LeeDeleted "Old Homepage.sketch"

13:56:12KKUpdated member permissions

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Support staff need to compare the ID, amount, status, and date of 50 orders. Which presentation fits best?

A. Show one order at a time as a list of field names and valuesB. Use one card per order and stack the four fields verticallyC. Use one order per row and align the four fields in fixed columns