纯 CSS 表格

如果您正在寻找一种纯 CSS 实现的表格，那么您来对地方了。本文将介绍如何使用 CSS 实现带有样式的表格，没有使用 JavaScript 代码。

HTML 结构

在实现纯 CSS 表格之前，我们需要先确定 HTML 结构。下面是一个简单的表格示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>21</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

上面的代码中，我们使用了 HTML 的 <table>、<tr>、<th> 和 <td> 标签来构建表格，<thead> 和 <tbody> 标签用于区分表头和表体。

CSS 样式

接下来，我们将使用 CSS 来美化表格。以下是一个基本的 CSS 样式：

table {
  border-collapse: collapse;
  width: 100%;
}

thead {
  background-color: #f2f2f2;
}

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

th {
  background-color: #4CAF50;
  color: white;
}

在上面的代码中，我们给表格添加了 border-collapse 属性，去除了默认边框，使表格更加美观。我们还给表头添加了 background-color 属性，使其颜色与表体区分开来。最后，在 th 和 td 标签中添加了 padding、text-align、border-bottom 和 font-size 属性，使表格看起来更加精细。

进一步美化

如果您希望表格更加美观，您可以在 CSS 样式中添加更多属性。例如，您可以添加以下样式：

th:first-child {
  border-top-left-radius: 5px;
}

th:last-child {
  border-top-right-radius: 5px;
}

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

td:first-child {
  font-weight: bold;
}

@media only screen and (max-width: 768px) {
  /* 响应式表格 */
  /* ... */
}

上面的代码中，我们为表头的第一个和最后一个列添加了圆角，使其更加美观。我们还添加了 tr:hover 属性来动态改变鼠标悬停时的背景色，使用户能更好地感知当前行。最后，我们还添加了一个响应式表格，以适应不同设备的屏幕大小。

结论

现在您已经了解了如何使用 CSS 来美化表格，并且可以更改表格的样式，使其满足您的需求。这种纯 CSS 实现的表格非常适合在不需要使用 JavaScript 的情况下美化网站界面。