優化表格展示：用CSS樣式打造舒適的閱讀體驗

一、表格的行高與列寬

在表格中設置合適的行高和列寬可以提升表格的可讀性。過高的行高會造成閱讀困難，而過窄的列寬則會讓內容顯得擁擠。使用CSS樣式，我們可以通過設置表格的 line-height 和 width 屬性來調整行高和列寬。例如：

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  line-height: 1.4;
  width: 20%;
}

其中，line-height: 1.4; 是指每行文字間的行距為字體大小的 1.4 倍，這樣可以保證每行文字能夠正常顯示，並且相鄰行之間有一定的間隔。

二、表格的字體和顏色

表格中的字體和顏色也是影響表格可讀性的重要因素。合適的字體和顏色可以讓表格內容更加清晰易讀，避免造成閱讀困難。

在CSS樣式中，我們可以使用 font-family 和 color 屬性來設置字體和顏色。例如：

table {
  font-family: Arial, sans-serif;
  color: #333;
}

三、表格的邊框和背景色

通過設置表格的邊框和背景色，可以讓表格更加清晰易讀。邊框可以讓表格內容更加規整，背景色則可以區分表格中不同區域的內容。

在CSS樣式中，我們可以使用 border 和 background-color 屬性來設置表格的邊框和背景色。例如：

table {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

四、表格的標題

為表格添加標題可以讓讀者更加明確地了解表格的內容。在HTML中，我們可以使用 <caption> 標籤來添加表格的標題。例如：

  
銷售數據表
  

    
產品名稱
    
銷售數量
    
銷售額
  
  

    
產品A
    
100
    
10000
  
  

    
產品B
    
200
    
20000
  

五、表格的單元格合併

有時候，表格中的相鄰單元格具有相同的內容，為了避免內容重複，我們可以將相鄰單元格合併成一個單元格。在HTML中，我們可以使用 rowspan 和 colspan 屬性來實現單元格的合併。例如：

  

    
產品A
    
2017
    
100
  
  

    
2018
    
200
  
  

    
產品B
    
2017
    
150
  

上面的代碼將第一列的單元格合併成了一個單元格。