怎样制作css表格

创建CSS表格的基本方法

使用HTML的<table>标签结合CSS样式可以创建美观的表格。以下是一个基础示例：

<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;
}

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

th {
  background-color: #f2f2f2;
}

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

调整表格样式

表格样式可以通过多种CSS属性自定义：

• border属性控制边框样式
• padding调整单元格内边距
• text-align设置文本对齐方式
• background-color改变行或单元格背景色
• width设置表格或列宽度

响应式表格设计

对于移动设备，可以添加媒体查询使表格在小屏幕上更易读：

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

表格悬停效果

增加悬停效果可提升用户体验：

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

高级表格样式技巧

使用CSS伪类选择器可以实现更复杂的样式效果：

• :first-child和:last-child选择首尾元素
• :nth-child()选择特定行
• border-radius添加圆角边框
• box-shadow增加阴影效果

通过组合这些CSS属性和技巧，可以创建各种风格的表格，从简约到复杂的设计都能实现。