☆浅谈边框的制作方法

浅谈边框的制作方法

要制作边框，先要认识一下表格标签。

表格标签是一套标签，由四个首标签与四个尾标签一个八个标签组成。

<table>是表格标签，<tbody>是表格的主体标签，<tr>是表格的行标签，是表格的行标签，<td>是表格的列标签。这四个标签都是首标签。首标签要写在前面，其中表格标签<table>中往往要添加许多属性与属值。（当然了，其它的三个首标签中也可以添加属性与属值。）

</table>是表格尾标签，</tbody>是表格的主体尾标签，</tr>是表格的行尾标签，</td>是表格的列尾标签。这四个标签都是尾标签。尾标签中都有一条斜杆。

这一套标签的应用顺序是：<table><tbody><tr><td></td></tr></tbody></table> 。

表格标签中，添加的属性一般有：border="5"（边框线宽度） cellSpacing="10"（表格的间距） cellPadding="0"（表格的边距） width="700"（表格的宽度） background=

http://image37.360doc.com/DownloadImg/2011/09/1515/17657035_131.jpg

（背景图片） bgColor="#00ff00" （背景颜色）height="200"（表格的高度）。

要制作几层边框，就要用几套表格标签。表格的四个首标签总是要放在前面，表格的四个尾标签总是要放在后面。

例如：要制作三层边框。前面就应该设置三套首标签，后面要设置三套尾标签。如果想再添加一层边框，就在三层边框的代码前面“添加”一套首标签，在三层边框的代码后面“添加”一套尾标签。如果想减少一层边框，就在三层边框的代码前面“删除”一套首标签，在三层边框的代码后面“删除”一套尾标签。

无论制作几层边框，都要在最里层的那个表格的“首标签与尾标签之间”添加段落标签（或者块区标签）与文字标签，以便放置内容。

下面是我设置的一层边框的代码：

<table border="5" cellSpacing="10" cellPadding="0" width="700"

background="http://image37.360doc.com/DownloadImg/2011/09/

1515/17657035_131.jpg" bgColor="#00ff00" height="200">

<tbody>

<tr>

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

如果要制作三层边框，则把上面的代码用三次。三套首标签放在前面，三套尾标签放在后面，最里层的那个表格的“首标签与尾标签之间”添加段落标签（或者块区标签）与文字标签，以便放置内容。其代码如下：

<tbody>

<tr>

<td>

<tbody>

<tr>

<tbody>

<tr>

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

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

这时候的效果如下。其效果还不好，需要进行修改。

内容处

修改其代码，可以替换背景图片，可以修改间距、边距、表格的宽度等等数值，就能够变化出无数的漂亮的三层边框来。

下面是我修改以后的几个实例：

代码：

<tbody>

<tr>

<td>

<tbody>

<tr>

<tbody>

<tr>

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

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

效果：

内容处

代码：

< table border="2" cellSpacing="20" cellPadding="0" width="650" background="http://userimage3.360doc.com/12/0930/21/4127803_201209302127430446.jpg" bgColor="#00ff00" align="center" height="200">

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

效果：

内容处

代码：

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

效果：

内容处

代码：

< table border="2" cellSpacing="40" cellPadding="0" width="650" background="http://image23.360doc.com/DownloadImg/2011/02/1109/9065204_21.jpg" bgColor="#00ff00" align="center" height="200">

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

效果：

内容处

代码：

< table border="2" cellSpacing="40" cellPadding="0" width="100%" background="http://image23.360doc.com/DownloadImg/2011/02/1109/9065204_21.jpg" bgColor="#00ff00" align="center" height="200">

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

<tbody>

<tr>

<td>

效果：

内容处

“春天没来”编撰

2013年8月15日于北京

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。