html css 表格分页 样式

以下是一个简单的HTML和CSS表格分页样式的示例：

HTML代码：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>钱七</td>
      <td>27</td>
      <td>女</td>
    </tr>
    <tr>
      <td>孙八</td>
      <td>32</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
<div class="pagination">
  <a href="#" class="prev">上一页</a>
  <a href="#" class="page active">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="page">4</a>
  <a href="#" class="page">5</a>
  <a href="#" class="next">下一页</a>
</div>

CSS代码：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

th {
  background-color: #f0f0f0;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination a {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination .active {
  background-color: #333;
  color: #fff;
}

这个例子中，我们首先定义了一个基本的HTML表格，然后创建了一个包含分页链接的div。使用CSS，我们对表格进行了样式设置，如大小，边框，颜色等。同时，我们还定义了一个分页样式，其中包含了上一页和下一页链接，以及当前活动页面的链接。通过这些样式设置，我们可以创建一个美观且易于使用的表格分页效果。