使用CSS處理表格邊框樣式化

2020-03-24 18:31:51

字體：大中小

來源：轉載

供稿：網友

在以前的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: 外凸效果邊框，和內凹效果相反。每個邊框類型都可以指定一種顏色，邊框是繪制在背景顏色上的，列表 html head title HTML Table /title /head style type="text/css" TABLE { background: blue; border-collapse: separate;border-spacing: 10pt; border: 5px solid red; }TD, TH { background: white; border: inset 5pt; horizontal-align: right; }CAPTION { border: ridge 5pt blue; } /style body table summary="TechRepublic.com - Tables and CSS" caption First Quarter Sales /caption thead tr thabbr="salesperson" scope="col" Person /th thabbr="sales" scope="col" Sales /th /tr /thead tbody tr td Mr. Smith /td td 600.00 /td /tr tr td Mr. Jones /td td 0000.00 /td /tr tr td Ms. Williams /td td 0000.00 /td /tr /tbody tfoot tr td colspan="2" Let's sale, sale, sale! /td /tr /tfoot /table /body /html 列表A 這個例子展示了很多可供使用的表格邊框的選項，您可以使用您熟悉的度量單位（像素、磅，行長單位等）。設定邊框的尺寸，您可以使用十六進制數值或顏色名稱來指定邊框顏色。以下的例子演示了定義邊框的方法。 border: 5px solid red; 在這一條語句中融合了寬度、樣式和顏色屬性的定義，但是您也可以對這些元素進行單獨定義，如下所示： border-width: 5px; border-style: solid; border-color: red; 除了將表格作為一個整體進行定義，您也可以將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的代碼將剛才的例子中的表格分成四個部分單獨定義。 html head title HTML Table /title /head style type="text/css" TABLE { background: blue; border-collapse: separate;border-spacing: 10pt;border-top: 15px solid red;border-left: 15px solid red; border-right: 5px dashed black; border-bottom: 10px dashed blue; }TD, TH { background: white; border: outset 5pt; horizontal-align: right; }CAPTION {border: ridge 5pt blue; border-top: ridge 10pt blue; } /style body table summary="TechRepublic.com - Tables and CSS" caption First Quarter Sales /caption thead tr thabbr="salesperson" scope="col" Person /th thabbr="sales" scope="col" Sales /th /tr /thead tbody tr td Mr. Smith /td td 600.00 /td /tr tr td Mr. Jones /td td 0000.00 /td /tr tr td Ms. Williams /td td 0000.00 /td /tr /tbody tfoot tr td colspan="2" Let's sale, sale, sale! /td /tr /tfoot /table /body /html 列表B 您可能注意到了整個CAPTION元素的邊框定義為藍色5磅的脊線效果，而CAPTION邊框的頂部設定為10磅。如果單獨的邊框設定（左邊、右邊、頂部、底部）出現在后面將覆蓋原有的整體邊框設定。除此以外，在上一個例子中，通過分配TABLE元素的邊框屬性，可以在一個表格中實現多重邊框（錨標記、表格主體、表頭、單獨的單元格等等）。邊框間距您可以通過邊框間距屬性來指定相鄰的單元格之間的距離，您可以指定一個或兩個值，如果指定了一個值，那么水平和垂直間距都將使用這一個值；如果指定了兩個值，那么第一個值規定了水平間距而第二個值指定了垂直間距。這些值不能是負值，我在這個例子中使用了10磅的間距值。表格行為邊框的collapse屬性設定了表格的邊框模型，該屬性的默認值是獨立的邊框模型，單獨的邊框模型使用border-spacing屬性作為不同邊框之間的間距，該間距使用表格元素作為填充背景。對于邊框模型中，萬維網聯盟（World Wide Web Consortium）定義了以下的規則來解決表格樣式的沖突： l 使用‘隱藏’邊框屬性的邊框優先于其他的邊框屬性，任何使用‘隱藏’屬性的邊框比其它的邊框屬性處理優先級要高。l 使用‘無樣式’邊框的優先級最低，如果在同一位置所有元素的邊框屬性都是‘無樣式’，表格邊框才會被忽略。（注意，‘無樣式’是邊框樣式的默認值。）l 如果沒有樣式設置為‘隱藏’而且至少有一個樣式沒有設置為‘無樣式’，那么寬邊框的優先級高于細邊框。邊框樣式的優先級如下：雙實線、單實線、虛線、點線、脊線、外凸、槽線，級別最低的是內凹。l 如果邊框樣式只有顏色不同，那么單元格的樣式優先級高于行的優先級，而且高于行組、列、列組和整個表格。邊框表格和其他的HTML元素一樣，擁有很多CSS樣式選項。表格和單元格的邊框是一個很好的例子，CSS應當可以滿足您對表格樣式的需要。但是使用CSS格式化的表格在不同的瀏覽器中會顯示出不同的效果，因此需要進行廣泛的測試。您是CSS的‘粉絲’么？您在HTML表格的樣式上使用了那些選項？請在文章的討論區共享您的經驗。A使用邊框屬性來樣式化整個表格以及錨標記和單獨的單元格
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：提高CSS代碼可讀性

下一篇：css兼容性寫法的實例講解