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