【網站設計】使用CSS處理表格邊框樣式化
在以前的web開發欄目中,我介紹了不少處理html表格的方法,盡管現在使用表格來布局網頁的方法已經不再時髦了,但是您依然可以使用表格來顯示表列數據。
顯示和樣式化表格的方法有很多種,在這篇文章中,我將介紹使用CSS對表格邊框進行樣式化的方法。
鏈接
CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一個可選的錨標記和單元格以及數據行,表格模型包含以下的元素:表格、錨、數據行、數據行組、數據列、數據列組和單元格。這篇文章將集中講解表格中各個元素的邊框處理方法。
邊框
根據不同的需求,您可以對表格和單元格應用不同的邊框。您可以定義整個表格的邊框也可以對單獨的單元格分別進行定義。CSS的邊框屬性可以指定邊框的大小以及顏色和類型。以下的代碼定義了寬度為5個像素的黑色實線邊框:
TABLE { 5px solid black; }
除此以外,您還可以使用相同的語法為表格中單獨的單元格分別指定邊框屬性。您可以使用以下的屬性值來定義邊框類型:
l none: 指定表格沒有邊框,所以邊框寬度為0。
l dotted: 由點線組成的表格邊框。
l dashed: 由虛線組成的表格邊框。
l solid: 由實線組成的表格邊框。
l Double: 由雙實線組成的表格邊框。
l Groove: 槽線效果邊框。
l ridge: 脊線效果邊框,和槽線效果相反。
l inset: 內凹效果邊框。
l outset: 外凸效果邊框,和內凹效果相反。