如何優化網頁表格的樣式？

一、設置表格樣式

為了使表格更美觀清晰，我們可以添加 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 時，表格的列會轉化為行，每行只顯示一個單元格，並且帶有標籤名稱的偽元素。