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

.

.

 
 
 

日志

 
 
关于我

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

网易考拉推荐

制作html帖第一课:表格的制作  

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

  下载LOFTER 我的照片书  |

制作html帖第一课:表格的制作   [转载]

screen.width-333)this.width=screen.width-333">

第一课非常重要,一定要认真的学做.

1、表格的制作(第一层边框)

(1)点开screen.width-500)this.style.width=screen.width-500;" border=0>发表话题

(2)写上标题(如:XX作业)

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

(3)点开"插入表格"图表(这个是插入表格按钮screen.width-500)this.style.width=screen.width-500;">.)

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

(4)将"边框粗细"设置10,单元间距设置20

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

(5)我们现在设置边框颜色和背景颜色,点开调色版

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

(6)在调色版中自由选取边框和背景颜色,看我选的颜色代码,选择边框颜色 =#09097F 背景颜色=#A3B3F5

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

(7)按确认键(或回车键)

看效果~~~~~这是第一层表格

  第1层表格

编辑栏下面有一组设置,你看一下,在以后编辑中常用到:

"Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态

(8)我们进入HTML看代码:

<TABLE borderColor=#09097f cellSpacing=20 cellPadding=3 width="100%" align=center bgColor=#a3b3f5 border=10>

<TBODY>

<TR>

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

(9)根据上面的方法我们做第2层表格

第2层表格

第2层表格

(10)你做好后点发表

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

(11)可以在你帖子中继续做,请点screen.width-500)this.style.width=screen.width-500;" align=absMiddle border=0>

screen.width-333)this.width=screen.width-333">

 

2、学习修改表格的宽度

先我们做的第一层边框,(进入HTML看代码)

<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>

<TBODY>

<TR>

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

现在我们将width="100%"宽度改width="60%"

<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>

<TBODY>

<TR>

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

看效果:

学习修改表格中的宽度width="100%">,边框颜色bgColor=#e6941a 背景颜色borderColor=#1010de 单元间距cellSpacing=2 ,单元边距cellPadding=3 边框粗细border=1>

很好记:宽度记“%”,颜色记“#”,单元间距和边距记“前后”边框粗细记“在最后排列”空格码&nbsp;是插入内容的地方

 

screen.width-333)this.width=screen.width-333">

 

3、制作两层边框

这是上面我做的第一层

<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>

<TBODY>

<TR>

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

现在我们做第二层,方法跟1层一样。

添加内容

我们将两层添加在一起,看是什么效果。

方法:用鼠标选中你做的边框,点右键复制,在第一层边框中粘贴上,跟文字粘贴一样

添加内容

添加内容

添加内容

简单吗?

代码:

<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#22ddb8 cellSpacing=2 cellPadding=3 width="100%" bgColor=#9dfcd5 border=5>

<TBODY>

<TR>

<TD>

<P align=center></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

三层边框

代码如下:

<TABLE borderColor=#363636 cellSpacing=0 cellPadding=30 width="100%" align=center bgColor=#dd6969 border=1>

<TBODY>

<TR>

<TD borderColor=#ff0000>

<TABLE borderColor=#696969 cellSpacing=0 cellPadding=15 width="100%" bgColor=#aa1212 border=1>

<TBODY>

<TR>

<TD borderColor=#aa1212>

<TABLE borderColor=#3154df cellSpacing=2 cellPadding=3 width="100%" bgColor=#dd6969 border=1>

<TBODY>

<TR>

<TD>

<P align=center>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

1、

将第二层复制粘贴进来

2、

第三层粘贴到2层

3、

内容

简单吗?

怎样添加表格呢?

鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,做成一个5层边框如下:

能看明白吗?

鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,

退出空格还有一种方法:你进入"HTML"是代码状态.将将&nbsp; 这种空格码删除掉.

你进入代码中,将&nbsp; 这种空格码去掉

制作多列行表格:修改行列数字.

2行:

内容
内容

代码:

<TABLE borderColor=#8e1d77 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f4b5e7 border=10>

<TBODY>

<TR>

<TD>内容</TD>

<TR>

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

4行:

内容
内容
内容
内容

代码:

<TABLE borderColor=#88225f cellSpacing=10 cellPadding=0 width="100%" bgColor=#ebaddf border=12>

<TBODY>

<TR>

<TD>内容</TD>

<TR>

<TD>内容</TD>

<TR>

<TD>内容</TD>

<TR>

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

2列:

内容 内容

代码:

<TABLE borderColor=#b11b57 cellSpacing=10 cellPadding=0 width="100%" bgColor=#f5a3c4 border=10>

<TBODY>

<TR>

<TD>内容</TD>

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

5列:

内容 内容 内容 内容 内容

代码:

<TABLE borderColor=#991147 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f7b3ce border=10>

<TBODY>

<TR>

<TD>内容</TD>

<TD>内容</TD>

<TD>内容</TD>

<TD>内容</TD>

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

行列合并,2行2列

内容 内容
内容 内容

代码:

<TABLE borderColor=#7a1f56 cellSpacing=10 cellPadding=0 width="100%" bgColor=#fcbdad border=10>

<TBODY>

<TR>

<TD>内容</TD>

<TD>内容</TD>

<TR>

<TD>内容</TD>

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

8行3列:

内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容

代码:将空格码删除掉,太多我就不一个个的删除了,你做时一定要在代码中删除空格码然后再添加内容.

<TABLE borderColor=#f68080 cellSpacing=15 cellPadding=0 width="100%" bgColor=#fee4de border=10>

<TBODY>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

<TR>

<TD>&nbsp;</TD>

<TD>&nbsp;</TD>

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

screen.width-333)this.width=screen.width-333">

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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