HTML 表格详解（简单易懂较详细）
HTML 表格用于在网页上展示数据，通过
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
| ：定义表格的表头单元格，通常用于第一行，表示列的标题。 | ：定义表格中的数据单元格，用于存放具体的数据。
二、HTML 表格的常用属性 1. border border 属性用于设置表格的边框。默认情况下，表格没有边框。 2. cellpadding cellpadding 属性用于设置单元格内容与单元格边框之间的距离。 3. cellspacing cellspacing 属性用于设置单元格之间的间距。 4. width 和 height width 和 height 属性用于设置表格的宽度和高度。这些属性可以以像素或百分比为单位设置。 三、HTML 表格的高级用法 1. 合并单元格 (1) colspan colspan 属性用于合并水平方向上的单元格。
(2) rowspan rowspan 属性用于合并垂直方向上的单元格。
2. 表格的头部、主体和脚部 (1)
标签用于定义表格的头部，通常包含表头单元格。
(2) | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
(3)
标签用于定义表格的脚部，通常用于总结或总计行。| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
| 总计 | 100 |
3. 表格的样式设计
(1) 使用内联样式
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
(2) 使用内部样式表
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
(3) 使用外部样式表
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
/* 在 styles.css 文件中 */
.custom-table {
border-collapse: collapse;
width: 500px;
}
.custom-table th, .custom-table td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
.custom-table th {
background-color: #f2f2f2;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9;
}
4. 响应式表格
在移动设备上，表格可能会超出屏幕宽度，影响用户体验。通过 CSS，可以实现响应式表格，使其在小屏幕上也能良好显示。
| 表头 1 | 表头 2 | 表头 3 | 表头 4 |
|---|---|---|---|
| 数据 1 | 数据 2 | 数据 3 | 数据 4 |
| 数据 5 | 数据 6 | 数据 7 | 数据 8 |
四、HTML 表格的完整示例
以下是一个包含多种用法的完整 HTML 表格示例：
HTML 表格示例
基本表格
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
合并单元格
| 表头 1 和 2 合并 | |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
表格的头部、主体和脚部
| 表头 1 | 表头 2 |
|---|---|
| 数据 1 | 数据 2 |
| 数据 3 | 数据 4 |
| 总计 | 100 |
响应式表格
| 表头 1 | 表头 2 | 表头 3 | 表头 4 |
|---|---|---|---|
| 数据 1 | 数据 2 | 数据 3 | 数据 4 |
| 数据 5 | 数据 6 | 数据 7 | 数据 8 |
五、总结
HTML 表格是网页中展示数据的重要工具。通过
| 、 | 等标签，可以创建结构清晰、样式美观的表格。以下是对 HTML 表格相关标签和属性的总结：
标签名描述示例
| |||||||
|---|---|---|---|---|---|---|---|---|