[分享]css做一个表格

CSS是网页设计中一个非常重要的工具，它可以帮助我们实现各种各样的布局效果。今天我们来讲一讲如何用CSS来实现一个表格。首先，我们需要先编写HTML代码： 姓名 年龄 性别 小明 20 男 ...

CSS是网页设计中一个非常重要的工具，它可以帮助我们实现各种各样的布局效果。今天我们来讲一讲如何用CSS来实现一个表格。首先，我们需要先编写HTML代码：

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

这里我们定义了一个3列的表格，第一行作为表头，后面两行作为表格内容。接下来我们开始使用CSS来为表格添加样式：

table {
  border-collapse: collapse; //将单元格边框合并
  width: 80%; //设置表格宽度
  margin: 0 auto; //水平居中
}

th, td {
  border: 1px solid #ccc; //给单元格添加边框
  padding: 10px; //设置单元格内边距
}

th {
  background-color: #eee; //设置表头背景颜色
  font-weight: bold; //设置表头字体加粗
} 

看完上面的代码，我们可以了解到，通过CSS的样式定义，我们设置了表格的格式，包括合并单元格边框、设置表格宽度、水平居中、单元格边框、内边距、表头背景颜色以及设置表头字体加粗。以上样式的设置可以根据需求进行调整，以达到最佳效果。