歡迎您,!啟步學(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ū)挾取?br> ●第二段,;<TR>--表格的第一行,。 ●第三段;<TD>--表格的第一列,。 ●第四段,;</TD></TR></TABLE>--這一組表格的尾標(biāo)簽. ●注意學(xué)習(xí)代碼中行和列的語句,。即: 行:<TR>--</TR> 列:<TD>--</TD> ●插入圖片或文字,如果沒有設(shè)置定位指令時(shí),會(huì)自動(dòng)在中部居左顯示。要在別的位置顯示,,必須用一些位置設(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è)高度為20.
<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è)定,,高度會(huì)順延變大,。 設(shè)定行的高度的代碼:<td height="240" ●如果行與行之間不要有隔線??梢园驯砀襁吙?qū)挾仍O(shè)置為零,。如: border=8 改為:border=0
| | 顯示結(jié)果:
一張多列表格的代碼:
<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é)果:
一張多行多列表格代碼:
<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./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é)果:
(待續(xù))
編輯:游子
(為了讓更多網(wǎng)友學(xué)用html代碼貼圖制作網(wǎng)頁,,本貼歡迎轉(zhuǎn)載,,但是,轉(zhuǎn)載時(shí)請不要把原創(chuàng)編輯游子的名字改掉,。謝謝?。?/font> |