在網(wǎng)頁布局中,表格是一種非常常見的元素。CSS表格標(biāo)簽使我們可以針對(duì)表格進(jìn)行各種樣式設(shè)置,使其美觀且易于閱讀。
/*css表格屬性*/ table{ border-collapse:collapse; /*合并表格邊框*/ width: 100%; /*表格寬度*/ margin-bottom:20px; /*下邊距設(shè)定*/ border:1px solid #ccc; /*表格邊框*/ } th,td{ border:1px solid #ccc; /*單元格邊框*/ padding:10px; /*單元格內(nèi)邊距*/ text-align:center; /*文字居中對(duì)齊*/ } th{ background-color:#f2f2f2; /*表頭背景顏色*/ font-weight: bold; /*表頭文字加粗*/ } tr:hover{ background-color:#f5f5f5; /*鼠標(biāo)懸停時(shí)行的背景顏色*/ }
在上述CSS代碼中,table
標(biāo)簽設(shè)定了表格的折疊邊框樣式,寬度,下邊距和邊框樣式。而th
和td
標(biāo)簽則針對(duì)表頭和其他單元格單獨(dú)設(shè)定了邊框、內(nèi)邊距和文字對(duì)齊方式。同時(shí),當(dāng)鼠標(biāo)懸停在表格的某一行時(shí),通過設(shè)定tr:hover
樣式,可以改變?cè)撔械谋尘邦伾谋砀竦囊曈X效果。
通過針對(duì)以上常見的CSS表格屬性進(jìn)行設(shè)置,我們可以定制出符合不同需求的表格樣式。