边框制作方法及代码01

边框制作采用的是表格代码，通过表格属性代码和颜色代码的运用来实现。

 1、一层边框

 代码： <TABLE borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#FFCCCC border=10>
<TBODY><TR><TD ><BR><BR>
</TD></TR></TBODY></TABLE>

其中：     borderColor="边框颜色"    cellSpacing="单元格之间的距离"     cellPadding="内容与边框之

                间的距离"     width="表格宽度"     align="水平对齐"    bgColor=#"背景颜色"     border="边框宽度"

 

效果： （图01）

 

  表格的大小是设在表格标签的上方。表格实际显示的大小：如所设表格的大小大于表中的实际内    容，表格按所设的大小显示；如所设表格的大小小于表中的实际内容，表格按实际内容大小显示。表宽470＝（外框线10＋单元格间距2＋内框线1＋内容与边框的间距8）×2 ＋内容宽表高＝（外框线10＋单元格间距2＋内框线1＋内容与边框的间距8）×2 ＋2个空行高   2、一层边框加图片 方法一：图的地址加在表格标签的上方 方法一代码：  <table borderColor=#666699 height=350 cellSpacing=2 cellPadding=2 width=470 align=center background=http://f./0846/1483936077219125593.gif border=10><tr><td></td></tr></table> 其中：  background="背景图片地址"    height="高度"     图片原大小：500×400 方法一效果： （图02）   用图片做背景，要用图片背景代码，图片地址是放在表格标签的上方。图片显示的大小，是按表格实际显示的大小显示的。图片显示的方式，是按图片背景代码的性质显示的：当图片原大小大于表格实际显示的大小时，图片只能显示左上方的一部分；当图片小于表格实际显示的大小时，图片在表格实际显示的范围内重复显示。 用图片做背景，当图片大于内框线的范围时，内框线不能显示。   方法二：图的地址加在列标签的中间 方法二代码：   <TABLE borderColor=#666699 height=270 cellSpacing=2 cellPadding=2 width=470 align=center bgColor=#ffcccc border=10><TR><TD>
 <IMG  height=240  src="http://f./0561/744.gif" width=440></TD></TR></TABLE> 方法二效果：  （图03）  图片的地址是放在图片标签内的，当图片标签放在列标签的中间时，图片则能完整的显示。图片显示的大小：是按在图片标签内设置的宽高来显示的，这点很重要，它可使图片变形。如在图片标签内不设图片的宽高，图片按图片原大小显示，与表格大小设置无关。  

3、二层边框

 

代码：   <table borderColor=#666699  cellSpacing=2 cellPadding=8 width=470

align=center bgColor=#ffcccc border=10><tr><td>
        <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465  align=center

 bgColor=#d9ffff border=3><tr><td><BR><BR><BR></td></tr></table></td></tr></table>

 

应用表格代码制作多层边框，内一层边框表格标签是套在外一层表格列标签中。由于内一层是外一层的

实际内容，因此，不论外一层如何设置，内一层都会完整地显示出来。当内一层设置的大小大于外一层

内框线的范围时，外一层的外框线则向外扩展，同时外一层的内框线不显示；当内一层设置的大小小于

外一层内框线的范围时，则各显示各的，相互不干涉，包括外一层的内框线。

 

内框线的范围：

内框线宽=表格宽－（边框宽度＋单元格之间的距离）×2

内框线高=表格高－（边框宽度＋单元格之间的距离）×2

本例内框线的宽：446       高：96

 

 

边框编辑后的生效效果，除了最

内一层是显示双边框（即外框和内框细线），其余仅显示外框，因此，多套一层边框。仅增加一条线框。同时，

还要注意的是：编辑同样一个边框代码，在日志中、在HTML在线编辑器进行编辑，以及在编辑时、预览时、生

效时，所显示的效果有时可能不一样，了解掌握不同的情况，有利于达到自己所想要的效果。

 

在HTML在线编辑器或日志中编辑时的效果 （图04）

 

  

在HTML在线编辑器中预览时，则完全显示代码效果 （图05）

 

 

在日志中预览与在日志中发表生效后的效果一样 （图06）

去掉外一层边框的内容与边框之间的距离的效果与图06一样 （图07）

  4、二层边框加图片

代码：   <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#ffcccc border=10>
    <tr><td>
        <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465 align=center bgColor=#ffffff border=3><tr>
            <td background=http://image86.360doc.com/DownloadImg/2015/06/2111/55208313_5.jpg height=300></td></tr></table></td></tr></table>

 效果：

5代码：<TABLE borderColor=#2f4f4f cellSpacing=8 cellPadding=2 align=center bgColor=#408080 border=15>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD width=470 background=http://image86.360doc.com/DownloadImg/2015/06/2111/55208313_6.jpg height=350></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
 

5效果：

代码：  <table borderColor=#2f4f4f cellSpacing=8 cellPadding=5 align=center bgColor=#408080 border=16>
    <tr><td><table border=1><tr>
            <td width=450 background=http://image86.360doc.com/DownloadImg/2015/06/2111/55208313_7.jpg height=300 border="3"></td></tr></table></td></tr></table>

其中：  background="背景图片的地址"    height="高度"  

效果：