用CSS樣式描述表格Table邊框

2024-07-11 08:40:10

字體：大中小

供稿：網(wǎng)友

<br /><html><head><title>HTML Table</title></head><br /><style type=”text/css”><br />TABLE {<br />background: blue;<br />border-collapse: separate;<br />border-spacing: 10pt;<br />border-top: 15px solid red;<br />border-left: 15px solid red;<br />border-right: 5px dashed black;<br />border-bottom: 10px dashed blue; }<br />TD, TH {<br />background: white;<br />border: outset 5pt;<br />horizontal-align: right; }<br />CAPTION {<br />border: ridge 5pt blue;<br />border-top: ridge 10pt blue; }<br /></style><body><br /><table summary=”Vevb.com – Tables and CSS”><br /><caption>First Quarter Sales</caption><br /><thead><tr><br /><thabbr=”salesperson” scope=”col”>Person</th><br /><thabbr=”sales” scope=”col”>Sales</th><br /></tr></thead><br /><tbody><tr><br /><td>Mr. Jin</td><br /><td>600.00</td><br /></tr><tr><br /><td>Mr. Jones</td><br /><td>0000.00</td><br /></tr><tr><br /><td>Ms. Williams</td><br /><td>0000.00</td><br /></tr></tbody><br /><tfoot><tr><br /><td colspan=”2″>Let’s sale, sale, sale!</td><br /></tr></tfoot></table></body></html><br />
提示：您可以先修改部分代碼再運行
列表B

　　您可能注意到了整個CAPTION元素的邊框定義為藍(lán)色5磅的脊線效果，而CAPTION邊框的頂部設(shè)定為10磅。如果單獨的邊框設(shè)定（左邊、右邊、頂部、底部）出現(xiàn)在后面將覆蓋原有的整體邊框設(shè)定。
　　除此以外，在上一個例子中，通過分配TABLE元素的邊框?qū)傩?，可以在一個表格中實現(xiàn)多重邊框（錨標(biāo)記、表格主體、表頭、單獨的單元格等等）。

邊框間距

　　您可以通過邊框間距屬性來指定相鄰的單元格之間的距離，您可以指定一個或兩個值，如果指定了一個值，那么水平和垂直間距都將使用這一個值；如果指定了兩個值，那么第一個值規(guī)定了水平間距而第二個值指定了垂直間距。這些值不能是負(fù)值，我在這個例子中使用了10磅的間距值。

表格行為

　　邊框的collapse屬性設(shè)定了表格的邊框模型，該屬性的默認(rèn)值是獨立的邊框模型，單獨的邊框模型使用border-spacing屬性作為不同邊框之間的間距，該間距使用表格元素作為填充背景。
　　對于邊框模型中，萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）定義了以下的規(guī)則來解決表格樣式的沖突：
　　使用‘隱藏’邊框?qū)傩缘倪吙騼?yōu)先于其他的邊框?qū)傩裕魏问褂?lsquo;隱藏’屬性的邊框比其它的邊框?qū)傩蕴幚韮?yōu)先級要高。

上一篇：CSS 網(wǎng)頁布局排版實例

下一篇：讓Firefox未載入圖片顯示邊框