• EN
香港:(852)3749 9734
廣州: (020) 3808 3267
[email protected]

新聞資料

【網站設計】使用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: 外凸效果邊框,和內凹效果相反。