如何制作css表格

使用HTML和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 {
  border-collapse: collapse;
  width: 100%;
}

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

th {
  background-color: #f2f2f2;
}

响应式表格设计

对于移动设备，可以添加水平滚动：

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

斑马纹效果

交替行背景色增强可读性：

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

悬停效果

增加行悬停高亮：

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

固定表头

滚动时保持表头固定：

thead {
  position: sticky;
  top: 0;
}

单元格对齐控制

不同对齐方式示例：

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

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

边框样式定制

双线边框示例：

table {
  border: 2px double #333;
}

间距调整

控制单元格内边距：

.compact td {
  padding: 4px;
}

高级样式技巧

圆角边框和阴影效果：

table {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}