在網站開發中,表格的應用非常普遍。但是,一個好看的表格需要用 CSS 樣式來美化,這才能讓它看上去更加專業和美觀。本文介紹如何使用 CSS 樣式做出一個美觀的表格6。
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { background-color: #4CAF50; color: white; }
首先,我們需要先設置表格的一些基本樣式,如邊框、列寬等。以下是基本設置的代碼:
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; }
以上設置可以讓表格看起來更加整齊和規整,同時也方便后續的樣式定制。
接下來,我們需要為表格的標題欄設置樣式,這樣才能讓表格更加美觀大方。以下是設置表格標題欄的代碼:
th { background-color: #4CAF50; color: white; }
通過這個代碼,我們可以讓表格標題欄的背景顏色為綠色,并且標題欄的文字顏色為白色,這樣可以提高表格的視覺效果,讓表格更加美觀。
最終版的 CSS 樣式代碼如下:
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; }
在實際應用中,我們還可以根據需要設置每一行的背景顏色,這樣可以突出每一行的區別,增加表格可讀性。
通過以上這些 CSS 樣式的設置,我們可以輕松地做出一個美觀的表格6,并且可以根據需要進行樣式的調整,讓表格更加符合實際需求。