用CSS样式描述表格Table边框

2024-07-11 08:40:10

字体：大中小

来源：转载

供稿：网友

<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元素的边框定义为蓝色5磅的脊线效果，而CAPTION边框的顶部设定为10磅。如果单独的边框设定（左边、右边、顶部、底部）出现在后面将覆盖原有的整体边框设定。
　　除此以外，在上一个例子中，通过分配TABLE元素的边框属性，可以在一个表格中实现多重边框（锚标记、表格主体、表头、单独的单元格等等）。

边框间距

　　您可以通过边框间距属性来指定相邻的单元格之间的距离，您可以指定一个或两个值，如果指定了一个值，那么水平和垂直间距都将使用这一个值；如果指定了两个值，那么第一个值规定了水平间距而第二个值指定了垂直间距。这些值不能是负值，我在这个例子中使用了10磅的间距值。

表格行为

　　边框的collapse属性设定了表格的边框模型，该属性的默认值是独立的边框模型，单独的边框模型使用border-spacing属性作为不同边框之间的间距，该间距使用表格元素作为填充背景。
　　对于边框模型中，万维网联盟（World Wide Web Consortium）定义了以下的规则来解决表格样式的冲突：
　　使用‘隐藏’边框属性的边框优先于其他的边框属性，任何使用‘隐藏’属性的边框比其它的边框属性处理优先级要高。

上一篇：CSS 网页布局排版实例

下一篇：让Firefox未载入图片显示边框