CSS中的表格是網頁設計中常用的一種元素,其樣式美觀程度直接影響到網頁的整體感覺。下面我們就來講一下如何通過CSS來創建一個好看的表格。
table{ border-collapse: collapse; width: 100%; } table th,table td{ padding: 15px; text-align: left; border-bottom: 1px solid #ddd; } table th{ background-color: #f2f2f2; font-weight: bold; font-size: 1em; } table tr:nth-child(even){ background-color: #f9f9f9; } table tr:hover{ background-color: #dbdbdb; }
以上代碼是一個基本的表格樣式設置,代碼中的解釋如下:
1.table標簽設置了文本的邊框折疊,width為100%;
2.table th,table td進行單元格樣式設置,padding為15px,text-align為左對齊,border-bottom為1像素實線灰色;
3.table th是表頭樣式設置,background-color為淺灰色,font-weight為粗體,font-size大小為1em;
4.table tr:nth-child(even)設置行的背景色為淺灰色,即奇數行;
5.table tr:hover設置鼠標移動到行時的背景色。
總之,通過運用CSS的表格樣式設置,我們可以輕松地創建出具有美觀程度的表格,讓網頁更加清新、簡潔。
上一篇css中失去焦點編寫
下一篇css中如何判斷數字