css漂亮的表格

下面是一个简单的css表格，你可以根据你的需求进行修改：

html代码：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>21</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

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

th, td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

赞(0)

打赏 微信 支付宝 QQ 扫码打赏

css 漂亮的css页面 css创建表格 html漂亮表格效果 css常用属性表格汇总 css漂亮标题 css表格居中 css表格边框 css怎么做表格 网站表格代码css html表格居中