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>
说明:其实就是两个圆角图片与一个细线表格(上面第二个技巧所讲到的细线表格)组合在一起。
练习:试制作如下效果的表格(提示:在上面的表格里在插入一个表格,利用插入的表格来控制排版)
圆角表格的第二种制作方法:
|