CSS中的表格是網(wǎng)頁設(shè)計中常用的一種元素,其樣式美觀程度直接影響到網(wǎng)頁的整體感覺。下面我們就來講一下如何通過CSS來創(chuàng)建一個好看的表格。
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; }
以上代碼是一個基本的表格樣式設(shè)置,代碼中的解釋如下:
1.table標(biāo)簽設(shè)置了文本的邊框折疊,width為100%;
2.table th,table td進(jìn)行單元格樣式設(shè)置,padding為15px,text-align為左對齊,border-bottom為1像素實線灰色;
3.table th是表頭樣式設(shè)置,background-color為淺灰色,font-weight為粗體,font-size大小為1em;
4.table tr:nth-child(even)設(shè)置行的背景色為淺灰色,即奇數(shù)行;
5.table tr:hover設(shè)置鼠標(biāo)移動到行時的背景色。
總之,通過運(yùn)用CSS的表格樣式設(shè)置,我們可以輕松地創(chuàng)建出具有美觀程度的表格,讓網(wǎng)頁更加清新、簡潔。