在HTML中,表格是一種非常重要的元素。然而,如果表格沒有經過CSS樣式的修飾,那么其樣式通常是非常丑陋的。因此,我們需要使用CSS來為網頁中的表格增加樣式。
這里介紹一個非常實用的CSS表格樣式:菜鳥教程表格樣式。
/*菜鳥教程表格樣式*/ table { border-collapse:collapse; border-spacing:0; width:100%; overflow:auto; font-size:16px; font-family:Microsoft Yahei; } th,td { border:1px solid #e0e0e0; padding:10px 20px; text-align:center; } th { background-color:#f5f5f5; font-weight:bold; } tr:nth-child(even) { background-color:#f9f9f9; }
這個CSS樣式包括以下幾個屬性:
border-collapse:表示邊框合并效果,collapse表示合并,separate表示不合并。
border-spacing:表示邊框間距的大小。
width:表示表格的寬度。
overflow:表示在表格內容過多時如何顯示,auto表示根據需要自動添加滾動條。
font-size:表示表格中文字的大小。
font-family:表示表格中文字的字體。
border:表示表格的邊框,可以設置邊框的大小、樣式和顏色。
padding:表示表格單元格的內邊距,即單元格內容和邊框之間的距離。
text-align:表示表格單元格中文字的對齊方式。
background-color:表示表格單元格的背景顏色。
font-weight:表示表格標題的文字粗細。
tr:nth-child:表示表格中每一行的樣式,可以設置不同行的背景顏色或其他樣式。
以上就是菜鳥教程表格樣式的詳細說明。如果你想讓你的網頁表格擁有更美觀的外觀,不妨試試這個樣式吧。
上一篇mysql事務實例