css怎么制作表格

使用CSS制作表格

在HTML中，表格通常使用<table>标签创建，而CSS用于控制表格的样式和布局。以下是制作表格的步骤和常用样式设置。

基本HTML结构

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

基础样式设置

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

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

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

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

高级样式设置

/* 圆角边框 */
table {
  border-radius: 5px;
  overflow: hidden;
}

/* 固定表头 */
thead {
  position: sticky;
  top: 0;
}

/* 响应式表格 */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

斑马条纹效果

tbody tr:nth-child(odd) {
  background-color: #f8f8f8;
}

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

边框样式

/* 双线边框 */
table {
  border: 3px double #333;
}

/* 自定义边框颜色 */
th, td {
  border-left: 1px solid #ff0000;
  border-right: 1px solid #00ff00;
  border-top: 1px solid #0000ff;
  border-bottom: 1px solid #ffff00;
}

单元格对齐方式

/* 垂直对齐 */
td {
  vertical-align: middle;
}

/* 水平对齐 */
.left-align {
  text-align: left;
}

.center-align {
  text-align: center;
}

.right-align {
  text-align: right;
}

表格间距

/* 单元格间距 */
table {
  border-spacing: 10px;
}

/* 移除默认间距 */
table {
  border-spacing: 0;
}

表格标题

caption {
  caption-side: bottom;
  font-style: italic;
  padding: 10px;
  color: #666;
}

注意事项

• border-collapse: collapse会合并相邻边框
• border-spacing属性在border-collapse: collapse时无效
• 响应式设计应考虑在小屏幕上添加水平滚动
• 表格语义化使用<thead>, <tbody>, <tfoot>标签