CSS表格完全指南
编程小白也能理解的表格知识大全
📊 什么是CSS表格？
CSS表格是通过HTML和CSS创建的数据展示方式，类似于Excel表格。它由行（横排）和列（竖排）组成，交叉点称为单元格。
想象一下你的课程表：周一到周五是列，上午下午是行，每个格子里的科目就是单元格内容。
表格基本结构
表格标题（caption）
表头（thead）
表体（tbody）
表脚（tfoot）
🔧 创建基本表格
HTML表格由 <table> 标签定义，其中：
- <tr> 定义行（table row）
- <td> 定义普通单元格（table data）
- <th> 定义表头单元格（table header）
简单表格示例
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 28 | 北京 |
| 李四 | 32 | 上海 |
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
</tr>
</table>
🎨 CSS表格样式技巧
1. 表格边框设置
使用CSS的border属性为表格添加边框：
/* 给表格和单元格添加边框 */
table {
border: 1px solid #ddd;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
💡 提示：使用 border-collapse: collapse; 可以让相邻边框合并为单一边框，视觉效果更整齐！
2. 表格宽度与高度
控制表格整体大小：
/* 设置表格宽度为父元素的100% */
table {
width: 100%;
}
/* 设置表头高度 */
th {
height: 50px;
}
/* 设置单元格最小宽度 */
td {
min-width: 100px;
}
3. 表格间距控制
调整表格内的空间：
/* 单元格内边距（内容与边框的距离） */
td {
padding: 12px 15px;
}
/* 单元格之间的间距（使用border-spacing） */
table {
border-spacing: 10px; /* 仅在border-collapse: separate时有效 */
}
4. 表格文字对齐
控制表格内容的对齐方式：
/* 水平对齐 */
th {
text-align: left; /* 左对齐（默认） */
}
td {
text-align: center; /* 居中 */
}
/* 垂直对齐 */
td {
vertical-align: top; /* 顶部对齐 */
vertical-align: middle; /* 居中（推荐） */
}
5. 表格颜色与斑马纹
增强表格的可读性和美观性：
/* 表头背景色 */
th {
background-color: #3498db;
color: white;
}
/* 斑马纹效果 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 鼠标悬停效果 */
tr:hover {
background-color: #e3f2fd;
}
6. 表格标题(caption)
为表格添加描述性标题：
HTML使用 <caption>标签添加到<table>标签内的顶部
<table>
<caption>员工信息表</caption>
<tr>
<th>姓名</th>
…
</tr>
</table>
7. 高级表格结构
对于复杂表格，可以使用这些标签：
<table>
<caption>销售报表</caption>
<thead> <!– 表头区域 –>
<tr><th>产品</th>…</tr>
</thead>
<tbody> <!– 主体内容区域 –>
<tr><td>手机</td>…</tr>
</tbody>
<tfoot> <!– 表脚区域（常用于汇总行） –>
<tr><td>总计</td>…</tr>
</tfoot>
</table>
8. 响应式表格
使表格能在手机上正常显示：
/* 小屏幕时允许表格横向滚动 */
.table-container {
overflow-x: auto;
}
/* 或者将表格转换为块状显示 */
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
/* 使每个单元格像卡片一样显示 */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* 添加伪元素显示表头标签 */
position: absolute;
left: 6px;
content: attr(data-label);
font-weight: bold;
}
}