懸停互動讓數據動起來；奇偶行顏色交錯，讓大數據表格瞬間更易閱讀。

##為什麼要有這功能
設計表格時，設定其外觀是提升用戶體驗的重要一環。清晰、分明的表格佈局，能讓數據更易於閱讀與理解。使用 table、tr、th、td 等 CSS 樣式可以簡單地自定義表格，加入奇偶行色彩、懸停效果等設計能使表格更具互動性，並且增強用戶的視覺體驗，特別是處理大量數據時，這些設計會更為重要。

##核心結構
table：定義整個表格的寬度、邊框、間距等基本樣式。
tr：設置每行的樣式，包括行間距、背景顏色等。
th：定義表格標題單元格的樣式，通常比 td 文字更粗，居中顯示。
td：設置表格數據單元格的樣式。
tr.odd 和 tr.even：通過奇偶行來區分每一行的背景顏色，增強可讀性。
tr:hover：當用戶懸停在行上時，改變行的背景顏色，增加交互性。

##主要功能
表格的完整佈局設計：控制表格的寬度、邊框、行高等，確保表格結構清晰。
表格行間交錯顏色：奇偶行不同顏色的設置，增強了數據的可讀性。
表格懸停效果：使用 hover 增強用戶與表格的互動體驗。
數據區分明確：表格頭部與內容使用不同的樣式設置，使表頭更為突出。

##注意事項
在設置表格寬度時，應確保容器寬度的合理性，避免表格過於寬或過窄。
設定奇偶行的顏色時，應選擇不過於鮮豔的顏色，避免干擾數據的閱讀。
在設計表格懸停效果時，應保證色彩變化與背景色之間有明顯對比，以提升可用性。

##簡單範例應用

<Style>
/* CSS範例 - 表格樣式設置 */
table {
    width: 100%; /* 設置表格寬度佔滿容器 */
    border-collapse: collapse; /* 移除單元格間距 */
}

th, td {
    padding: 10px; /* 設置單元格內的填充空間 */
    text-align: left; /* 文字左對齊 */
    border: 1px solid #ddd; /* 設置單元格邊框 */
}

tr.odd {
    background-color: #f2f2f2; /* 設置奇數行背景色 */
}

tr.even {
    background-color: #ffffff; /* 設置偶數行背景色 */
}

tr:hover {
    background-color: #ddd; /* 懸停時行的背景色變化 */
}
</Style>