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. | 制作一个一行三列的表格。表格的cellpadding、cellspacing均设置为零。（此处为了便于说明，暂时将border设置为"1"） | ||||
|
3. | 将第一步的两个小图片分别插入第一、第三单元格 | ||||
|
4. | 设置第一个单元格的align=left、valign=top，使图片在单元格的左上方，第三个单元格的align=right 、valign=top，使图片在单元格的右上方。并调整单元格的大小 | ||||
|
5. | 将单元格的背景色（注意是单元格）设置为插入的图片颜色相同。 | ||||
|
6. | 将表格的border设置为"0",然后在下面再插入一个同样边框颜色的细线表格（此步骤省略，如果不会，可参照上面的细线表格技巧）,现在就可以在细线表格里写入内容了。 |
代码如下：
＜table width="150" cellpadding="0" cellspacing="0" border="0"＞
＜tr bgcolor="#7090ff"＞
＜td valign="top" align="left" width="10"＞＜img src="411-w03.gif" width="7" height="7"＞＜/td＞
＜td width="127" bgcolor="#7090ff"＞ ＜/td＞
＜td align="right" valign="top" width="10"＞＜img src="411-w04.gif" width="7" height="7"＞＜/td＞
＜/tr＞
＜/table＞
＜table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"＞
＜tr＞
＜td bgcolor="#FFFFFF"＞这种表格是不是很眼熟啊？的确，我们可以在很多的大网站找到它的身影。＜/td＞
＜/tr＞
＜/table＞
说明：它由两个单独的表格组成，其中第一个表格是出现圆角的关键！
·快速精通FRAME（上）
·表格使用的常见问题及解决方法
·活用表格美化网页
·网页表格制作进阶
·玩转表单之常用技巧（二）
·玩转表单之常用技巧（一）
·玩转表单之表单提交（二）
·玩转表单之表单提交（一）
·玩转表单之花样表单（四）
潇湘在线 版权所有 ICP证：湘ICP备05000248号