html中table美化,漂亮的css table样式

可以通过CSS来美化HTML中的table，以下是一些常见的方法：

1. 使用表格样式类：可以在CSS中定义一些表格样式类，然后在table标签中应用该样式类。例如：

.table-style {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.table-style th, .table-style td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

在HTML中使用：

<table class="table-style">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

2. 使用CSS伪类：可以使用CSS伪类来实现一些特殊效果，例如：

.table-style2 {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.table-style2 th, .table-style2 td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.table-style2 tr:hover {
  background-color: #f5f5f5;
}

.table-style2 th {
  background-color: #f2f2f2;
  color: #666;
}

在HTML中使用：

<table class="table-style2">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

以上两种方法只是其中的两种，具体可根据需求自行调整CSS样式。