在正文里写表格
用 GFM 表格语法写正文表格,以及窄屏与对齐的约定。
直接用 Markdown 表格
正文里的表格就是普通的 GFM(GitHub Flavored Markdown)表格,没有额外组件,也不需要写 props。第一行是表头,第二行是分隔行,之后每行是一条记录:
| 阶段 | 归属 | 产物 |
|---|---|---|
| 采集 | Velite | content/docs |
| 守卫 | assertSafeMdx | 拒绝模块语法 |
| 渲染 | renderMdx | React 元素 |
单元格里可以放普通行内语法:加粗、代码、链接、删除线等。表格不会执行公式,也没有编辑或回写能力;它和正文一样是只读内容。
对齐
分隔行用冒号决定整列对齐:
| 左对齐 | 居中 | 右对齐 |
|---|---|---|
| 文本 | 文本 | 1,024 |
| 长一点的说明 | 中间 | 42 |
数字列建议右对齐,便于比较大小;短标签列用左对齐或居中。对齐只是阅读提示,不改变单元格里的值。
宽表格与窄屏
本站的表格按页面宽度排版,单元格会换行,第一列保持单行以便扫读;页面不会出现横向滚动。写表格时优先收敛列数和每格文字,让 390px 宽的手机也能一列列读完:
| 场景 | 建议 |
|---|---|
| 列很多 | 拆成两张表,或把次要列并进说明文字 |
| 单元格很长 | 先用一句话概括,细节放到表格下方的正文 |
| 数字/短值 | 放在窄列并右对齐;不要为了对齐塞入无意义空格 |
| 窄屏 | 让单元格自然换行,不要依赖横向滚动 |
本站约定
- 表头使用弱底色和更强字重,数据行使用正文的弱化字色;不需要自己加样式。
- 表格只用于对照关系;步骤、时间线或层级内容用列表或小标题通常更好读。
- 不要在表格里写 HTML 布局或内联样式,正文的排版由设计系统统一负责。