CSS表格

CSS表格 - border 属性

border 简写属性在一个声明设置所有的边框属性。

font 简写属性 在一个声明中设置所有字体属性。
可以按顺序设置如下属性:
border-width border-style border-color

如下代码:

p{border:5px solid red;}

具体参数值在下面 一 一介绍

CSS表格 - border-collapse 属性

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
语法如下:

p{border-collapse:collapse; }

页面上显示为

Firstname Lastname
Bill Gates
CSS表格 - border-spacing 属性

border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。
注释:某些版本的IE浏览器不支持此属性。
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。
语法如下:

p{border-spacing:10px 50px; }

页面上显示为

border-spacing 10px

border-spacing 50px 10px
CSS表格 - caption-side 属性

caption-side 属性设置表格标题的位置。
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side 属性。
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。
语法如下:

p{caption-side:bottom; }
有三个值: top bottom inherit

页面上显示为

标题在上
Bill Gates

标题在下
Bill Gates
CSS表格 - empty-cells 属性

empty-cells 属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。
注释:某些版本的IE浏览器不支持此属性。
该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。
有三个值: hide show inherit 语法如下:

p{empty-cells:hide; }

页面上显示为

empty-cells hide
Bill

empty-cells show
Bill
习题

习题1 | 习题2 | 习题3