青岛设计网标志 搜艺招聘
   Guest:  登陆 | 注册 | 网站首页 | 论坛首页 | 我的贴子 | 修改资料 | 留言板 | | 论坛帮助  | 论坛首页  

  论坛首页   WEB网页设计  非CSS3纯HTML实现圆角表格方法

[公告]快到[搜艺招聘网]发布招聘信息 注册简历、发布自己作品! :)  
非CSS3纯HTML实现圆角表格方法  
    yoguz

查看yoguz的博客


金钱: 18255
Level: 0
发帖数: 1564
最后登陆: 2019/10/24
注册时间: 2004/12/13


[鍜界値鍚冧粈涔堣嵂]姣忓ぉ娉2琚嬶紝鍧氭寔30澶╋紝鍜界値濂藉鍒
信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除

我以前写过一篇文章,介绍了在PS里制作圆角表格的技巧,其实就是做了一个图片
听说CSS3里将要增加圆角表格的属性,不过在CSS3发布之前,还有一个简单的办法,就是使用下面的方法。我已经用在很多地方,自我感觉不错,拿出来大家见笑..

→示例文件,点击运行按钮,查看效果:
运行代码框

<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#908a47></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#908a47></TD>
<TD id=oINNER bgColor=#f7f8f9>  </TD>
<TD width=1 bgColor=#908a47></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>



注意:此方法实现的圆角表格,在IE 5.0以上版本测试正常,其他浏览器不一定适用,这里提供此方法仅供大家学习借鉴,并不是推荐使用此方法。


排卵期计算器 橙创意



2008/4/30 12:24:54
信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除 Edited by : yoguz, 2008/4/30 12:25:24


青岛设计网版权所有
本论坛言论纯属发表者个人意见