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

设置表格边框方法一，编写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]