css怎么制作表格

基础表格结构

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

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

边框样式

通过border属性添加边框，合并边框使用border-collapse：

table {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

表头设计

用<th>标签替代<td>创建表头，通常加粗居中：

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
}

单元格间距

调整padding控制内容与边框的距离：

td, th {
  padding: 8px 12px;
}

斑马纹效果

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

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

响应式表格

添加水平滚动条适应小屏幕：

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

悬停高亮

通过:hover实现行高亮效果：

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

对齐控制

使用text-align和vertical-align调整内容位置：

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

复杂表格示例

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

<tr>
  <th colspan="2">合并列</th>
</tr>
<tr>
  <td rowspan="2">合并行</td>
</tr>