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

雾 海 云 山

光明磊落,无私奉献

 
 
 

日志

 
 
关于我

本人双本科毕业,从事金融工作20多年,由于网易炒股推荐为星星,所以,本人昵称为星星。作股票,业余爱好,写股评,光明磊落。

网易考拉推荐

网易博客表格制作方法及其应用代码(原)  

2007-10-02 01:19:36|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

        

        在国庆长假之际,对平时在网易博客中遇到的问题有了逐一排解的想法。其中之一是:在编辑状态下,如何在自定义模块或日志窗口中利用HTML(代码)编辑器制作表格。

        一般来说,这种方法虽然在博客应用中不算太宽,而且很难学,但对于高手或者想让自己博客上台阶的博友来说,这道关口必须要过,否则你将在博客中永远欠缺点什么。如果你的博文平平淡淡而没有特色的话,说你是一片绿叶应该不算过分,因为我们都知道红花需要绿叶来衬托。如果你的博文出类拔萃再应用表格编制博客浏览导航的话,你的博客必将是锦上添花。嘿嘿,题外话说多了,现言归正传。

第一部分:一行多列

一、1行2列居中均分

1、效果 

 

表格内容
表格内容

 

2、代码:

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>

<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>

</TR></TBODY></TABLE></DIV>

二、1行3列居中均分

1、效果

 

表格内容1
表格内容2
表格内容3

 

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>

 

<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>
<TD>
<DIV align=center>表格内容3</DIV></TD>

 

</TR></TBODY></TABLE></DIV>

三、1行4列居中均分

1、效果

表格内容1
表格内容2
表格内容3
表格内容4

 

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>

<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容1</DIV></TD>
<TD>
<DIV align=center>表格内容2</DIV></TD>
<TD>
<DIV align=center>表格内容3</DIV></TD>
<TD>
<DIV align=center>表格内容4</DIV></TD>


</TR></TBODY></TABLE></DIV>

四、小结

通过以上演示,我们以1行4列来简要说明(其实,我还有一些技术问题没有全面解决,就装一次吧)。细心的朋友会发现,这是一套固定的搭配,每增加一列,只要增加:

<TD>
 <DIV align=center>表格内容4</DIV></TD>

就可以了,可以根据需要无限的增加。这是最重要的,其他什么不知道都行,会用就可以了,就这么简单。不过,其中的要点是数字和颜色可以变化,其他不许动

第二部分:多行2列

 一、2行2列居中均分

1、效果

表格内容11
表格内容12
表格内容21
表格内容22

 

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>

</TR></TBODY></TABLE></DIV>
二、3行2列居中均分

1、效果

表格内容11
表格内容12
表格内容21
表格内容22
表格内容31
表格内容32

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>

</TR></TBODY></TABLE></DIV>

三、4行2列居中均分

1、效果

表格内容11
表格内容12
表格内容21
表格内容22
表格内容31
表格内容32
表格内容41
表格内容42

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD
>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>

</TR></TBODY></TABLE></DIV>

四、小结

通过第二部分演示,我们以4行2列来简要说明。请再细心观察一下,会发现颜色的变化的意义,每一种颜色的代码表示增加一行:也就是每增加一列,只要增加:

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>

就可以了,其他不许动,可无限增加行

第三部分:多行3列

一、2行3列居中均分

1、效果

表格内容11
表格内容12
表格内容13
表格内容21
表格内容22
表格内容23

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>

</TR></TBODY></TABLE></DIV>

二、3行3列居中均分

1、效果

表格内容11
表格内容12
表格内容13
表格内容21
表格内容22
表格内容23
表格内容31
表格内容32
表格内容33

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>

</TR></TBODY></TABLE></DIV>

三、4行3列居中均分

1、效果

表格内容11
表格内容12
表格内容13
表格内容21
表格内容22
表格内容23
表格内容31
表格内容32
表格内容33
表格内容41
表格内容42
表格内容43

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>

</TR></TBODY></TABLE></DIV>

四、小结

通过第三部分演示,我们以4行3列来说明。请再细心观察颜色的变化的意义,每一种颜色的代码表示增加一行:也就是每增加一行,只要增加:

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>

就可以了,其他不许动,可无限增加行。

第四部分:多行多列

一、4行4列

1、效果

表格内容11
表格内容12
表格内容13
表格内容14
表格内容21
表格内容22
表格内容23
表格内容24
表格内容31
表格内容32
表格内容33
表格内容34
表格内容41
表格内容42
表格内容43
表格内容44

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TD>
<DIV align=center>表格内容14</DIV></TD>


<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TD>
<DIV align=center>表格内容24</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
<TD>
<DIV align=center>表格内容34</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
<TD>
<DIV align=center>表格内容44</DIV></TD>

</TR></TBODY></TABLE></DIV>
二、5行5列

1、效果

表格内容11
表格内容12
表格内容13
表格内容14
表格内容15
表格内容21
表格内容22
表格内容23
表格内容24
表格内容25
表格内容31
表格内容32
表格内容33
表格内容34
表格内容35
表格内容41
表格内容42
表格内容43
表格内容44
表格内容45
表格内容51
表格内容52
表格内容53
表格内容54
表格内容55

2、代码

<DIV align=center>
<TABLE cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容11</DIV></TD>
<TD>
<DIV align=center>表格内容12</DIV></TD>
<TD>
<DIV align=center>表格内容13</DIV></TD>
<TD>
<DIV align=center>表格内容14</DIV></TD>
<TD>
<DIV align=center>表格内容15</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容21</DIV></TD>
<TD>
<DIV align=center>表格内容22</DIV></TD>
<TD>
<DIV align=center>表格内容23</DIV></TD>
<TD>
<DIV align=center>表格内容24</DIV></TD>
<TD>
<DIV align=center>表格内容25</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容31</DIV></TD>
<TD>
<DIV align=center>表格内容32</DIV></TD>
<TD>
<DIV align=center>表格内容33</DIV></TD>
<TD>
<DIV align=center>表格内容34</DIV></TD>
<TD>
<DIV align=center>表格内容35</DIV></TD>

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容41</DIV></TD>
<TD>
<DIV align=center>表格内容42</DIV></TD>
<TD>
<DIV align=center>表格内容43</DIV></TD>
<TD>
<DIV align=center>表格内容44</DIV></TD>
<TD>
<DIV align=center>表格内容45</DIV></TD>
<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容51</DIV></TD>
<TD>
<DIV align=center>表格内容52</DIV></TD>
<TD>
<DIV align=center>表格内容53</DIV></TD>
<TD>
<DIV align=center>表格内容54</DIV></TD>
<TD>
<DIV align=center>表格内容55</DIV></TD>


</TR></TBODY></TABLE></DIV>

四、小结

通过第四部分演示,我们细心观察颜色的变化来确定增加行与列的意义。如下这组粉色代码表示1行5列的意思,其中:每出现一次<TR bgColor=#ffffff height=20>,就增加了一行的含义,

<TR bgColor=#ffffff height=20>
<TD>
<DIV align=center>表格内容51</DIV></TD>
<TD>
<DIV align=center>表格内容52</DIV></TD>
<TD>
<DIV align=center>表格内容53</DIV></TD>
<TD>
<DIV align=center>表格内容54</DIV></TD>
<TD>
<DIV align=center>表格内容55</DIV></TD>

每出现一个如下代码:

<TD>
<DIV align=center>表格内容55</DIV></TD>

表示增加一列 。其他的就无所谓了。表格中的内容可链接地址。

第五部分:遗留问题

      所谓遗留问题就是还有一些问题没有解决:1、表格涂底色;2、表格自定义宽度;3、表格不均等分布;4、博客编辑器生成的表格文字偏上且边框无法生成颜色。等等一些问题,目前本人正研究之中,望有能力的高手给予指点,多谢!!

      另外,本人为了完成这篇文章,大约花费几个小时以上,在往圈子发送的时间大约是凌晨4点多了,对此,夫人意见很大很大。嘿嘿,出于喜欢,就是挨顿暴骂也值得了,真所谓“钻进博客造表格,管他夫人与儿子”“玩命”精神,这种精神可取吗?

       值得一体的是,本人的作品,你就是把整个搜索频道翻个底朝天,大概也找不到如此详细全面的了,所以,如果你们喜欢的话,那千万别忘记支持一下这种“玩命”精神。当你们学会的时候,请多多来访“星星点灯”的博客。

      最后,向睡在梦中的各位博友问声“早晨好!”

      敬礼!!!

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

历史上的今天

评论

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

页脚

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