html table 好看的样式设置

有很多方法可以为 HTML 表格设置漂亮的样式，以下是一些常用的样式设置方法：

1. 使用 CSS 样式表：在 CSS 中，您可以使用众多属性来设置表格的样式，包括边框、颜色、字体、背景等。例如：

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

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #4CAF50;
  color: white;
}

2. 使用 Bootstrap 框架：Bootstrap 是一个流行的前端框架，它提供了许多预定义的样式类，可以轻松地创建漂亮的表格。例如：

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

3. 使用 jQuery 插件：有许多 jQuery 插件可以帮助您创建漂亮的表格，例如 DataTables、GridManager 等。这些插件提供了许多高级功能，如排序、过滤、分页等。例如：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>$3000</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>25</td>
      <td>$2000</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>40</td>
      <td>$5000</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#myTable').DataTable();
});
</script>

希望这些方法对您有所帮助！