第一种方法：
<table style="table-layout: fixed" height=28 cellspacing=0 cellpadding=0 width="100%" border=0>
<tbody>
<tr height=3 width="100%">
<td> <table style="table-layout: fixed" height=3 cellspacing=0 cellpadding=0 width="100%" border=0>
<tbody>
<tr height=1>
<td width=1></td>
<td width=1></td>
<td width=1></td>
<td bgcolor=#908a47></td>
<td width=1></td>
<td width=1></td>
<td width=1></td>
</tr>
<tr height=1>
<td></td>
<td bgcolor=#908a47 colspan=2></td>
<td bgcolor=#f7f8f9></td>
<td bgcolor=#908a47 colspan=2></td>
<td></td>
</tr>
<tr height=1>
<td></td>
<td bgcolor=#908a47></td>
<td bgcolor=#f7f8f9 colspan=3></td>
<td bgcolor=#908a47></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td> <table style="table-layout: fixed" height="100%" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width=1 bgcolor=#908a47></td>
<td id=oinner bgcolor=#f7f8f9> </td>
<td width=1 bgcolor=#908a47></td>
</tr>
</tbody>
</table></td>
</tr>
<tr height=3 width="100%">
<td> <table style="table-layout: fixed" height=3 cellspacing=0 cellpadding=0 width="100%" border=0>
<tbody>
<tr height=1>
<td width=1></td>
<td width=1 bgcolor=#908a47></td>
<td width=1 bgcolor=#f7f8f9></td>
<td bgcolor=#f7f8f9></td>
<td width=1 bgcolor=#f7f8f9></td>
<td width=1 bgcolor=#908a47></td>
<td width=1></td>
</tr>
<tr height=1>
<td></td>
<td bgcolor=#908a47 colspan=2></td>
<td bgcolor=#f7f8f9></td>
<td bgcolor=#908a47 colspan=2></td>
<td></td>
</tr>
<tr height=1>
<td colspan=3></td>
<td bgcolor=#908a47></td>
<td colspan=3></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
第二种方法：用图片
此法是最常用的，或用一大张图片做整个表格的背景（不建议），或用几张小图片做单元格的背景（建议）。用大图片会影响网页的打开速度，用小图片则需要对表格代码比较精通，另外，可以用DW来轻松制作带有图片的圆角表格。
用图片制作圆角表格的方法比较容易实现，在此不作具体介绍。
第三种方法：用VML
步骤一：更改<html>标签为<html xmlns:v>；
步骤二：在<head>和</head>之间插入如下代码：
<style>
v\:*{behavior:url(#default#VML)}
</style>
步骤三：在需要圆角表格的地方使用如下代码样式：
<p>
<v:RoundRect style="position:relative;width:600;height:160px" arcsize=0.1>
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">表格的内容在这里输入——黑马在线动力
</v:TextBox>
</v:RoundRect>
</p>
说明:
arcsize=0.1 圆角幅度,可以改成例如 0.18、0.2、0.25 这样的值，最大为 0.5。
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>是阴影設定，color为阴影的颜色。
offset为阴影显示位置，前者为橫轴(X)，后者为竖轴 (Y)。
以上方法，有些非IE的浏览器不支持，少用为妙。
圆角表格的制作方法
来源：http://www.51one.net
作者：未知
时间：2006-11-30
点击：
0
最新评论共有 0 位网友发表了评论
查看所有评论
发表评论
热点关注
