css表格制作教程

基础表格结构

使用<table>标签创建表格框架，<tr>定义行，<td>定义单元格：

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

添加边框与间距

通过CSS设置边框和单元格间距：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
}
td, th {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
}

表头样式

使用<th>标签定义表头并设置特殊样式：

th {
  background-color: #f2f2f2; /* 背景色 */
  text-align: left; /* 文本对齐 */
  font-weight: bold; /* 加粗 */
}

斑马纹效果

通过:nth-child()伪类实现交替行颜色：

tr:nth-child(even) {
  background-color: #f9f9f9;
}

响应式表格

添加横向滚动条适应小屏幕：

div.table-container {
  overflow-x: auto;
}

悬停高亮

为行添加悬停效果增强交互性：

tr:hover {
  background-color: #e6e6e6;
}

单元格合并

使用colspan和rowspan属性合并单元格：

<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>

高级样式示例

结合阴影和圆角的现代风格表格：

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
  overflow: hidden;
}
th {
  background-color: #4CAF50;
  color: white;
}