活用表格美化网页(4)

作者：星河来源：yesky 整理日期：2007-03-18

　　4、圆角表格的制作

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

　第一种制作方法：

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

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

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

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

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

代码如下：
＜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]