精美边框代码简析

内容处

代码：

<table style="border-style: ridge; border-color: rgb(187, 85, 0);" border="4" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<table style="border-style: groove; border-color: rgb(187, 85, 0);" border="4" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<table style="border-style: ridge ridge inset; border-color: rgb(102, 34, 0);" border="12" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<table style="border-style: groove; border-color: rgb(187, 85, 0);" border="4" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="14" cellPadding="8" background="http://image25.360doc.com/DownloadImg/2011/03/2712/10388894_23.jpg"

 bgColor="#a5b7dd" align="center">
<tbody>
<tr>
<td>
<table style="border-style: inset; border-color: rgb(187, 85, 0);" border="6" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<table border="1" cellSpacing="2" cellPadding="2" bgColor="#000000" align="center">
<tbody>
<tr>
<td>
<table style="width: 700px; height: 300px; border-bottom-width: 1px; border-bottom-style: solid;" border="1" cellSpacing="0" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<div align="center"><font style="font-size: 29px;" color="#00ffff"><strong>内容处</strong></font></div>

</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

代码简析：

这是一个精美的八层边框，除第八层设置表格的宽度外，其余的七层都没有设置表格的宽度。

一、1—4层表格：

1—4层表格标签中都设置了边框线样式、边框线颜色、边框线宽度、居中对齐方式。

1—4层表格的边框线应用3D脊状ridge与3D槽状groove的样式间隔使用，使边框具有立体感。边框线颜色为橙色，是柔和的暖色调。设置居中对齐方式，其目的是使下一层表格在上一层表格的中部显示（既不偏左，又不偏右）。

二、第五层表格，设置了背景图片、表格的间距cellSpacing与边距cellPadding。(第六七层表格分析略)

三、第八层表格，设置了边框线样式为实心线solid，边框线宽度为1px，表格的宽度为700px，表格的高度为300px。第八层表格的单元格内，设置了块区标签<div>和文字标签<font>，以便放入文字等内容。

四、表格的显示实况：在打开文章的页面中，观看表格的显示实况。每层表格可看到的部分是边框线、间距与边距的综合宽度之和。

从外向内观察，可看到：

第一层：边框线4px ；第二层：边框线4px ；第三层：边框线12px ；第四层：边框线4px ；第五层：间距14px ，边距8px；第六层：边框线6px ，第七层：间距2px ，边距2px；第八层：边框线1px 。表格的中间部分是宽度为700px高度为300px的黑色方框，这里的黑颜色，是第七层表格的背景颜色，第八层表格是透明的，没有设置背景颜色和背景图片。

 “春天没来”编撰

2013年8月日12于北京