[推荐] 在表格中添加文字和图片[动网先锋论坛]

楼主

[推荐] 在表格中添加文字和图片

(第二课 )在表格中添加文字和图片

二、在表格中插入图片

插入图片方法有三种：

1、直接插入法。将鼠标放在你选好的图片上，点右键，复制然后粘贴到你的表格中，看效果：

粘贴图片

2、用编辑器插入法

选择好图片，将鼠标放在图片中点右键，点属性，复制图片地址；在编辑器里点开“插入图片”图标，将你刚复制过的地址粘贴到信息栏里，按确定，看是下面的格式。

[*IMG]http://class.znrsw.com/UploadFile/2005-10/2005101120412195250.jpg[/IMG*]

[*IMG]http://www.yyly8.com/yy/10/sucai/beijing/menghuanhua/7.jpg[/IMG*]
你做时将*字去掉
看效果

3、在html格式下插入图片代码及图片地址

帖图基本格式如下：

<*IMG src="图片连接URL地址"><*IMG> 称图形标记，主要用来插入图形标记。

方法：在表格中输入“内容”两字，点开html将你编辑好的代码及图片地址粘贴上，

看代码：

内容

我们现在添加代码和图片，你做时去掉*符号

居中很重要！鼠标点图片按居中键

图片

<*IMG> 的一般参数设定：

　　例如 <*img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，

width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）

hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，是设定图片上下的空间，高度采用 pixels 作单位。

border=2
图片边框厚度

align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

例1：
原代码：

<*IMG border=0 height=92 src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130>　普通插入

　普通插入

代码：
<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD><*IMG border=0 height=92 src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130></TD></TR></TBODY></TABLE>

例2：
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 hspace=10 vspace=20"> 设定上下左右空白位置

设定上下左右空白位置

代码：
<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 hspace=10 vspace=20"> </P></TD></TR></TBODY></TABLE>

例3：
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=4 align=middle>设定图片中间对齐，边框厚度为 4

设定图片中间对齐，边框厚度为 4

例4：
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=180 height=152 border=0> 放大了的图片
放大了的图片

代码:
<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=180 height=152 border=0></P></TD></TR></TBODY></TABLE><BR><BR>

例5：
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 align=right>设定图片靠右

代码:

居中插入:

代码:

图片缩边添加法 :

将做好的边框修改边距,我将边距和间距都设置为0cellSpacing=0 cellPadding=0边框粗细设置10 <border=10>将表格的宽度设置width="60%"

修改过的代码:

看例子

看例子

四行1列

代码: