Table
表格
Rows and columns that cross, used to compare several attributes across several objects side by side.
Live Demo
Actually clickable| Type | Status | ||
|---|---|---|---|
| screen.png | 0.4 MB | Screenshot | Ignored |
| IMG_0231.jpg | 3.2 MB | Photo | Cleaned |
| DSC_4478.jpg | 4.8 MB | Photo | Kept |
| clip_01.mp4 | 128.5 MB | Video | Cleaned |
What you just saw:The order management screen of an admin console, the data range in Excel, a calendar or class timetable, the comparison table in a financial report.
What it actually is
A List makes people scan vertically, a Table makes people compare horizontally. When the question is "who is highest" or "which row is over budget", reach for a table. The cost of a table is horizontal space, so a narrow-screen fallback is mandatory.
Anatomy · What it's made of
Header Row表头
Sticky, with sort arrows
Cell单元格
Text left-aligned, numbers right-aligned
Row Hover行悬停
Whole row highlights to signal it is tappable
Column Resize列宽调整
Drag the header edge, optional
Empty Cell空值
Show an em dash rather than blank space
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| You need to compare multiple values of the same attribute horizontally | Yes |
| There are many fields and the structure is fixed (orders, users, logs) | Yes |
| You need sorting and filtering | Yes |
| You are only showing a small amount of data across three fields | Depends |
| The screen is a narrow mobile viewport | No |
A table on mobile must degrade into a card list, otherwise users end up scrolling sideways and giving up.
Do not make every cell tappable — users lose track of what is actually actionable.
Similar Patterns
Don't mix these upTableCurrent
表格
Rows and columns that cross, used to compare several attributes across several objects side by side.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
In one line:Rows and columns that cross, used to compare several attributes across several objects side by side.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Stat Card
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Timeline
时间线
A single line of events in chronological order, newest at the top.
How to tell AI
Three levels of promptAdd the component name and specifics
Add an orders data table: clickable sortable headers, right-aligned numeric columns, status shown with colored chips, horizontal scroll on the container, and a sticky header row.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a table.
Say this instead
Add a data Table: sortable header buttons with aria-sort, numeric columns right-aligned with tabular-nums, sticky header, horizontally scrolling container, em dashes for empty values, and a mobile fallback to a card layout that reveals field names via data-label.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.