Table
表格
WebDesktop上手难度: 中等
行列交叉，用来横向对比多个对象的多个属性。
Live Demo
真的可以点| 类型 | 状态 | ||
|---|---|---|---|
| screen.png | 0.4 MB | 截图 | 忽略 |
| IMG_0231.jpg | 3.2 MB | 照片 | 已清理 |
| DSC_4478.jpg | 4.8 MB | 照片 | 保留 |
| clip_01.mp4 | 128.5 MB | 视频 | 已清理 |
你刚才看到的这个：后台的订单管理页面、Excel 里的数据区、日历和课表、财报里的数字对照表。
它到底是什么
List 让人纵向扫，Table 让人横向比。当用户的问题是「谁最高」「哪一行超标了」，就该用表格。表格的代价是横向空间，所以必须有移动端降级方案。
表格table数据表data grid表
Anatomy · 它由什么组成
Header Row表头
sticky 吸顶，带排序箭头
Cell单元格
左对齐文本，右对齐数字
Row Hover行悬停
整行高亮，提示可点
Column Resize列宽调整
拖拽表头边缘，可选
Empty Cell空值
显示「—」而不是空白
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要横向对比同一属性的多个值 | 用 |
| 字段多且结构固定（订单、用户、日志） | 用 |
| 需要排序、筛选 | 用 |
| 只是展示 3 个字段的少量数据 | 视情况 |
| 手机端窄屏 | 不用 |
移动端表格必须降级为卡片列表，否则用户会左右拖到崩溃。
别把表格的每一格都做成可点——用户会不知道哪些能操作。
Similar Patterns
别搞混一句话区分：行列交叉，用来横向对比多个对象的多个属性。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个订单数据表格：表头可点击排序，数字列右对齐，状态用彩色 Chip 展示，表格可横向滚动，表头吸顶。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个表格。
改成这样说
加数据 Table：表头 button 可排序并带 aria-sort，数字列右对齐 + tabular-nums，表头 sticky 吸顶，容器横向滚动，空值显示「—」，移动端降级为卡片布局并用 data-label 显示字段名。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。