在线用户
站点地图
技术论坛
文档中心
站点导航
资源下载
语言参考
教程专题
站点统计
业务项目
使用帮助
MSDN参考新加了CSS2参考,全中文,制作精良。245k下载。
新加了
sxf_sxf
推荐的
"动态网页专家指导"
下载!
新加了
lsg2002lsg
推荐的
"ASP.NET高级编程(PDF)"
下载!
新加了
DHTML代码预览!!
,功能强大哦!欢迎试用
新加了网友lincong为大家提供的
SQL Server 2000 程序员指南
,有点大,但同时也就说明内容全咯!
新加了网友ibra为大家提供的
北大的JAVA课件
,很适合初学者入门
新加了一个java的
连接缓冲池
代码示例
新加了
人月神话电子版下载!
软件工程巨著哦~~
更新了评分标准,引入了“专家分”概念,相信可以更好的激励大家的学习!详情请看
“使用帮助”
新加了由网友
GGG
提供的
“IIS超级管理手册”
,值得一看哦!(虽然我没看过 :P )
新加了
“英雄榜”
,欢迎测试!
“无组件上传·从原理剖析到实践”已经全部完成,
源码全部开放
,有兴趣的朋友请到文档中心一探究竟。
您的位置
首页
>
文档中心
>
DHTML
>
文档A0000779
LOGIN HERE
用户:
密码:
忘记密码
记住密码
用户注册
游客进入
相关文章
CSS实例:横线样式的输入框
表格TABLE的一些属性和方法的运用
在TEXTAREA中显示表格以及图像
asp中将table表中的数据成功导成excel做法
表格边框样式的应用技巧
作者:
jiecy3233
提交人:
jiecy3233
发布时间:
04-06-04
文章类型:
原创
浏览量:
4047
参考链结:
http://
关键字:
table|边框|样式
[本文档没有附件]
字体:
大
中
小
视力保护色:
[A0000779]
点下面的 运行代码 查看:-)<br>
<body> <style type="text/css"> <!-- .ls { font-family: "宋体"; font-size: 14px; color: #444444; } --> </style> <div class="ls"> 我们在显示数据库记录时,也许有时需要用一个表格把数据库中的记录列出来,当记录到了尾部,而表格的一行还未列完时,显示的表格线很不整齐,就象下面这样:<br> <table border="1" cellspacing=0 cellpadding=0> <tr><td>3233</td><td>3233</td></tr> <tr><td>3233</td><td></td></tr> </table> 这种情况其实用一个表格的样式就很好解决: <b>Border-Collapse</b>,使用这种样式可以很容易地画出一个细线表格,这个样式有两个可能的值:<b>collapse</b>和<b>separate</b>,意思是表格单元之间合并和分离。当使用<b>collapse</b>时,表格单元的边框和表格外框就合在一起了,看起来是一个很漂亮的细线表格:<br> <p> <table border=1 style="border-collapse:collapse"> <br> <table border="1" style="border-collapse:collapse"> <tr><td>3233</td><td>3233</td> <tr><td>3233</td><td></td></tr> </table> 而当设置<b>Border-Collapse</b>的值是<b> separate</b> 时,表格单元和边框就分开了。<br> <font color="red"> 我在找第一个表格边框的解决方法时,发现border的属性实在很多,简单地归纳一下供大家参考,高手的就不要见笑了:-)</font><br> <b>Border:</b> 默认设置是边框的宽度,如border=3,但也有几个内定值可以代替:<b>thin medium thick</b><br> <b>border</b>下面有几个属性:<b>width color style collapse</b>,一个一个来总结一下:<br> <b>width:</b>下面细分为几个属性<b>Border-Top-Width Border-Right-Width Border-Botton-Width Border-Left-Width</b>,它们可以用 Border-Width按 上 右 下 左 的顺序组合成一组简写,中间用空格隔开,如: <br> <table border="1" style="border-width:1 2 5 7">(你可以试着减去一两个数字试试看看有什么效果)<br> <table border="3" style="border-width:1 2 5 7"> <tr><td>3233</td><td>3233</td></tr> <tr><td>3233</td><td>3233</td></tr> </table> <b>color:</b>下面细分为几个属性:<b>Border-Top-Color Border-Right-Color Border-Bottom-Color Border-Left-Color</b>,同width一样,它可以用<b> Border-Color</b>来简写,如: <table border="1" style="border-color:red green blue gold">(当然也可应用于单个单元格)<br> <table border="2" style="border-color:red lightgreen blue gold"> <tr><td>3233</td><td>3233</td></tr> <tr><td>3233</td><td>3233</td></tr> </table> 另外:<b>BorderColorLight BorderColorDark</b> (注意Color和上面一组的位置不同)可以设置边框的明线和暗线颜色,表现出立体感:<br> <table border=3 bordercolorlight=#ffff99 bordercolordark=#ff9900> <br> <table border="3" bordercolorlight="#ffff99" bordercolordark="#ff9900"> <tr> <td>3233</td> </tr> </table> 这里有一个很经典的例子,当设置明暗线和背景色相同的时候,表格就会表现出一种类似按钮的效果:<br> <table border=1 bordercolorlight=white bordercolordark=white> <TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 borderColorLight=#ffffff border=1> <TBODY> <TR align=middle> <TD borderColorLight=#000000 bgColor=gainsboro borderColorDark=#eeeeee> 3233 </TD> <TD borderColorLight=#000000 bgColor=gainsboro borderColorDark=#eeeeee> 3233 </TD></TR></TBODY></TABLE> <b>BorderStyle</b>,有 <b>BorderTopStyle BorderRightStyle BorderBottomStyle BorderLeftStyle</b>,同样可以简写为 <b>Border-Style:</b> <br> <table border="3" style="border-style:dotted"> <tr> <td>3233</td> </tr> </table> style的值有<b>none dotted dashed solid double groove ridge inset window-inset outset</b>,具体什么自己试啦。<br> Collapse:上面一开始就说了。<br> * 如果有什么不对的地方,请多指教。 </div> </body>
运行代码
拷贝代码
保存代码
[可先修改部分代码再运行;请先检查代码确定安全]
关于这篇文章的评论
[注意:这里仅仅是给大家提供了一个发表对文章本身看法的地方,如果有疑问,请到论坛提出]
我要提问!
标题
内容
*您尚未以注册用户身份登录,不能发表评论。
这里登录
(c)2000-2022 Yup Studio, all rights reserved.