☆淺談邊框的製作方法

淺談邊框的製作方法要製作邊框，先要認識一下表格標籤。表格標籤是一套標籤，由四個首標籤與四個尾標籤一個八個標籤組成。<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><p align="center"><font style="font-size: 29px;" color="#000000">內容處</font></p></td></tr></tbody></table>如果要製作三層邊框，則把上面的代碼用三次。三套首標籤放在前面，三套尾標籤放在後面，最裡層的那個表格的「首標籤與尾標籤之間」添加段落標籤（或者塊區標籤）與文字標籤，以便放置內容。其代碼如下：<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><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><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><p align="center"><font style="font-size: 29px;" color="#000000">內容處</font></p></td></tr></tbody></table></td> </tr></tbody></table></td></tr></tbody></table>這時候的效果如下。其效果還不好，需要進行修改。內容處修改其代碼，可以替換背景圖片，可以修改間距、邊距、表格的寬度等等數值，就能夠變化出無數的漂亮的三層邊框來。下面是我修改以後的幾個實例：代碼：<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" align="center" ><tbody><tr><td><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" align="center"><tbody><tr><td><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" align="center"><tbody><tr><td><p align="center"><font style="font-size: 29px;" color="#000000">內容處</font></p></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><table border="1" cellSpacing="30" cellPadding="0" width_="650" background="http://image48.360doc.com/DownloadImg/2011/11/2518/20260762_8.jpg" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="2" cellSpacing="10" cellPadding="0" width_="650" background="http://image37.360doc.com/DownloadImg/2011/09/1515/17657035_310.jpg" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><p align="center"><font style="font-size: 29px;" color="#00ff00">內容處</font></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>效果：內容處代碼：<table border="2" cellSpacing="35" cellPadding="0" width_="650" background="http://image58.360doc.com/DownloadImg/2013/01/2821/30003232_7.gif" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="1" cellSpacing="10" cellPadding="0" width_="650" background="http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="2" cellSpacing="10" cellPadding="0" width_="700" background="http://image29.360doc.com/DownloadImg/2011/05/2421/12090895_26.gif" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><p align="center"><font style="font-size: 29px;" color="#00ff00">內容處</font></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>效果：內容處代碼：< 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><table border="1" cellSpacing="10" cellPadding="0" width_="650" background="http://image45.360doc.com/DownloadImg/2011/12/0117/19707544_4.gif" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="2" cellSpacing="10" cellPadding="0" width_="650" background="http://image29.360doc.com/DownloadImg/2011/05/2421/12090895_26.gif" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><p align="center"><font style="font-size: 29px;" color="#00ff00">內容處</font></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>效果：內容處代碼：< table border="2" cellSpacing="40" cellPadding="0" background="http://image23.360doc.com/DownloadImg/2011/02/1109/9065204_21.jpg" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="1" cellSpacing="5" cellPadding="0" width_="740" background="http://image58.360doc.com/DownloadImg/2012/11/0418/29761212_1.gif" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><table border="2" cellSpacing="0" cellPadding="30" width_="740" background="http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg" bgColor="#00ff00" align="center" height="200"><tbody><tr><td><p align="center"><font style="font-size: 29px;" color="#885588">內容處</font></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>效果：內容處「春天沒來」編撰2013年8月15日於北京
推薦閱讀：