登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

磁电人空间

我们生活在地球磁的空间

 
 
 

日志

 
 

制作圆角表格  

2009-08-21 01:36:15|  分类: 【博客特技】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果:
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!

原代码:

<DIV align=center>

<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%">

<TBODY>

<TR height=1>

<TD width=1></TD><TD width=1></TD><TD width=1></TD>

<TD bgColor=边框颜色></TD>

<TD width=1></TD><TD width=1></TD><TD width=1></TD></TR>

<TR height=1>

<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>

<TD bgColor=背景色></TD>

<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>

<TR height=1>

<TD></TD><TD bgColor=边框颜色></TD>

<TD bgColor=背景色 colSpan=3></TD>

<TD bgColor=边框颜色></TD><TD></TD></TR>

<TR>

<TD width=1 bgColor=边框颜色></TD>

<TD bgColor=背景色 colSpan=5>

<TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=3>

<TBODY>

<TR>

<TD align=center>你要写的文字、图片、或表格</TD>

</TR></TBODY></TABLE>

</TD>

<TD width=1 bgColor=边框颜色></TD></TR>

<TR height=1>

<TD></TD><TD bgColor=边框颜色></TD>

<TD bgColor=背景色 colSpan=3></TD>

<TD bgColor=边框颜色></TD><TD></TD></TR>

<TR height=1>

<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>

<TD bgColor=背景色></TD>

<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>

<TR height=1>

<TD colSpan=3></TD>

<TD bgColor=边框颜色></TD>

<TD colSpan=3></TD></TR>

</TBODY></TABLE></DIV>

上图代码: <table style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%">
    <tr height=1>
      <td width=1></td>
      <td width=1></td>
      <td width=1></td>
      <td bgColor=#999999></td>
      <td width=1></td>
      <td width=1></td>
      <td width=1></td>
    </tr>
    <tr height=1>
      <td></td>
      <td bgColor=#999999 colSpan=2></td>
      <td bgColor=#ccff99></td>
      <td bgColor=#999999 colSpan=2></td>
      <td></td>
    </tr>
    <tr height=1>
      <td></td>
      <td bgColor=#999999></td>
      <td bgColor=#ccff99 colSpan=3></td>
      <td bgColor=#999999></td>
      <td></td>
    </tr>
    <tr>
      <td bgColor=#999999></td>
      <td bgColor=#ccff99 colSpan=5>
        <table style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=3>
          <tr>
            <td align=middle><FONT color=#0000ff>用&lt;TABLE&gt;语句来实现圆角表格可以省去制作圆角图片之苦! </FONT></td>
          </tr>
        </table>
      </td>
      <td bgColor=#999999></td>
    </tr>
    <tr height=1>
      <td></td>
      <td bgColor=#999999></td>
      <td bgColor=#ccff99 colSpan=3></td>
      <td bgColor=#999999></td>
      <td></td>
    </tr>
    <tr height=1>
      <td></td>
      <td bgColor=#999999 colSpan=2></td>
    </tr>
  </table>

虽然代码看起来很长,其实原理很简单,昨天我把原代码精简了一下,将嵌套的表格从四个减少到两个,应该更好理解了吧。需要指出一点,“cellPadding=3”是避免表格内文字过于贴近表格边框而特意添加的!

制作这个圆角表格的主要目的有两个:一是可以用来作为带背景色的日志模板,二是可以制作自己日志标题档或者签名档,用处还是很大的。用<Table>语句制作圆角表格,和网上其他常见方法相比,不仅省去了制作、使用圆角图片的麻烦,而且此圆角表格具有“自适应性”——因为语句中使用的是相对宽度(width=100%),所以此表格会随着发布日志栏的宽度变化而自我调节,这比一般图片做出来的圆角表格更具灵活性!

制作圆角表格 - 背影子 - 背影子的博客制作圆角表格 - 背影子 - 背影子的博客  制作圆角表格 - 背影子 - 背影子的博客    制作圆角表格 - 背影子 - 背影子的博客

  评论这张
 
阅读(760)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018