在網頁設計中，表格是非常常見的界面元素之一，而表格的排序功能也是經常需要用到的。使用 CSS 可以很方便地實現表格的排序功能，下面就讓我們來看一下實現方法。

首先，我們需要在表格的<thead>標簽中添加一個點擊事件，用來觸發表格排序的操作：

姓名年齡性別

在上面的示例代碼中，我們在三個表頭單元格中分別添加了一個 onclick 事件，該事件會調用一個名為 sortTable 的 JavaScript 函數，并傳入一個參數，用來表示當前點擊的是哪一列。

接下來，我們需要編寫 sortTable 函數來完成表格排序的功能。這個函數的實現方式有很多種，下面給出一種比較簡單的實現方法：

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

在上面的示例代碼中，我們首先獲取了表格元素和行元素，然后使用一個 while 循環來進行排序。循環中使用一個 for 循環來遍歷每一行，并使用一個 shouldSwitch 變量來判斷該行是否需要進行排序。對于每一行的兩個單元格，我們分別將其內容轉換為小寫字母，然后比較它們的大小，如果第一個單元格的內容大于第二個單元格的內容，則應該進行排序操作，并將 shouldSwitch 設置為 true。最后，我們使用 parentNode.insertBefore 方法將兩個行元素交換位置。

最后，添加一些簡單的 CSS 樣式就能夠讓我們的表格排序功能更加美觀和易于使用。

<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 18px;
}
th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

如上所示，我們給表格元素添加了一些基本的樣式，包括邊框、字體大小和背景顏色等。

總之，使用 CSS 和 JavaScript 實現表格排序功能并不難，只需要理解其中的原理和實現方法，就能很好地應用到實際的網頁設計中。