html➕css好看的table样式

以下是一个简单的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>
  </tbody>
</table>

CSS代码：

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

thead {
  background-color: #333;
  color: #fff;
}

th,
td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

这个样式使用了一些基本的CSS属性来美化表格：

- `border-collapse`：将表格边框合并为单一边框。
- `width`：设置表格宽度为100%。
- `margin`：使表格居中对齐。
- `font-family`：设置字体为Arial。
- `background-color`：设置表头背景颜色为黑色。
- `color`：设置表头文字颜色为白色。
- `text-align`：将单元格内容左对齐。
- `padding`：设置单元格内边距为8px。
- `nth-child`：用于设置偶数行的背景颜色。
- `hover`：设置鼠标悬停时的背景颜色。
- `border-top-left-radius`：设置第一个单元格的左上角边框圆角。
- `border-bottom-left-radius`：设置第一个单元格的左下角边框圆角。
- `border-top-right-radius`：设置最后一个单元格的右上角边框圆角。
- `border-bottom-right-radius`：设置最后一个单元格的右下角边框圆角。

这个表格样式看起来非常简洁、清晰，同时也很易于阅读。