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; /* 表头背景色 */
}

响应式表格设计

使用 overflow-x: auto 确保小屏幕下表格可横向滚动：

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

斑马线效果

通过 nth-child 实现交替行背景色：

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

悬停高亮

为行添加悬停效果：

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

表格标题与间距优化

通过 <caption> 添加标题，并调整整体间距：

<table>
  <caption>用户信息表</caption>
  <!-- 表格内容 -->
</table>

caption {
  font-weight: bold;
  margin-bottom: 10px;
}
table {
  margin: 20px 0;
}