热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->html 
站内搜索:
活用表格美化网页(4)
作者:星河 来源:yesky 整理日期:2007-3-18

  4、圆角表格的制作

  做网页常常使用一些技巧,比如在表格的四周加上圆角,这样可以避直接使用表格的直角,而显得过于呆板,很多网友都提到过解决的办法,们选取最有代表性两种方法来再现圆角表格的制作过程。

  第一种制作方法:




1. 做两个圆角的图片,这两个图片可以先做一个图片,然后用相关软件垂直翻转一下就行了。



 


2. 在两个图片中间插入一个背景颜色同图片一样的表格,长度也设为图片的长度,将这个表格的cellpad设为1,其他都为0。



 


3. 将表格的单元格背景色设置为白色(从2、3两步可以看出这里其实是制作了一个细线边框的表格)




经过这样的处理后表格是不是漂亮多了呢!

4. 最后们就可以在表格里面填写内容了,们可以把这个部分当然一个整体,复制并粘贴到页面上不同的地方,当然你也可以改变整个圆角表格的尺寸,要做的就是改变圆角图片和插入表格的尺寸了。

代码如下:
<img height=15 src="411-w01.gif" width=125<br>
<table width="124" cellspacing="1" cellpadding="0" bgcolor="#0000FF"
<tr>
<td bgcolor="#FFFFFF">经过这样的处理后表格是不是漂亮多了呢!</td>
</tr>
</table>
<img height=13 src="411-w02.gif" width=125


  说明:其实就是两个圆角图片与一个细线表格(上面第二个技巧所讲到的细线表格)组合在一起。

  练习:试制作如下效果的表格(提示:在上面的表格里在插入一个表格,利用插入的表格来控制排版)

 
这个表格里文字内容的排版与上面的不同


  圆角表格的第二种制作方法:
[1]  [2]  [3]  [4]  [5]  [6]  
相关文章