用css制作表格

使用CSS制作表格

基础表格结构

HTML中表格由<table>、<tr>（行）、<th>（表头）和<td>（单元格）组成。基础结构如下：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

基本样式设置

通过CSS控制边框、间距和对齐方式：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
}
th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本对齐 */
}
th {
  background-color: #f2f2f2; /* 表头背景色 */
}

斑马纹效果

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

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

悬停高亮

为行添加悬停效果：

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

响应式表格

在小屏幕下通过横向滚动优化显示：

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

高级样式示例

合并边框、圆角等效果：

table {
  border: 2px solid #333;
  border-radius: 5px;
}
th {
  color: white;
  background-color: #333;
}

注意事项

• 避免过度使用复杂样式影响可读性
• 确保表格结构清晰，配合<caption>添加标题
• 移动端优先考虑响应式设计