设置表格边框方法一,编写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]
您还没有登录,请您登录后再发表评论
实例193 闪烁的表格边框 300 实例194 单元格边框变色 301 实例195 选中的行变色 302 7.2 对单元格的焦点进行控制 303 实例196 选定表格中的单元格 303 实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与...感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友
.NET的反射在软件设计上的应用 关于跨程序集的反射 实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的...
注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介 《Java开发实战1200例》分为I、II两卷共计1200个例子,包括了开发...
相关推荐
实例193 闪烁的表格边框 300 实例194 单元格边框变色 301 实例195 选中的行变色 302 7.2 对单元格的焦点进行控制 303 实例196 选定表格中的单元格 303 实例197 左右移动单元格的信息 304 实例198 通过键盘使单元格...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与...感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友
.NET的反射在软件设计上的应用 关于跨程序集的反射 实现C#和VB.net之间的相互转换 深入剖析ASP.NET组件设计]一书第三章关于ASP.NET运行原理讲述的补白 asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的...
注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介 《Java开发实战1200例》分为I、II两卷共计1200个例子,包括了开发...