html的table边框技巧 - html表格table 边框样式美化

html的table边框技巧 - html表格table 边框样式美化

ID:16240559

大小:28.87 KB

页数:6页

时间:2018-08-08

html的table边框技巧 - html表格table 边框样式美化_第1页
html的table边框技巧 - html表格table 边框样式美化_第2页
html的table边框技巧 - html表格table 边框样式美化_第3页
html的table边框技巧 - html表格table 边框样式美化_第4页
html的table边框技巧 - html表格table 边框样式美化_第5页
资源描述:

《html的table边框技巧 - html表格table 边框样式美化》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、运用CSS语法美化表格Table  注:除非特殊声明,本文所举各例插入的表格的cellspacing、cellpadding、border值均为0。  例一:1px表格             很多人热衷于制作1px表格,于是发明了各式各样的方法,用css做起来可就灵活的多。如果要制作一个1x1的1px表格只要简单定义一下边框值就可以了。我们首先用Dreamweaver插入一个1x1表格,宽度为50,然后在该表格table或者td中定义border:1solidteal,所做的表格的效果如下:   但是要制作一个非1x1的表格(如2x2)就稍微麻烦些,因为如果直接定义td样式b

2、order:1solidteal,则显示的效果如下:      你会发现表格外框为1px,而里面则变成了2px了,这是由于叠加的原因。为了解决这么问题我们可以这样做:  首先为td定义样式:border:#cc0000solid;border-width:0110,这样表格表现为:      然后再为table定义样式:border:#cc0000solid;border-width:1001,这样就可做作成一个完整的1px表格了。      例二:粗边框的1px表格           此表格的内格线为1px而外边框为3px,有了例一的基础做起来就不难了,只要修改border

3、-width值就行了。  对table所使用的样式的代码是:border:bluesolid;border-width:3223  对td所使用的样式的代码是:border:bluesolid;border-width:0110  例三:虚线框表格           做法和例一类似,border-style从solid改为dashed。  对table所使用的样式的代码是:border:blackdashed;border-width:1001  对td所使用的样式的代码是:border:blackdashed;border-width:0110  例四:点线边框表格    

4、       注意点线(dotted)的最小象素为2。  对table所使用的样式的代码是:border:greendotted;border-width:2002  对td所使用的样式的代码是:border:greendotted;border-width:0220  例五:双线边框表格           注意双线(double)的最小象素为3。  对table所使用的样式的代码是:border:teal4double  对td所使用的样式的代码是:border:teal1solid  例六:outset外框表格           对table所使用的样式的代码是:bor

5、der:3outset  对td所使用的样式的代码是:border:1solid  例七:inset外框表格           对table所使用的样式的代码是:border:3inset  对td所使用的样式的代码是:border:1solid  例八:ridge外框表格             对table所使用的样式的代码是:border:#ee00003ridge  对td所使用的样式的代码是:border:1solid例九:综合使用一             这个表格的外框采用的是脊线,内单元格边框是槽线,注意表格插入时cellspacing设为1了。  对tabl

6、e所使用的样式的代码是:border:skyblue4ridge  对td所使用的样式的代码是:border:navy1groove  例十:综合使用二             别以为这是九个表格,其实他们是一个表格中的九个单元格,由于表格外边框为0,所以你看不到罢了。  只需对td使用样式:border:maroon3double,另外别忘了把表格的cellspacing设为1哦。  例十一:综合使用三             此表格的上下左右边框采用了不同的样式,你可以根据喜好自行更改。对table所使用的样式的代码是:border:purple4;border-style

7、:dasheddouble对td所使用的样式的代码是:border:1solid  例十二:综合使用四             这是一个双线边框的1px表格,和例五比较起来要显得精巧,具体做法是这样的:  1.先做一个1x1的1px表格,并将cellspacing设为1;  2.再做一个3x3的1px表格,将width和height均设为100%;  3.将后做的表格插入先前做的表格中即可。  例十三:背景边框一:             利用改变cellspacing的值可以把背景做成边框

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。