[分享]CSS做的漂亮表格

表格是网页中经常使用的元素，一个简洁美观的表格能够让网页的信息呈现更加清晰漂亮。今天我就来分享一下如何使用CSS做一个漂亮的表格。 姓名 年龄 性别 张三 25 男 李四 32 男 ...

表格是网页中经常使用的元素，一个简洁美观的表格能够让网页的信息呈现更加清晰漂亮。今天我就来分享一下如何使用CSS做一个漂亮的表格。

<table class="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>32</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>19</td>
      <td>女</td>
    </tr>
  </tbody>
</table> 

首先，我们需要创建一个表格元素，定义class名称为“table”。在表格中，我们需要包含、和等标签，分别表示表格头部、表格主体和表格行。

接下来，在CSS中给表格设置样式，可以使用以下代码：

.table {
  border-collapse: collapse;
  margin: 20px;
}

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

th {
  background-color: #f5f5f5;
} 

通过设置表格的边框为折叠，可以让表格看起来更加整洁。同时，我们还可以设置表格单元格的边框样式、内边距以及文字居中等样式。

接下来，我们可以通过给表格头部的标签设置背景颜色，让表格头部和表格主体区分开来。

最终，我们就可以得到一个简洁美观的表格。通过CSS的样式设置，我们可以让表格的样式更加优美，让网页呈现更加漂亮的效果。