提高表格樣式的方法和技巧

表格是網頁開發中不可缺少的元素，但是默認的表格樣式讓網頁顯得過於枯燥和缺乏美感。本文將介紹一些提高表格樣式的方法和技巧，讓你的表格不再單調。

一、使用CSS樣式

使用CSS來美化表格是最為常見的方法。可以通過添加背景顏色、邊框、字體樣式等等來改變表格的外觀。

下面是一個簡單的樣例代碼：

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>電話號碼</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>18</td>
    <td>123456789</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>987654321</td>
  </tr>
</table>

上面的CSS代碼使用了border-collapse屬性，讓表格中的邊框合併為一條線，從而讓表格看起來更加整潔。同時，設置了表格的寬度為100%。使用th和td元素的padding屬性來設定單元格的內邊距，使用border-bottom設置表格下邊框的樣式，而在滑鼠移到某一行時則使用:hover偽類來改變該行的背景顏色。

二、使用JavaScript插件

對於要求更高的表格美化需求，可以使用JavaScript插件。下面介紹兩個流行的插件。

1. DataTables

DataTables是一個使用jQuery庫的插件，它可以讓表格在用戶交互時變得更加美觀且易於使用。

下面是一個使用DataTables的例子：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>

<table id="example" class="display">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>電話號碼</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>18</td>
            <td>123456789</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
            <td>987654321</td>
        </tr>
    </tbody>
</table>

上面的代碼中引入了DataTables的樣式和JavaScript庫，然後在table中設置id為example，並在JavaScript代碼中調用它。這個插件會使表格具有排序、查找和分頁等功能，並添加樣式來讓表格更加美觀。

2. Tabulator

Tabulator是一個自行渲染的JavaScript表格插件，可創建響應式、動畫式表格。它能夠適應各種數據，包括JSON和CSV等格式。

下面是一個使用Tabulator的例子：

<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css">
<script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
<script>
var tabledata = [
    {id:1, name:"張三", age:18, phone:123456789},
    {id:2, name:"李四", age:22, phone:987654321},
];

var table = new Tabulator("#example-table", {
    data:tabledata,
    layout:"fitColumns",
    columns:[
        {title: "姓名", field: "name"},
        {title: "年齡", field: "age"},
        {title: "電話號碼", field: "phone"},
    ],
});
</script>

上面的代碼中引入了Tabulator的樣式和JavaScript庫，然後在div中設置id為example-table。在JavaScript代碼中，創建了一個包含數據、布局和列定義的表格。這個插件可以讓表格更加生動，支持搜索、排序、分組和圖表等多種功能。

三、表格中添加圖標

在表格中添加圖標可以讓表格更加直觀和易於理解。下面是一個例子，使用Font Awesome添加圖標：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-GnSBrFVQkpExkRdZlMnpgMKSQwMvQvjVrZBXlepXVrS2VwPGhccwpX5jz+QoNZzB" crossorigin="anonymous">
<table>
  <tr>
    <th>項目</th>
    <th>狀態</th>
  </tr>
  <tr>
    <td>任務1</td>
    <td><i class="far fa-circle"></i> 未完成</td>
  </tr>
  <tr>
    <td>任務2</td>
    <td><i class="fas fa-check-circle"></i> 已完成</td>
  </tr>
</table>

上面的代碼中引入了Font Awesome的樣式庫，然後使用了兩個不同的圖標——空心圓和實心圓。可以根據自己的需求使用其它圖標來進行美化。

總結

通過使用CSS樣式、JavaScript插件和添加圖標等方法，可以大大提高表格的美觀程度，讓網頁看起來更加精美和專業。選擇適合自己的美化方案，讓表格煥發出不同的風采。