css表格制作教程

创建基础表格结构

使用HTML的<table>标签定义表格，<tr>代表行，<td>代表单元格。示例代码如下：

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

添加边框和间距

通过CSS的border属性为表格添加边框，border-collapse控制边框合并：

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

设置表头样式

使用<th>标签定义表头，并通过CSS突出显示：

th {
  background-color: #f2f2f2;
  text-align: left;
}

实现斑马纹效果

通过:nth-child()伪类为交替行设置不同背景色：

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

响应式表格处理

针对小屏幕设备添加横向滚动：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

悬停高亮交互

为行添加悬停效果提升用户体验：

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

单元格对齐控制

通过text-align和vertical-align调整内容位置：

td {
  text-align: center;
  vertical-align: middle;
}

合并单元格技巧

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

<td colspan="2">跨两列的单元格</td>
<td rowspan="3">跨三行的单元格</td>

高级样式定制

添加圆角边框和阴影效果：

table {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

固定表头实现

对于长表格可固定表头：

thead {
  position: sticky;
  top: 0;
}