CSS是一種在網站設計中非常重要的語言,可以幫助網站開發者快速方便地設置網站的樣式。其中,設置table是常見的需求,下面讓我們來學習一下如何直接設置table的樣式。
table { border-collapse: collapse; /*表格邊框合并*/ width: 100%; /*設置表格寬度*/ margin: 0 auto; /*表格水平居中*/ } th, td { border: 1px solid #ccc; /*設置單元格邊框*/ padding: 10px; /*設置單元格內邊距*/ text-align: center; /*設置單元格文本居中*/ } thead { background-color: #eee; /*設置表頭背景色*/ } th { font-weight: bold; /*設置表頭字體加粗*/ }
以上代碼中,我們使用了table選擇器來設置整個表格的樣式。其中,border-collapse屬性可以讓表格邊框合并,使表格看起來更加整潔。width屬性可以設置表格的寬度,margin屬性可以讓表格水平居中。
接下來,我們使用了th和td選擇器來設置單元格的樣式。其中,border屬性可以設置單元格的邊框樣式,padding屬性可以設置單元格內邊距,text-align屬性可以設置單元格文本居中。
最后,我們使用了thead選擇器來設置表頭的樣式。其中,background-color屬性可以設置表頭背景色,font-weight屬性可以設置表頭字體加粗。
通過上述CSS代碼,我們能夠直接設置table的樣式,使得表格看起來更加美觀,并且方便快捷。
上一篇css怎么看圓角
下一篇css怎么禁止圖片另存