CSS表格樣式示例讓您的網站內容更有趣味性

表格是網站中最常見的元素之一，但傳統的表格樣式顯得單調無味，無法展現出網站內容的重要性。本文將介紹20個CSS表格樣式示例，讓您的網站內容更加有趣味性，讓用戶更容易獲取網站信息。

一、背景顏色樣式

通過改變表格背景顏色，可以使表格更加突出，吸引用戶的眼球。下面的示例會使您獲得在表格每個單元格增加背景顏色的效果。

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

二、邊框樣式

不同的邊框樣式也可以讓網站中的表格更加突出。下面的樣式可以讓表格的邊框更加醒目。

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 2px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

三、交替行樣式

交替行樣式是非常受歡迎的表格樣式之一，可以使表格看起來更加清晰。下面的樣式可以讓表格的奇偶行顏色不同。

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

四、滑動特效

滑動特效可以讓表格在用戶滑鼠懸停時變得更加動態。下面的代碼可以讓表格在懸停時出現滑動特效。

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

td, th {
  border: 2px solid #dddddd;
  text-align: left;
  padding: 8px;
  transition: all 0.3s ease-in-out;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

td:hover {
  transform: translate(10px);
}

五、斑馬紋樣式

斑馬紋樣式也是許多網站中經常使用的一種表格樣式。下面的樣式可以讓表格的斑馬紋更加明顯。

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  width: 33%;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

六、緊湊型樣式

如果網站中的表格內容過多，可以通過使用緊湊的樣式將表格展示得更加緊湊，便於用戶獲取信息。下面的樣式是緊湊型樣式。

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

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.5;
}

tr:nth-child(even){
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

七、另類顏色樣式

這個樣式會改變表格的顏色和邊框樣式，是將表格樣式與網站主題協調的一種好方法。

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

th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f1f1f1;
}

th {
  background-color: #4CAF50;
  color: white;
}

td:first-child {
  border-left: 1px solid #dddddd;
}

td:last-child {
  border-right: 1px solid #dddddd;
}

八、懸停樣式

表格懸停樣式可以讓表格更加乾淨、易於閱讀，能夠促進用戶閱讀網站內容，下面的樣式可以讓當滑鼠懸停時出現表格懸停樣式。

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

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  transition: all 0.3s ease;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
  transform: scale(1.01);
}

九、表格標題樣式

表格標題樣式可以讓表格看起來更加整潔，方便用戶獲取信息。下面的代碼可以增加表格標題樣式。

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

th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

十、

原創文章，作者：JBCA，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/133190.html