如何优化网页表格的样式？

一、设置表格样式

为了使表格更美观清晰，我们可以添加 CSS 样式来控制表格的样式。

<style>
table {
  border-collapse: collapse; /* 合并表格边框 */
  width: 100%;
}
th, td {
  border: 1px solid #ddd; /* 表格边框颜色 */
  padding: 8px; /* 单元格内边距 */
  text-align: left; /* 文字对齐方式 */
}
th {
  background-color: #f2f2f2; /* 表头背景颜色 */
}
tr:hover {
  background-color: #f5f5f5; /* 鼠标悬停背景颜色 */
}
</style>

上面的代码将设置表格样式，包括边框合并、单元格内边距、文本对齐方式、表头背景颜色和鼠标悬停背景颜色。

二、增加表格交互效果

为了使表格更加易读易懂，我们可以添加一些交互效果，比如排序、分页等。

以下示例展示如何使用 JavaScript 和 CSS 制作一个可排序的表格。

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  cursor: pointer; /* 鼠标光标效果 */
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #ddd;
}
</style>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>19</td>
    </tr>
  </tbody>
</table>

上面的代码添加了一个表格和一个 JavaScript 函数 sortTable()，该函数可根据点击的表头排序表格内容。

三、响应式表格布局

在移动设备上查看大型表格时，表格可能会变得非常难以阅读和使用。为了解决这个问题，可以使用 CSS 媒体查询来创建响应式表格布局。

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #f5f5f5;
}
@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr { 
    display: block; /* 将表格变为块级元素 */
  }
  th {
    text-align: center; /* 表头文字居中 */
  }
  th:nth-child(1) {
    background-color: #fff; /* 第一列表头无背景色 */
  }
  td {
    text-align: center; /* 单元格文字居中 */
    border: none; /* 去除单元格间的边框 */
    border-bottom: 1px solid #ddd; /* 添加单元格底部边框 */
  }
  td:before { 
    content: attr(data-label); /* 添加伪元素 */
    float: left;
    font-weight: bold;
  }
}
</style>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">John</td>
      <td data-label="Age">28</td>
      <td data-label="Gender">Male</td>
      <td data-label="City">New York</td>
    </tr>
    <tr>
      <td data-label="Name">Mary</td>
      <td data-label="Age">25</td>
      <td data-label="Gender">Female</td>
      <td data-label="City">London</td>
    </tr>
    <tr>
      <td data-label="Name">Bob</td>
      <td data-label="Age">32</td>
      <td data-label="Gender">Male</td>
      <td data-label="City">Sydney</td>
    </tr>
    <tr>
      <td data-label="Name">Alice</td>
      <td data-label="Age">19</td>
      <td data-label="Gender">Female</td>
      <td data-label="City">Tokyo</td>
    </tr>
  </tbody>
</table>

上面的代码添加了一个响应式表格布局。在窗口宽度小于 600px 时，表格的列会转化为行，每行只显示一个单元格，并且带有标签名称的伪元素。