如何為表格添加樣式並提高頁面可讀性

隨著 Web 應用的複雜性增加，數據的可視化展現越來越重要。而表格作為一種展現數據的最基本的形式，它們不僅將數據呈現在我們的眼前，還可以使數據更加易於理解和可讀。但是，簡單的表格缺乏視覺上的吸引力和層次結構，這會使得大量數據很難閱讀，而且也很難將關鍵信息傳達給用戶。因此，為表格添加樣式已經成為一種必須的技能。

一、利用CSS樣式設置表格樣式

為表格添加樣式可以是手動添加CSS樣式，也可以使用樣式表設置全局樣式。以下是一個手動添加CSS樣式的實例：

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr style="background-color: #f2f2f2;">
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr style="border-bottom: 1px solid #ddd;">
            <td>張三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr style="border-bottom: 1px solid #ddd;">
            <td>李四</td>
            <td>女</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

以上代碼將表格佔滿整個頁面並設置了表格邊框合併和表頭背景色以及行的下邊框顏色。這個表格看上去更漂亮和更易於讀取。

二、使用 CSS 選擇器進行表格樣式設置

為表格應用樣式的好方法是使用 CSS 選擇器。樣式選擇器可以使表格更容易閱讀，例如高亮顯示錶頭的行或為特定單元格添加背景色。以下是一些基本的 CSS 選擇器：

• 表格選擇器: 選擇整個表格
• 行選擇器: 選擇表格中的行
• 列選擇器: 選擇表格中的列
• 單元格選擇器: 選擇表格中的單元格

以下是一些常用樣式設置：

/* 表格樣式 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 表頭樣式 */
th {
  background-color: #f2f2f2;
  text-align: left;
}

/* 表格行樣式 */
td {
  border-bottom: 1px solid #ddd;
}

/* 滑鼠懸浮時的高亮 */
tr:hover {
  background-color: #f5f5f5;
}

三、利用 JS 庫進行表格樣式設置

如果你想要更加自定義的表格樣式和交互，利用現成的 JS 庫也是一個不錯的選擇。下面來介紹兩個常用的 JS 庫： DataTables 和 Handsontable 。

1. DataTables

DataTables是一個流行的 jQuery 插件，可以讓你快速創建可排序、可搜索和可過濾的表格。

以下是一個使用 DataTables 的表格示例：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<table id="example" class="display">
    <thead>
        <tr>
            <th>名稱</th>
            <th>位置</th>
            <th>年度收益</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>庫普切克夫人的加法</td>
            <td>洛杉磯</td>
            <td>$124,008</td>
        </tr>
    </tbody>
</table>

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

2. Handsontable

HandsonTable 是一個基於 jQuery 的表格庫，允許你創建支持公式等高級功能的表格。

以下是一個使用 Handsontable 的表格示例：

<link rel="stylesheet" href="https://handsontable.com/docs/6.2.2/components/handsontable-pro.css">
<script src="https://handsontable.com/docs/6.2.2/components/handsontable-pro.js"></script>

<div id="example"></div>

<script>
var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(6, 8),
  rowHeaders: true,
  colHeaders: true
});
</script>

以上是為表格添加樣式並提高頁面可讀性的幾種方法，使得數據呈現更加清晰明了、易於理解和可讀。無論你選擇哪種方法，都請記得保持簡潔和一致性。