啟步學(xué)代碼【15】
雪球兒書館歡迎您的光臨 愿您開心快樂
歡迎您！啟步學(xué)代碼
（原創(chuàng)制作者:游子。供初學(xué)HTML代碼的朋友參考）
學(xué)習(xí)圖框內(nèi)多位置插入圖文。
（一）運(yùn)用表格設(shè)置多位置插入內(nèi)容。 要在一張圖片或網(wǎng)頁的多個(gè)位置上插入圖文,可以用表格定位插入的方法。先設(shè)置一張空表格，再根據(jù)須要編輯一些大小不同的單元格，用來插入內(nèi)容。為了正確使用表格設(shè)置，重溫學(xué)習(xí)一下表格標(biāo)簽代碼有關(guān)語句；
一張用淡黃色作表格背景圖案的圖框代碼：
<TABLE cellspcing=0 cellpadding=12 width=500 height=350 bordercolor=olive bgColor=#FFFFf3 border=8>
<TR>
<TD >
一張用淡黃色作表格背景圖案的圖框
</TD></TR></TABLE></CENTER>
【說明】
●第一段； <TABLE －－標(biāo)簽名你：表格），標(biāo)簽屬性內(nèi)容：
cellspcing=0 單元格間距。
cellpadding=12 單元格襯距。插入的圖片或文字與邊線的距離。
width=500－－表格寬度．
height=300 －－表格高度．
bordercolor=olive －－表格邊框的顏色．
bgColor=#000000 －－表格背景顏色．
border=8－－表格邊框?qū)挾取?div style="height:15px;">
●第二段；<TR>－－表格的第一行。
●第三段；<TD>－－表格的第一列。
●第四段；</TD></TR></TABLE>--這一組表格的尾標(biāo)簽.
●注意學(xué)習(xí)代碼中行和列的語句。即：
行：<TR>－－</TR>
列：<TD>－－</TD>
●插入圖片或文字,如果沒有設(shè)置定位指令時(shí),會自動在中部居左顯示。要在別的位置顯示，必須用一些位置設(shè)置代碼。
顯示結(jié)果：
一張用淡黃色作表格背景圖案的圖框
一張多行表格的代碼：
<table border="1" width="500" cellspacing="1" bgcolor="#FFFFF3" height="350" id="table2">
<tr>
<td height="20">第1行
</td></tr>
<tr>
<td height="40">第2行
</td></tr>
<tr>
<td height="240"第3行
</td></tr>
<tr>
<td height="50">第4行
</TD></TR></TABLE>
【說明】
●第2至第4段構(gòu)成一個(gè)單元格，設(shè)高度為２０．
<tr>
<td height="20">第1行
</td></tr>
●第4至第7段構(gòu)成第二個(gè)單元格，設(shè)高度為40．
<tr>
<td height="40">第2行
</td></tr>
●第8至第10段構(gòu)成第三個(gè)單元格，設(shè)高度為240．
<tr>
<td height="240">第3行
</td></tr>
<tr>
●第12至第13段構(gòu)成第4個(gè)單元格，設(shè)高度為50．
<tr>
<td height="50">第4行
●每一個(gè)單元格都必須有一對始標(biāo)簽和尾標(biāo)簽，不可多也不可少．
●每一行的高度可以設(shè)定，但插入內(nèi)容的高度，只能小于設(shè)定，
如果大于設(shè)定，高度會順延變大。
設(shè)定行的高度的代碼：<td height="240"
●如果行與行之間不要有隔線?？梢园驯砀襁吙?qū)挾仍O(shè)置為零。如：
border=8 改為：border=0
顯示結(jié)果：
第1行
第2行
第3行
第4行
一張多列表格的代碼：
<table border="1" width="500" cellspacing="0" bgcolor="#FFFFF3" height="350" id="table2">
<tr>
<td width="50">1
</td>
<td width="50">2
</td>
<td width="300">3
</td>
<td width="100">4
</td></tr></table>
顯示結(jié)果：
1234
一張多行多列表格代碼：
<p align="center">
<table border="1" width="500" cellspacing="1" bgcolor="#00FF00" height="360" id="table3">
<tr>
<td height="80" colspan="3"> </td>
</tr>
<tr>
<td height="20" colspan="3"> </td>
</tr>
<tr>
<td height="240" width="120"> </td>
<td height="240" width="350"> </td>
<td height="240" width="30"> </td>
</tr>
<tr>
<td height="20" colspan="3"> </td>
</tr>
</table>
</p><BR>
顯示結(jié)果：
要在同一張網(wǎng)頁（圖框）內(nèi)不同位置上插入多個(gè)內(nèi)容，可以設(shè)置一張多行多列表格．在各個(gè)單元格內(nèi)插入．代碼如下：
<INPUT src="http://image49.360doc.com/DownloadImg/2012/02/2215/21723107_1.jpg" type=image width=480 height=80>
</CENTER>
</td></tr>
<tr>
<td height="20" colspan="3">
<marquee>
<FONT face=仿宋_GB2312 color=0000ff size=4><B>
要在同一張網(wǎng)頁（圖框）內(nèi)不同位置上插入多個(gè)內(nèi)容，可以設(shè)置一張多行多列表格．在各個(gè)單元格內(nèi)插入．
</B></form></marquee>
</td></tr>
<tr>
<td height="240" width="100">
<CENTER>
<INPUT src="http://image49.360doc.com/DownloadImg/2012/02/2215/21723107_2.gif" type=image width=100 height=80>
<INPUT src="http://image49.360doc.com/DownloadImg/2012/02/2215/21723107_3.gif"type=image width=100 height=120>
</CENTER>
</td>
<td width="320">
<CENTER>
<INPUT src="http://image49.360doc.com/DownloadImg/2012/02/2215/21723107_4.jpg" type=image width=320 height=240>
</CENTER>
<BR>
</td>
<td width="60">
<CENTER>
<font style=font:20pt face=隸書 color=ff0000>
不<BR>同<BR>位<BR>置<BR>插<BR>入<BR>內(nèi)<BR>容
</font></CENTER>
</CENTER>
</td></tr>
<tr>
<td height="20" colspan="3">
<CENTER>
<embed src="http://www.oldkids.com.cn/main/media/music/sqyy/xyh.mp3" type="audio/x-pn-realaudio-plugin" controls="controlpanel,statusbar" height=50 width=480 loop="true">
</CENTER>
</td></tr></table>
顯示結(jié)果:
要在同一張網(wǎng)頁（圖框）內(nèi)不同位置上插入多個(gè)內(nèi)容，可以設(shè)置一張多行多列表格．在各個(gè)單元格內(nèi)插入．
不
同
位
置
插
入
內(nèi)
容
（待續(xù)） 編輯：游子
（為了讓更多網(wǎng)友學(xué)用html代碼貼圖制作網(wǎng)頁，本貼歡迎轉(zhuǎn)載，但是，轉(zhuǎn)載時(shí)請不要把原創(chuàng)編輯游子的名字改掉。謝謝?。?
