表格标签

表格基本结构

基本语法

<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

表格组成原理

• 表格由行(<tr>)组成
• 每行由单元格(<td>)组成
• 表格是"行主导"的结构，而非行列网格

基础示例

<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
</table>

表格属性

边框与样式

<table border="1" style="border-collapse:collapse;">

属性	描述	示例值
border	边框宽度(像素)	1
style="border-collapse:collapse"	合并边框线	-
width/height	表格宽高	500 / "80%"
bordercolor	边框颜色	"#ccc"
cellpadding	内容与边框间距	10
cellspacing	单元格间距	5

现代实践建议

1. 使用 CSS 替代 HTML 属性设置样式
2. 推荐使用 border-collapse: collapse 获得更精细的边框控制

对齐与方向

<table align="center" dir="rtl">

属性	作用	取值
align	表格水平对齐	left/center/right
dir	内容方向	ltr(默认)/rtl

行与单元格属性

<tr> 行属性

<tr align="center" valign="middle" bgcolor="#f5f5f5">

属性	描述	示例值
align	水平对齐	left/center/right
valign	垂直对齐	top/middle/bottom
bgcolor	背景色	颜色值
height	行高	像素/百分比

<td> 单元格属性

<td width="200" colspan="2" rowspan="3">

属性	描述	示例值
colspan	横向合并单元格	数字
rowspan	纵向合并单元格	数字
width/height	单元格尺寸	像素/百分比
align/valign	内容对齐	left/center/right

单元格合并示例

横向合并 (colspan)

<table border="1">
<tr>
<td colspan="2">合并的单元格</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

纵向合并 (rowspan)

<table border="1">
<tr>
<td rowspan="2">合并的单元格</td>
<td>B</td>
</tr>
<tr>
<td>D</td>
</tr>
</table>

合并注意事项

1. 合并后要删除被"覆盖"的单元格
2. 复杂的合并需要仔细规划表格结构

表格语义化标签

<th> 表头单元格

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>

特点

• 默认加粗并居中显示
• 提升表格可访问性(屏幕阅读器识别)

<caption> 表格标题

<table>
<caption>学生信息表</caption>
<!-- 表格内容 -->
</table>

结构分组标签

<table>
<thead>
<tr><th>标题</th></tr>
</thead>
<tbody>
<tr><td>内容</td></tr>
</tbody>
<tfoot>
<tr><td>页脚</td></tr>
</tfoot>
</table>

重要特性

1. 浏览器会按 thead → tbody → tfoot 顺序渲染
2. 支持异步加载(tbody内容可先显示)
3. 提升可访问性和SEO