CSS表格樣式在網頁設計中起著非常重要的作用。通過使用CSS樣式，可以使網頁中的表格更加美觀，易讀和易于導航。下面，我們將介紹一些常見的CSS表格樣式及其示例。 第一種樣式: 顏色和邊框樣式 p標簽

table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
td {
background-color: #fff;
}

這種樣式將表格單元格分成表頭和表格數據，為表頭添加灰色背景和下邊框，并將表格邊框合并為一個。 第二種樣式: 斑馬線樣式 p標簽

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

這種樣式為每行添加背景色，以便更易讀取。此外，它還為表頭添加了綠色背景色和白色字體顏色。 第三種樣式: 鼠標懸停樣式 p標簽

table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
td:hover {
background-color: #f5f5f5;
}

這種樣式會在鼠標懸停在單元格上時，給單元格添加另一種背景色。 第四種樣式: 響應式表格樣式 p標簽

table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
overflow-x: auto;
display: block;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
width: 100%;
display: table-cell;
}
th {
background-color: #4CAF50;
color: white;
}
td {
background-color: #fff;
}

此樣式適用于當表格太大以至于不能自適應時。它將表格設置為響應式樣式，并為它的單元格添加了一個自適應的寬度。 總之，CSS表格樣式對于網頁設計非常重要。無論是為了更好的創造網站的美感，還是為了使表格內容更易于閱讀，都需要使用CSS表格樣式。以上四種樣式及其示例，無論是哪一種，都可以輕松創建美麗且功能強大的表格。