CSS對table(表格)的控制是非常強大的,可以讓我們自由定制表格的樣式,使得表格變得更加美觀和易讀。
在使用CSS之前,我們需要先了解一下table的基本結構。先看一下下面的代碼:
姓名 | 年齡 | 城市 |
---|---|---|
張三 | 25 | 北京 |
李四 | 30 | 上海 |
王五 | 28 | 廣州 |
上面的代碼用到了table、thead、tbody、tr、th、td這些標簽。其中,thead和tbody是table的子元素,表示表格頭和表格體,tr表示行,th和td表示列。th用來表示表頭,td用來表示單元格。
接下來,我們可以使用CSS對表格進行美化了。例如,可以應用以下CSS樣式:
table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: center; border: 1px solid #ccc; } th { background-color: #aaa; color: #fff; }
上述代碼中,我們使用了width屬性將表格寬度設置為100%。同時使用了border-collapse屬性將表格邊框合并,使得表格顯示更美觀。在單元格上使用了padding屬性添加內邊距,使用了text-algin屬性設置單元格內文字居中。此外,我們還使用了border屬性設置單元格邊框,使得表格看起來更有層次感。
最后,我們使用了background-color屬性和color屬性對表頭進行美化,讓其背景色變成淺灰色,文字顏色變成白色。
總結一下,CSS對于table的控制非常靈活,通過對表格及其內部元素的樣式控制,可以使表格看起來更加美觀、易讀。
上一篇css對canvas
下一篇css寬高設置