CSS 完整表格

在网页设计中，表格是非常重要的元素之一，它可以用来展示各种数据，例如价格、数量等。为了美化表格，CSS 提供了丰富的样式属性。本文将介绍如何使用 CSS 完整表格。

创建基本表格

首先，在 HTML 中创建一个基本表格，如下所示：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5元/个</td>
      <td>10</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>4元/个</td>
      <td>20</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3元/个</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

在 <thead> 中定义表头，<th> 代表每个表头单元格；在 <tbody> 中定义表格主体，<tr> 代表一行，<td> 代表一个单元格。

添加样式

基础样式

为了美化表格，我们可以添加一些基础样式，如下所示：

table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

th,
td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid #ccc;
}

上述样式设置了表格的宽度为 100%、下边距为 1rem、边框合并为单一边框；表头单元格和主体单元格的内边距都为 0.75rem，文本对齐方式为左对齐，边框为 1px 实线，颜色为 #ccc。

表头样式

为了区别表头和主体，我们可以为表头设置不同的颜色和样式。例如，将表头的背景色设置为灰色、文本颜色设置为白色、字体粗细为粗体：

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

条纹样式

为了使表格更易读，我们可以为每行设置不同的背景色，呈现出条纹样式。例如，将奇数行的背景色设置为白色，偶数行的背景色设置为浅灰色：

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

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

悬停样式

为了使表格更具交互性，当鼠标悬停在单元格上时，可以将背景色进行更改。例如，将鼠标悬停在单元格上时，背景色更改为淡蓝色：

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

结语

通过上述步骤，我们已经成功利用 CSS 完整表格。通过添加不同样式，我们可以让表格更美观、易读、交互性更强，进一步提升用户体验。