css表格的制作方法

表格基础结构

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

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

表格边框样式

通过border-collapse控制边框合并，border属性设置边框粗细和颜色：

table {
  border-collapse: collapse;
  border: 1px solid #000;
}
td {
  border: 1px solid #ccc;
}

单元格间距与内边距

padding调整内容与边框间距，border-spacing控制单元格间隔（需border-collapse: separate）：

td {
  padding: 8px 12px;
}
table {
  border-spacing: 5px;
}

表格宽度与对齐

设置width控制表格宽度，text-align调整内容水平对齐，vertical-align控制垂直对齐：

table {
  width: 100%;
}
td {
  text-align: center;
  vertical-align: middle;
}

斑马纹效果

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

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

表头样式

用<th>标签定义表头，通常需要特殊样式：

th {
  background-color: #333;
  color: white;
  font-weight: bold;
}

响应式表格

添加overflow-x: auto容器应对小屏幕：

<div style="overflow-x: auto;">
  <table>...</table>
</div>

合并单元格

使用colspan和rowspan属性：

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

悬停效果

通过:hover伪类增强交互：

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