制作精美圆角表格两种方法
制作精美圆角表格两种方法
| 点击次数 163 | 添加日期 2006-8-10 16:59:04 |
| 回复次数 0 | 最后更新 2006-8-10 17:01:30 |
| 所属分类 HTML/CSS | 转自【TOM】  编辑  删除 |
| 【增大字体】 【缩小字体】 【系统默认字体】 |
做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。
方法一：用图片制作圆角表格
这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。
①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分(如图1)，复制它。
②不要取消选取，直接新建一副图像，Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后，保存为WEB所用格式即可。
③重复步骤②，分别用“水平翻转”工具和“垂直翻转”工具，保存另外三个方向的圆角。(如图2)
④打开网页制作软件，这里以Dreamweaver为例。插入一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif，第三列插入图片3.gif，并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格)。依葫芦画瓢，做好下半部分的圆角。
⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” ”。到这，一个圆角表格就做好了，您可以在第二列中添加您想要的内容。(如图3)
方法二：利用VML技术
用VML技术可以更容易地制作一个圆角表格，而且还有投影哦！
①修改＜html＞表识为＜html xmlns:v＞
②在＜head＞区域添加如下代码：
＜style＞〈br>v\:* {behavior: url(#default#VML);}〈br〉＜/style＞
③在您要添加圆角表格的地方加入以下代码：＜v:RoundRect style="position:relative;width:200;height:100px"＞
＜v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/＞
＜v:textbox style="font-size:12px"＞
这里输入表格中的内容
＜/v:textbox＞
＜/v:RoundRect＞
您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。
这样，一个有投影的圆角表格就制作好了(如图4)。
这种添加圆角表格的方法虽然很方便，但是它不能很好的适应每个浏览器版本，且在设计时是以层的方式现实，不利于版面设计，所以尽量使用第一种方法。
方法一：用图片制作圆角表格
这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。
①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分(如图1)，复制它。
②不要取消选取，直接新建一副图像，Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后，保存为WEB所用格式即可。
③重复步骤②，分别用“水平翻转”工具和“垂直翻转”工具，保存另外三个方向的圆角。(如图2)
④打开网页制作软件，这里以Dreamweaver为例。插入一个一行三列的表格，设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif，第三列插入图片3.gif，并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格)。依葫芦画瓢，做好下半部分的圆角。
⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” ”。到这，一个圆角表格就做好了，您可以在第二列中添加您想要的内容。(如图3)
方法二：利用VML技术
用VML技术可以更容易地制作一个圆角表格，而且还有投影哦！
①修改＜html＞表识为＜html xmlns:v＞
②在＜head＞区域添加如下代码：
＜style＞〈br>v\:* {behavior: url(#default#VML);}〈br〉＜/style＞
③在您要添加圆角表格的地方加入以下代码：＜v:RoundRect style="position:relative;width:200;height:100px"＞
＜v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/＞
＜v:textbox style="font-size:12px"＞
这里输入表格中的内容
＜/v:textbox＞
＜/v:RoundRect＞
您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。
这样，一个有投影的圆角表格就制作好了(如图4)。
这种添加圆角表格的方法虽然很方便，但是它不能很好的适应每个浏览器版本，且在设计时是以层的方式现实，不利于版面设计，所以尽量使用第一种方法。
