注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 
关于我

用宽容的心对待世界,对待生活,用快乐的心创造世界,改变生活,用感恩的心感受世界,感受生活! 热爱生活,珍惜生命,宽容他人,善待自己。

网易考拉推荐

制作html帖第二课:在表格中添加文字和图片   

2014-01-22 21:41:13|  分类: 表格制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  [转载]

先制作表格:

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>

<TBODY>

<TR>

<TD>&nbsp;</TD></TR></TBODY></TABLE>

我们将边框粗细设置15(border=15)、单元间距设置为20(cellSpacing=20 )、单元边距设置2(cellPadding=2)

一、在表格中添加文字

1、用鼠标点表格的中间处,你看到光标在闪动,这时你就能写入文字了,也可以复制粘贴文字。

2、编辑表格中的文字

将鼠标放到表格中文字的最前面,点击,然后横拖鼠标选中,你看到字的背景颜色是蓝色时你就可以操作了。

3、编辑文字

居中:点居中图标

字体:选择你喜欢的字体,有很多选项

字号:论坛中的编辑器是数字越大字也就越大。

字体颜色:点开A自由选色,满意为止

4、我们现在要在表格中输入“寂寞时上网来看我”看编辑效果:

寂寞时上网来看我

寂寞时上网来看我

寂寞时上网来看我

寂寞时上网来看我

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>

<TBODY>

<TR>

<TD>

<P align=center>&nbsp;<FONT color=#6b0c45 size=6>寂寞时上网来看我</FONT></P></TD></TR></TBODY></TABLE>

二、在表格中插入图片

插入图片方法有三种:

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

寂寞时上网来找我

screen.width-500)this.style.width=screen.width-500;" border=0>

screen.width-500)this.style.width=screen.width-500;" border=0>

screen.width-500)this.style.width=screen.width-500;" border=0>

2、用编辑器插入法

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

[*IMG]http://xz.2000y.net/100007/uploadpic/2004101213147335.jpg[/IMG*]

[*IMG]http://xz3.2000y.net/104115/uploadpic/20041215214244375.gif[/IMG*]

你做时将*字去掉

看效果

制作html帖第二课:在表格中添加文字和图片  - yzm588 - 逍 遥 客 de 乐 园

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

帖图基本格式如下:

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

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

看代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>

<TBODY>

<TR>

<TD>内容</TD></TR></TBODY></TABLE>

内容

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

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>

<TBODY>

<TR>

<TD><*IMG src="http://image2.xitek.com/forum/200505/1347/134746/134746_1115231993.jpg"><*IMG></TD></TR></TBODY></TABLE>

screen.width-500)this.style.width=screen.width-500;">

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

图片

<*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> 普通插入

 普通插入

screen.width-500)this.style.width=screen.width-500;" border=0>

代码:

<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"> 设定上下左右空白位置

设定上下左右空白位置

screen.width-500)this.style.width=screen.width-500;" 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=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

screen.width-500)this.style.width=screen.width-500;" align=middle border=4>

代码:

<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=4 align=middle></P></TD></TR></TBODY></TABLE><BR>

例4:

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

放大了的图片

screen.width-500)this.style.width=screen.width-500;" 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>设定图片靠右

screen.width-500)this.style.width=screen.width-500;" align=right 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=130 height=92 border=0 align=right></P></TD></TR></TBODY></TABLE><BR><BR>

居中插入:

screen.width-500)this.style.width=screen.width-500;" border=0>

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>

<TBODY>

<TR>

<TD>

<P align=center><IMG src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" border=0></P></TD></TR></TBODY></TABLE><BR><BR>

图片缩边添加法 :

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

修改过的代码:

<TABLE borderColor=#8a1040 cellSpacing=0 cellPadding=0 width="60%" align=center bgColor=#f394cd border=10>

<TBODY>

<TR>

<TD>

<P></P></TD></TR></TBODY></TABLE></P>

看我做的

看我做的

screen.width-500)this.style.width=screen.width-500;" border=0>

screen.width-500)this.style.width=screen.width-500;" border=0>

 

  评论这张
 
阅读(19)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017