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表示居中对齐，套用即可，无需深究