html css制作表格

HTML 表格基础结构

使用 <table> 标签定义表格，<tr> 定义行，<td> 定义单元格，<th> 定义表头单元格（默认加粗居中）。示例代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

CSS 表格样式控制

通过 CSS 设置边框、间距和背景色：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

表格高级样式

添加悬停效果和斑马线样式：

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

响应式表格处理

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

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

单元格合并技术

使用 colspan 和 rowspan 合并单元格：

<tr>
  <td colspan="2">合并横向单元格</td>
</tr>
<tr>
  <td rowspan="2">合并纵向单元格</td>
  <td>内容</td>
</tr>

表格标题和说明

通过 <caption> 添加表格标题：

<table>
  <caption>员工信息表</caption>
  <!-- 表格内容 -->
</table>