HTML多层边框代码结构分析

HTML边框效果是通过多层表格之间相互嵌套覆盖来完成的，每层表格用背景图片或颜色填充，上层表格的面积小于下层表格并覆盖下层表格，下层表格只显示未被覆盖的边缘，这样多层嵌套后，从而形成多重的边框效果。网页制作绝大多数排版是用表格完成的。以下代码是上面梅花贴的完整代码，分为五层，以颜色区分，以便观察其结构。

<TABLE cellSpacing=32 borderColorDark=#003300 cellPadding=0 width="550" align=centerborderColorLight=#996666 background=http://668.inwl.cn/BKTP/BK801.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=8 borderColorDark=#996600 cellPadding=0 width="100%" align=center borderColorLight=#DCDCDC background=BK802.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=3 borderColorDark=#003300 cellPadding=0 width="100%" align=center borderColorLight=#CC9966 background=BK801.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=4 borderColorDark=#996600 cellPadding=0 width="100%" align=center borderColorLight=#DCDCDC background=BK802.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=12 borderColorDark=#003300 cellPadding=0 width="100%" align=center borderColorLight=#003300 background=BK803.jpg border=1>
<TBODY>
<TR>
<TD>
<img src="BK804.jpg">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

标记及属性代码解析

代码	描述	说明
<TABLE>... </TABLE>	表格标记	套用即可，无需深究
<tr>...</tr>	行标记	套用即可，无需深究
<td>...</td>	单元格标记	套用即可，无需深究
border	表格边框属性	定义边框的宽度，单位：象素，一般取值为0，1，这个属性在边框代码贴中，非常重要，常和borderColorDark，borderColorLight配合使用，取值为1，可以增强边框的立体效果。
borderColorDark	表格左上边框（亮边）颜色	一般选择与背景层同色系偏浅色，颜色选择可以查看网页颜色代码表或HTML颜色代码表，将其颜色代码拷贝下来，对它赋值即可。
borderColorLight	表格右下边框（暗边）颜色	一般选择与背景层同色系偏深色，其余同上。
width	表格宽度属性	定义表格的宽度，可以是绝对宽度，用象素赋值，也可以是相对宽度，用百分比赋值，由于博客不支持全屏发贴，建议最外层采用绝对宽度，赋值《550象素。（注意一点，选择帖子图片时，图片宽度不能大于最内表格的宽度，否则就会将整个边框挤大，不能正常显示）
cellSpacing	单元格间距属性	观赏代码贴时，我们会发现每层边框的宽窄不一，显得非常生动，创幻论坛虽然增加了类似代码的边框效果，但是等宽的边框看上去还是显得死板，这里cellSpacing就可以控制边框的显示宽度，赋值为象素。
cellPadding	单元格边距属性	套用即可，无需深究
background	表格背景图片属性	可以使用JPEG或GIF文件，图片大小不限，在表格设定的尺寸内，背景图片排列平铺，各层图片素材的选择，依据个人的创意，相邻层的颜色最好有点对比反差，以增强视觉效果。
align	表格的水平对齐属性	align=center表示居中对齐，套用即可，无需深究