登录123 | 账号: 密码: 今天是: 加入收藏 返回首页 

同城供应求购,商机就在身边 免费企业商铺,免费发布商机 关注商业资讯,把握商业机会 同城库存二手,晒出您的宝贝,淘进新的宝贝
全国企业黄页大全,加入即可得到推广
返回同城123首页
同城123信息网,最全最专业的同城分类信息网
同城生活贴吧,贴出生活的精彩 同城房屋租售,卖房、买房、租房、出租 同城招聘求职,优秀人才/高薪岗位等您来 同城婚恋交友,寻找你的TA
免费无极限,广告任意发
供应求购 免费商铺 商业资讯 库存二手 黄页大全 生活贴吧 房屋租售 招聘求职 婚恋交友 自助广告

网页上的表格边框设计更多效果变化
发布时间:2010/9/22 22:04:25 发布人:网络游民 点击:259

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

文章分类:Web前端

设置表格边框方法一,编写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]
http://image1.club.sohu.com/pic/4a/51/hxzyeebec742a86e7d0c.jpg

这个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]
http://image1.club.sohu.com/pic/2d/81/hxzy39a8f11b6d7deff3.jpg

这个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]
http://image1.club.sohu.com/pic/c5/e2/hxzya1993abd30c55948.jpg

这个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]
http://image1.club.sohu.com/pic/34/af/hxzyabc690a69263a702.jpg

<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]
http://image1.club.sohu.com/pic/a8/b3/hxzyca2646065c7055d4.jpg

如图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]
http://image1.club.sohu.com/pic/e0/3c/hxzyac36033d8faec200.jpg

如图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]
http://image1.club.sohu.com/pic/11/13/hxzyc026d66ed451a748.jpg

回复此帖
#1楼回复: re:网页上的表格边框设计更多效果变化 网络游民 [2010/9/22 22:10:24]
好东西,学习了
 页次:1/1 每页10 总记录数1 
分页: 1  
123发布网广告位【218】 123发布网广告位【219】
 ※ 发布回复   ↓请遵循123发布网同城生活贴吧/论坛发帖规则;↓寻一夜情、包养、招嫖类信息的一律全部删除,并报公安备案↓  
回复标题:  
回复内容:
上传图片:
验 证 码:  

123发布网广告位【220】 123发布网广告位【221】
网站首页 | 关于我们 | 广告业务 | 关于VIP | 免责声明 | 联系我们 | 设为首页 | 加入收藏 | 意见反馈 | 网站建设
123发布网 版权所有 www.123fbw.com  联系电话:18331151646  QQ:1016964448
 CopyRight © 2007-2016 All Right Reserved  联系站长  津ICP备10002728号  统计: