如何使用CSS優化HTML表格的呈現效果

一、使用CSS樣式美化表格的邊框

細緻的邊框能夠讓表格更加清晰易讀，我們可以通過CSS樣式來美化表格的邊框。使用CSS樣式修改表格邊框的方法是：

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    border: 1px solid #ccc;
}

其中，border-collapse: collapse;用於合併相鄰單元格的邊框，border-spacing: 0;用於設置單元格之間的距離為0，border: 1px solid #ccc;用於設置單元格邊框的樣式。

二、使用CSS樣式更改表格字體和文字顏色

修改表格文字樣式可以讓表格更加美觀，同時也可以使表格更加易讀。我們可以通過使用CSS樣式修改表格字體和文字顏色的方法是：

table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
}

其中，font-family用於設置字體樣式，font-size用於設置字體大小，color用於設置文字顏色。

三、使用CSS樣式為表格添加背景顏色和斑馬線效果

使用背景顏色和斑馬線效果能夠讓表格更加美觀，同時也能夠使表格更加易讀。我們可以通過使用CSS樣式為表格添加背景顏色和斑馬線效果的方法是：

table {
    background: #f9f9f9;
}
tr:nth-child(even) {
    background: #fff;
}
tr:nth-child(odd) {
    background: #f2f2f2;
}

其中，background用於設置表格的背景顏色，tr:nth-child(even)用於選中偶數行，tr:nth-child(odd)用於選中奇數行。我們可以為偶數行和奇數行設置不同的樣式實現斑馬線效果。

四、使用CSS樣式合併表格單元格

有些情況下，可能需要合併表格單元格來展示更加複雜的數據。我們可以通過使用CSS樣式合併表格單元格的方法是：

2個單元格合併為1個單元格
2行單元格合併為1個單元格

其中，colspan用於水平方向合併單元格，rowspan用於垂直方向合併單元格，需要合併的單元格可以在HTML代碼中進行定義。

五、使用CSS樣式為表格添加排序功能

在表格中添加排序功能可以讓表格更加實用，我們可以通過使用CSS樣式為表格添加排序功能的方法是:

table.sortable th {
    cursor: pointer;
}
table.sortable th:after {
    content: " ▾";
}
table.sortable th.asc:after {
    content: " ▴";
}
table.sortable th.desc:after {
    content: " ▾";
}

其中，cursor: pointer;用於將滑鼠樣式設置為手型，content用於在表格頭部添加排序箭頭。

以上是使用CSS對HTML表格的優化方法，我們可以根據實際情況對表格進行功能和樣式的修改，以達到更佳的表現效果。

完整代碼示例

	
	
		table {
		    border-collapse: collapse;
		    border-spacing: 0;
		    font-family: Arial, Helvetica, sans-serif;
		    font-size: 14px;
		    color: #333;
		    background: #f9f9f9;
		}
		th, td {
		    border: 1px solid #ccc;
		    text-align: left;
		    padding: 8px;
		}
		tr:nth-child(even) {
		    background: #fff;
		}
		tr:nth-child(odd) {
		    background: #f2f2f2;
		}
		table.sortable th {
		    cursor: pointer;
		}
		table.sortable th:after {
		    content: " ▾";
		}
		table.sortable th.asc:after {
		    content: " ▴";
		}
		table.sortable th.desc:after {
		    content: " ▾";
		}
	


	

	  

	    

	      
姓名
	      
性別
	      
年齡
	      
城市
	    
	  
	  

	    

	      
張三
	      
男
	      
28
	      
北京
	    
	    

	      
李四
	      
女
	      
26
	      
上海
	    
	    

	      
王五
	      
男
	      
32
	      
廣州
	    
	    

	      
趙六
	      
女
	      
29
	      
深圳
	    
	  
	
	
		document.querySelectorAll('th').forEach(function(th) {
		  th.addEventListener('click', function() {
		    var table = th.closest('table');
		    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
		        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
		        .forEach(function(tr) { table.appendChild(tr) });
		  })
		})

		function comparer(index, asc) {
		  return function(a, b) {
		    return (a = a.children[index].textContent, b = b.children[index].textContent, isNaN(a - b) ? a.localeCompare(b) : a - b) * (asc ? 1 : -1)
		  }
		}