HTML表格标签详细介绍
一、表格基础结构
HTML表格由三个核心标签构成层级关系：
<table> <!-- 表格容器 -->
<tr> <!-- 表格行 -->
<td>单元格内容</td> <!-- 标准单元格 -->
<th>表头内容</th> <!-- 标题单元格 -->
</tr>
</table>
二、核心标签详解
1. <table> 属性
2. 行与单元格标签
<tr>：定义表格行，可包含多个<td>或<th><td>：数据单元格，支持属性：colspan：横向合并单元格（如colspan="2"）rowspan：纵向合并单元格（如rowspan="3")
<th>：表头单元格（自动加粗居中），属性同<td>
三、结构化标签组
<table>
<caption>表格标题</caption> <!-- 表格标题 -->
<thead> <!-- 表头区 -->
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody> <!-- 主体区 -->
<tr><td>张三</td><td>25</td></tr>
</tbody>
<tfoot> <!-- 表脚区 -->
<tr><td>总计</td><td>3人</td></tr>
</tfoot>
</table>
四、样式控制技巧
斑马纹效果：
tr:nth-child(even) {background-color: #f2f2f2;}
响应式表格：
table {width: 100%; max-width: 800px;}
边框合并技术：
table {
border-collapse: collapse; /* 合并相邻边框 */
}
默认情况下（
border-collapse: separate），相邻单元格边框会分开显示使用
collapse值可合并相邻边框，创建更简洁的单线表格效果
五、完整示例（含边框合并）
<table style="border-collapse: collapse;" border="1" cellpadding="8">
<caption>员工信息表</caption>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1001</td>
<td>张三</td>
<td>zhang@example.com</td>
<td>13800138000</td>
</tr>
<tr>
<td>李四</td>
<td>li@example.com</td>
<td>13900139000</td>
</tr>
</tbody>
</table>
最佳实践建议：
使用
<thead>/<tbody>提升可访问性合并单元格时确保数据结构完整
复杂表格建议配合CSS Grid布局
使用
border-collapse: collapse创建专业单线表格
评论区