HTML Table 圆角：巧用 CSS 代码打造圆角 Table

在网页设计中，表格是一种非常常见的元素，用于展示数据或呈现信息。然而，原始的 HTML 表格默认情况下是没有圆角的，给用户带来了视觉上的不舒适感。本篇博客将介绍如何使用 CSS 代码为 HTML 表格添加圆角，并让表格更加美观。

1. 使用 border-radius 属性设置表格圆角

要添加圆角效果，我们可以使用 CSS 属性 border-radius，该属性可以设置 HTML 元素的圆角大小。对于表格，我们可以通过以下 CSS 代码来实现：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

th {
  background-color: #f2f2f2;
}

table.rounded {
  border-radius: 10px;
  overflow: hidden;
}

table.rounded th:first-child {
  border-top-left-radius: 10px;
}

table.rounded th:last-child {
  border-top-right-radius: 10px;
  border-right: none;
}

table.rounded td:first-child {
  border-bottom-left-radius: 10px;
}

table.rounded td:last-child {
  border-bottom-right-radius: 10px;
  border-right: none;
}

在上述代码中，我们首先定义了表格的基础样式，包括边距、文本对齐和边框样式。然后通过添加 table.rounded 类来给表格添加圆角，同时通过 border-radius 属性为每个单元格设置圆角。

最后，我们使用 :first-child 和 :last-child 伪类选择器来设置首行和末行的圆角。这样，我们就成功将 HTML 表格变成了圆角的形状。

2. 表格内容丰富化

除了添加圆角，我们还可以进一步丰富表格内容，提高用户体验。下面是几个示例：

添加表头和表格内容

<table class="rounded">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>123-456-7890</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>987-654-3210</td>
    </tr>
  </tbody>
</table>

在上述代码中，我们添加了 thead 和 tbody 标签来分别定义表头和表格内容。这样，当表格有大量数据时，用户可以更好地理解表格结构。

设置表格样式

可以通过添加 CSS 样式来美化表格外观，例如：

table.rounded {
  /* ...其他样式... */
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

table.rounded th {
  /* ...其他样式... */
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

table.rounded td {
  /* ...其他样式... */
  font-size: 12px;
  color: #666;
}

table.rounded tbody tr:hover {
  background-color: #f9f9f9;
}

/* 其他样式... */

上述代码中，我们通过设置表格边框样式、添加阴影效果以及调整字体样式和颜色来美化表格外观。同时，我们还添加了鼠标悬停时的背景色变化，提供更好的用户反馈。

3. 总结

通过使用 CSS border-radius 属性，我们可以轻松地为 HTML 表格添加圆角效果，从而增加表格的美观程度。另外，我们还可以通过设置表头、样式和鼠标悬停效果，使表格内容更加丰富，提高用户体验。希望本篇博客对您理解和运用 HTML 表格圆角有所帮助！

本文来自极简博客，作者：风华绝代，转载请注明原文链接：HTML Table 圆角：巧用 CSS 代码打造圆角 Table