欢迎您！启步学代码。
（15）
（原创制作者:游子。供初学HTML代码的朋友参考）

学习图框内多位置插入图文。

（一）运用表格设置多位置插入内容。

　　要在一张图片或网页的多个位置上插入图文,可以用表格定位插入的方法。先设置一张空表格，再根据须要编辑一些大小不同的单元格，用来插入内容。为了正确使用表格设置，重温学习一下表格标签代码有关语句；

　　　一张用淡黄色作表格背景图案的图框代码：

<TABLE cellspcing=0 cellpadding=12 width=500 height=350 bordercolor=olive bgColor=#FFFFf3 border=8>
<TR>
<TD >
一张用淡黄色作表格背景图案的图框
</TD></TR></TABLE></CENTER>

　　【说明】

　　●第一段； <TABLE　－－标签名你：表格），标签属性内容：
cellspcing=0 单元格间距。
cellpadding=12 单元格衬距。插入的图片或文字与边线的距离。
width=500－－表格宽度．
height=300 －－表格高度．
bordercolor=olive －－表格边框的颜色．
bgColor=#000000 －－表格背景颜色．
border=8－－表格边框宽度。

　　●第二段；<TR>－－表格的第一行。
　　●第三段；<TD>－－表格的第一列。
　　●第四段；</TD></TR></TABLE>--这一组表格的尾标签.
　　●注意学习代码中行和列的语句。即：
　　　行：<TR>－－</TR>
　　　列：<TD>－－</TD>
　　●插入图片或文字,如果没有设置定位指令时,会自动在中部居左显示。要在别的位置显示，必须用一些位置设置代码。

原创制作者:游子。
　

显示结果：

一张用淡黄色作表格背景图案的图框

原创制作者:游子。

一张多行表格的代码：

<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段构成一个单元格，设高度为２０．

<tr>
<td height="20">第1行
</td></tr>

●第4至第7段构成第二个单元格，设高度为40．

<tr>
<td height="40">第2行　
</td></tr>

●第8至第10段构成第三个单元格，设高度为240．

<tr>
<td height="240">第3行　
</td></tr>
<tr>
●第12至第13段构成第4个单元格，设高度为50．

<tr>
<td height="50">第4行　

●每一个单元格都必须有一对始标签和尾标签，不可多也不可少．
●每一行的高度可以设定，但插入内容的高度，只能小于设定，
　如果大于设定，高度会顺延变大。
　设定行的高度的代码：<td height="240"
●如果行与行之间不要有隔线。可以把表格边框宽度设置为零。如：
　border=8　改为：border=0

原创制作者:游子。
　

显示结果：

第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>

原创制作者:游子。
　

显示结果：

原创制作者:游子。

一张多行多列表格代码：

<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>

原创制作者:游子。
　

显示结果：

原创制作者:游子。

　　要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．代码如下：

<INPUT src="http://sucai.heima.com/sucai/news/zrfg/images/2_2.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>
要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．
</B></form></marquee>

</td></tr>
<tr>
<td height="240" width="100">
<CENTER>
<INPUT src="http://img.gw.com.cn/uploadFace/20052225222271591.gif" type=image width=100 height=80>
<INPUT src="http://homediy.myrice.com/gif/cat/cat004.gif"type=image width=100 height=120>
</CENTER>
</td>
<td width="320">　
<CENTER>
<INPUT src="http://bbs.chinazhuyi.com/UploadFile/2004-10/200410621959118.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>内<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 autostart="true" loop="true">
</CENTER>
</td></tr></table>

欢迎您！启步学代码。
原创编辑：游子
　

显示结果:

　

　 要在同一张网页（图框）内不同位置上插入多个内容，可以设置一张多行多列表格．在各个单元格内插入．

　
　不
同
位
置
插
入
内
容

　

（待续）
编辑：游子

（为了让更多网友学用html代码贴图制作网页，本贴欢迎转载，但是，转载时请不要把原创编辑游子的名字改掉。谢谢！）