网页下的表格边框设计更多效果变化

设置表格边框方法一，编写CSS代码定义样式表:

首先，要了解这些常用边框类型说明：
none:?指定表格没有边框，所以边框宽度为0。
dotted:?由点线组成的表格边框。
dashed:?由虚线组成的表格边框。
solid:?由实线组成的表格边框。
double:?由双实线组成的表格边框。
groove:?槽线效果边框。
ridge:?脊线效果边框，和槽线效果相反。
inset:?内凹效果边框。
outset:?外凸效果边框，和内凹效果相反。?

以下CSS代码使用时，均应放置在这样的样式表style标签中，这些style标签通常放置在网页文件的前部：
＜style＞
样式名称1?{?样式代码1?}
样式名称2?{?样式代码2?}
样式名称3?{?样式代码3?}?
......
＜/style＞
应用这些样式代码时，应把样式名称添加到表格中，类似这样：
＜table?width=300?class=样式名称1>

这是未使用CSS代码定义，直接指定表格边框宽度和颜色的做法，也是很多初学者最初使用方法，可行，但效果不够完美。如图1，灰色虚线边框。通过Dreamweaver的设计界面直接设置表格边框宽度就是这样的。
＜table?width=300?border=1?cellpadding=0?cellspacing=0?bordercolor=#CCCCCC>
??＜tr＞
????＜td＞文字第一行＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行＜/td＞
??＜/tr＞
＜/table＞
[图1]


这个style标签，定义了图2这样的表格，边框宽度为1像素，灰色虚线边框，只显示表格的最外层边线，里面的线不显示
＜style＞
.Table1?{?border:?1px?dashed?#CCCCCC;?}?
＜/style＞
应用到表格中时，这样写：
＜table?width=300?class=Table1>
??＜tr＞
????＜td＞文字第一行＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行＜/td＞
??＜/tr＞
＜/table＞
[图2]


这个style标签，定义了图3这样的表格，边框宽度为1像素，灰色实线边框，表格内外层边线都显示
＜style＞
.Table1?{?border-collapse:collapse;?}?
.Table1?td?{?border:?1px?solid?#CCCCCC;?}?
＜/style＞
应用到表格中时，这样写：
＜table?width=300?class=Table1>
??＜tr＞
????＜td＞文字第一行＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行＜/td＞
??＜/tr＞
＜/table＞
[图3]


这个style标签，定义了图4这样的表格，边框宽度为1像素，灰色虚线边框，表格内外层边线都显示
＜style＞
.Table1?{?border-collapse:collapse;?}?
.Table1?td?{?border:?1px?dashed?#CCCCCC;?}?
＜/style＞
应用到表格中时，这样写：
＜table?width=300?class=Table1>
??＜tr＞
????＜td＞文字第一行1列＜/td＞
????＜td＞文字第一行2列＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行1列＜/td＞
????＜td＞文字第二行2列＜/td＞
??＜/tr＞
＜/table＞
[图4]


<B>设置表格边框方法二，不使用CSS代码定义style标签，用表格的rules属性和frame属性改变边框样式</B>

首先，要了解frame属性可取的参数及含义：
void?-?默认值。表示不显示表格最外围的边框。?
box?-?同时显示四条边框。?
border?-?同时显示四条边框。?
above?-?只显示顶部边框。?
below?-?只显示底部边框。?
lhs?-?只显示左侧边框。?
rhs?-?只显示右侧边框。?
hsides?-?只显示水平方向的两条边框。?
vsides?-?只显示垂直方面的两条边框。?

并且，要了解rules属性可取的参数及含义：
none?-?默认值。无边框。?
groups?-?为行组或列组加边框。?
rows?-?为行加边框。?
cols?-?为列加边框。?
all?-?为所有行列（单元格）加边框?

如图5，隐藏表格中间的横线：
＜table?width=300?border=1?bordercolor=#CCCCCC?style=border-collapse:collapse;?rules=cols>
??＜tr＞
????＜td＞文字第一行1列＜/td＞
????＜td＞文字第一行2列＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行1列＜/td＞
????＜td＞文字第二行2列＜/td＞
??＜/tr＞
＜/table＞
[图5]


如图6，隐藏表格的外框：
＜table?width=300?border=1?bordercolor=#CCCCCC?style=border-collapse:collapse;?frame=void>
??＜tr＞
????＜td＞文字第一行1列＜/td＞
????＜td＞文字第一行2列＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行1列＜/td＞
????＜td＞文字第二行2列＜/td＞
??＜/tr＞
＜/table＞
[图6]


如图7，隐藏表格的竖线，只显示横线，造成稿纸的效果：
＜table?width=300?border=1?bordercolor=#CCCCCC?style=border-collapse:collapse;?frame=hsides?rules=rows>
??＜tr＞
????＜td＞文字第一行1列＜/td＞
????＜td＞文字第一行2列＜/td＞
??＜/tr＞
??＜tr＞
????＜td＞文字第二行1列＜/td＞
????＜td＞文字第二行2列＜/td＞
??＜/tr＞
＜/table＞
[图7]