征集网
┊
锐志网络
┊
淘途
┊
找素材上91
┊
平面设计
交互设计
CG动漫
工业设计
建筑环境
数码影像
创意搜
首页
大赛征集
资讯
教程
画廊
访谈
作品集
创企同盟
设计招聘
人才专区
竞赛台
专题
论吧
找素材
看酷站
设计网址库
Photoshop
CorelDraw
FreeHand
Illustrator
PageMaker
Dreamweaver
Flash
FireWorks
HTML/CSS
脚本特效
网站重构
程序相关
Painter
摄影技巧
3DMAX
Maya
当前位置：
首页
>
教程
> Dreamweaver > 正文
表格边框魔鬼教程
作者:Poorfish 来源:蓝色理想 发表时间:2007-9-14 9:48:42 浏览：
表格边框
普
表
通
格
这是一普通的表格
<table border="1" width="200" cellpadding="0" cellspacing="0"> <tr align="center"> <td>普</td> <td>表</td> </tr> <tr align="center"> <td>通</td> <td>格</td> </tr> </table>
细
表
线
格
表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)
<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" > <tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">细</td> <td bgcolor="#FFFFFF">表</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td> <td bgcolor="#FFFFFF">格</td> </tr> </table>
细
表
线
格
这和上面那个可不一样，它用的是CSS，效果却一样。
(对单元格border的定义)
<table width="200" cellspacing="0" cellpadding="0"> <tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">细</td> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td> </tr> <tr align="center"> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">线</td> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td> </tr> </table>
细
表
线
格
再进一步，把边框变成虚线，同样是CSS的神奇作用。
<table width="200" cellspacing="0" cellpadding="0"> <tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td> </tr> <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td> <td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td> </tr> </table>
细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。
<table width="200" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table> </td> </tr> </table>
立
表
体
格
立体感的表格
(简单的亮暗边框设置，注意只有IE支持这种效果)
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"> <tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td> </tr> <tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td> </tr> </table>
在线编辑：
angel
本文链接：
http://www.52design.com/html/200709/design200791494842.shtml
推荐阅读：
·
2021第十五届“创意中国”设计大奖 征稿章程
·
2021第七届“学院派奖”全国艺术与设计大赛征集公告
·
青春唯美插画培训网络远程班正在招生
·
第八届中国高等院校设计作品大赛启动
·
第十二届中国高校美术作品学年展获奖名单公布
·
2021第七届“学院派奖”全国艺术与设计大赛征集公告
·
第六届“包豪斯奖”国际设计大赛获奖名单揭晓
免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息。对本文有异议，请联络本站！
转载要求：文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址，且不准打上各自站点的水印！
近期推荐报道
返回首页更多精彩等着你！
Photoshop|
Photoshop快速调出情侣图片柔美的
插画艺术|
绝望的小熊—美国插画师Luke
网页设计|
波兰Tiquet网站设计作品欣赏
插画艺术|
Nanami Cowdroy灵动黑白插画
Photoshop|
Photoshop调出美女图片绚丽的橙红
HTML/CSS|
实现DIV透明而里面的文字不透明
平面设计|
世界杯之平面广告欣赏
插画艺术|
Alberto Cerrite&ntil
平面设计|
Havaianas人字拖最新平面广告系列
网页设计|
英国madefavourite简洁细腻型
·
青春唯美插画培训网络远程班正在招生
·
原创作品集:让创意在多飞一会!
·
PNG素材专题/素材资源库推荐专题
·
每日更新设计人才招聘信息（企业免费发布）！
对联大全
歇后语大全
谚语大全
广告语大全
创意焦点
大赛征集
|
产业资讯
·
新华教育集团2010第二届网上就业招聘会隆重开幕
·
安徽新华电脑学校疯狂英语训练营火爆开营
·
谷歌将用7亿美元收购旅游软件公司ITA
·
广东举行首届高校工业设计大赛
·
第十八届上海国际印刷包装纸业展览会
·
为你的网站创建一个明晰的“关于”页面
创意欣赏
新锐
|
海报
|
摄影
|
插画
Bram Lee C
巴基斯坦Aadi-f
Wesley Egg
Tea Time画册
国外创意logo欣赏
绝望的小熊—美国插画
原创作品集
平面
|
插画
|
网页
|
包装
教程更新
|
高清
|
PNG
·
利用蒙版及图章工具制作打散的数字化人物
·
利用滤镜及图层样式制作逼真的牛仔布纹字
·
Photoshop快速调出情侣图片柔美的淡蓝色
·
Photoshop调出美女图片绚丽的橙红色
·
PS制作非常可爱的文字动画
·
实现DIV透明而里面的文字不透明
关于本站
|
联系方式
|
商业服务
|
合作伙伴
|
站点地图
|
免责声明
|
版权声明
|
在线投稿
版权所有 2001-2010 创意在线（原我爱设计网）[52design.com™]
Copyright www.52design.com All rights reserved.
电子公告服务(BBS)审批[2007]字第247号 /
皖ICP备05001609号
网站统计
网站统计
征集网┊锐志网络┊淘途┊找素材上91┊
交互设计CG动漫工业设计建筑环境数码影像创意搜
大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧
看酷站设计网址库
当前位置：
在线编辑：angel
本文链接：
