CSS实现的清爽、漂亮的表格样式分享

下面是“CSS实现的清爽、漂亮的表格样式分享”的完整攻略：

1. 使用CSS样式表美化表格

首先，在HTML中创建一个基础的表格结构，然后通过CSS来实现表格的漂亮样式。

（1）设置表格样式

为表格设置样式可以使用CSS的table标签，如下所示：

table {
    border-collapse: collapse;  /*合并表格边框*/
    width: 100%;  /*表格宽度为100%*/
    font-size: 12px;   /*表格字体大小*/
}

（2）设置表头样式

为表头设置样式可以使用CSS的th标签，如下所示：

th {
    background-color: #f5f5f5;   /*表头单元格背景颜色*/
    text-align: center;   /*表头单元格文本居中*/
    font-weight: bold;   /*表头单元格文本加粗*/
    border: 1px solid #ddd;   /*表头单元格边框*/
}

（3）设置单元格样式

为单元格设置样式可以使用CSS的td标签，如下所示：

td {
    border: 1px solid #ddd;   /*单元格边框*/
    text-align: center;   /*单元格文本居中*/
    padding: 10px 5px;   /*单元格内边距*/
}

（4）设置表格斑马线效果

为表格实现斑马线效果可以使用CSS的:nth-child()属性，如下所示：

tr:nth-child(even) {
    background-color: #f5f5f5;  /*偶数行背景色为灰色*/
}

2. 使用CSS框架实现表格美化

除了基本的CSS样式，也可以使用CSS框架实现表格的漂亮样式。下面介绍两个CSS框架实现表格美化的示例。

Bootstrap框架

Bootstrap是一个流行的前端CSS框架，它提供了丰富的CSS样式和JavaScript组件。使用Bootstrap框架实现表格美化比较简单，只需要添加对应的CSS类名即可。

（1）导入Bootstrap样式表

在HTML中导入Bootstrap的样式表，如下所示：

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

（2）使用Bootstrap样式

接下来就可以使用Bootstrap的样式来美化表格，如下所示：

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Semantic UI框架

Semantic UI是一个类似Bootstrap的前端CSS框架，它同样提供了丰富的CSS样式和JavaScript组件。使用Semantic UI框架实现表格美化也比较简单，只需要添加对应的CSS类名即可。

（1）导入Semantic UI样式表

在HTML中导入Semantic UI的样式表，如下所示：

<link href="//cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">

（2）使用Semantic UI样式

接下来就可以使用Semantic UI的样式来美化表格，如下所示：

<table class="ui selectable celled table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

通过以上方式，我们就能够实现清爽、漂亮的表格样式了。