CSS中的table外邊框是指表格周圍的邊框框線,通過CSS樣式可以設(shè)置表格的邊框樣式、粗細、顏色等屬性。一個典型的表格由表格元素(<table>)、表格行元素(<tr>)、表格數(shù)據(jù)元素(<td>)、表頭元素(<thead>)、表頭行元素(<th>)等構(gòu)成。
<table> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </tbody> </table>
在CSS中設(shè)置表格的外邊框主要通過border屬性實現(xiàn)。border屬性可以設(shè)置邊框的粗細、樣式和顏色,包括上邊框(border-top)、下邊框(border-bottom)、左邊框(border-left)和右邊框(border-right)四個方向。我們可以通過border-collapse屬性來設(shè)置表格邊框的合并,包括合并(collapse)和不合并(separate)兩種方式。 另外,我們還可以通過border-spacing屬性來設(shè)置合并后的表格邊框之間的間距。
table { border-collapse: collapse; /*邊框合并*/ border-spacing: 0; /*邊框間距*/ border: 1px solid #ccc; /*邊框樣式、粗細、顏色*/ } th, td { border: 1px solid #ccc; }
在上面的代碼中,我們設(shè)置了表格的border-collapse屬性為collapse,表示邊框合并;border-spacing屬性為0,表示合并后的表格邊框之間沒有間距;border屬性為1px solid #ccc,表示邊框樣式為實線,粗細為1px,顏色為#ccc。同時,我們還設(shè)置了表頭單元格