用CSS样式描述表格Table边框
发布时间：2010-01-23 14:19:10 作者：佚名 
我要评论
我要评论表格边框的处理是CSS网页布局中经常会遇到的内容，在webjx.com中也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
提示：您可以先修改部分代码再运行
列表B
您可能注意到了整个CAPTION元素的边框定义为蓝色5磅的脊线效果，而CAPTION边框的顶部设定为10磅。如果单独的边框设定（左边、右边、顶部、底部）出现在后面将覆盖原有的整体边框设定。
除此以外，在上一个例子中，通过分配TABLE元素的边框属性，可以在一个表格中实现多重边框（锚标记、表格主体、表头、单独的单元格等等）。
边框间距
您可以通过边框间距属性来指定相邻的单元格之间的距离，您可以指定一个或两个值，如果指定了一个值，那么水平和垂直间距都将使用这一个值；如果指定了两个值，那么第一个值规定了水平间距而第二个值指定了垂直间距。这些值不能是负值，我在这个例子中使用了10磅的间距值。
表格行为
边框的collapse属性设定了表格的边框模型，该属性的默认值是独立的边框模型，单独的边框模型使用border-spacing属性作为不同边框之间的间距，该间距使用表格元素作为填充背景。
对于边框模型中，万维网联盟（World Wide Web Consortium）定义了以下的规则来解决表格样式的冲突：
使用‘隐藏’边框属性的边框优先于其他的边框属性，任何使用‘隐藏’属性的边框比其它的边框属性处理优先级要高。
使用‘无样式’边框的优先级最低，如果在同一位置所有元素的边框属性都是‘无样式’，表格边框才会被忽略。（注意，‘无样式’是边框样式的默认值。）
如果没有样式设置为‘隐藏’而且至少有一个样式没有设置为‘无样式’，那么宽边框的优先级高于细边框。边框样式的优先级如下：双实线、单实线、虚线、点线、脊线、外凸、槽线，级别最低的是内凹。
如果边框样式只有颜色不同，那么单元格的样式优先级高于行的优先级，而且高于行组、列、列组和整个表格。
边框
表格和其他的HTML元素一样，拥有很多CSS样式选项。表格和单元格的边框是一个很好的例子，CSS应当可以满足您对表格样式的需要。但是使用CSS格式化的表格在不同的浏览器中会显示出不同的效果，因此需要进行广泛的测试。
相关文章
Dreamweaver中怎么让html网页中的table边框细线显示?
Dreamweaver中怎么让html网页中的table边框细线显示？Dreamweaver中插入表格默认是宽边框的，看上去很难看，该怎么将边框设置成细线呢？请看下文详细介绍，需要的朋友可以2016-03-10- Table默认是有外边框，有内边框的，那么如何通过css样式简单实现Table没有外边框，只有内边框呢？下面有个不错的示例，大家可以看看2014-06-13
一个属性border-collapse解决Table的边框问题
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下2014-03-26- 在默认的情况下，我们的CSS将Table的边框清除掉了，下面与大家分享下CSS控制Table内外边框、颜色、大小的样式，想学习的朋友可以参考下2013-08-01
- 在css中已经写好了使table不显示边框的代码，在ie浏览器中显示正常，但是在火狐和谷歌浏览器中显示不正常，table的每个边框都显示了出来，因为浏览器不同带来的麻烦可是不2013-06-26
- 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。2011-04-01
- 大家经常会发现Table的BORDER设置为1，得到的边框却不是想要的1个像素的细边框，于是很多人去想方设法做出细边框的效果。2010-06-23
- 前面学了网页表格中的单元格线条的设置方法,今天学习网页表格的边框线的设置方法。 ------------------------------------------------------------------------------2008-10-17
- 网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏，是可以用frame参数来控制的。请2008-10-17
- 这篇文章主要介绍了Table显示你要显示的边框代码的相关资料,需要的朋友可以参考下2016-05-03
最新评论