1. 表格基础与标签特性
初始状态是一个没有任何属性的原生表格。你可以通过点击单元格或右侧面板来添加属性。
原生表格渲染区
实时 HTML 代码
2. CSS 表格美化
用 CSS 替代过时的 HTML 属性：border 控制边框样式、border-collapse 合并边框，padding 设置内容距离。
现代 CSS 表格
| 员工姓名 | 部门 | 薪资 |
|---|---|---|
| 张三 | 研发部 | ￥28,000 |
| 李四 | 市场部 | ￥18,500 |
| 王五 | 设计部 | ￥22,000 |
实时 CSS 代码
3. 经典场景：使用 Table 语义标签进行网页布局
在 CSS Flexbox 普及之前，开发者常利用 <thead>（头部）、<tbody>（主体内容）、<tfoot>（底部）来划分网页的区域。为了让两侧的导航和内容并排，他们还会在 <tbody> 里嵌套左右两个 <td>。
早期语义化 Table 布局模拟器
实时 HTML 代码
全局表格属性
语义标签区块高度
布局行为
Sidebar 与 Content 并排 (左右分栏)
💡 历史原理：
早期网页会写
早期网页会写
<thead><tr><td colspan="2">头部</td></tr></thead> 来实现全宽头部。然后通过关闭右侧分栏开关，可以看清它是如何靠 <td> 的左右排列来实现两栏布局的。
4. 现代场景：数据表格高级案例
现代网页中，表格不再用于排版，而是专门用于展示结构化数据。点击右侧按钮，查看知名组件库（如 Ant Design、Tailwind UI）中高级表格的经典设计。
大厂级后台数据表格预览
| 姓名 | 角色 | 状态 | 最近登录 |
|---|---|---|---|
| 张三 | 前端开发 | 活跃 | 2 分钟前 |
| 李四 | 产品经理 | 请假 | 3 小时前 |
| 王五 | UI 设计 | 活跃 | 昨天 14:30 |
| 赵六 | 后端开发 | 离线 | 3 天前 |
实时 CSS 代码
选择表格风格
每个按钮代表一种真实的现代 UI 设计规范。