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

547217255的博客

 
 
 

日志

 
 

【引用】制作表格的代码《四》  

2016-06-04 15:46:08|  分类: 表格应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

学习表式代码《四》

学习表式代码《四》 - 杨东 - 杨东小园

关于目录导航表的制作代码,一般情况常设局在博客模块的首页面板上,常见的导航目录表格很多,根据目前常用的导航模式列举两个,试试跟朋友一起学习.

列举第一种表格式导航模块(简单的三栏式).

代码如下:

<P align=center><TABLE borderColor=#ff0000 cellSpacing=0 cellPadding=0 width=400 align=center bgColor=#00ff00 border=1>
<TBODY>
<TR bgColor=#caff70 height=20>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="链接地址#1"><FONT size=2>填写导航文字(1)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#2"><FONT size=2>填写导航文字(2)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#3"><FONT size=2>填写导航文字(3)</FONT></A></TD></TR>
<TR bgColor=#99ff00 height=20>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#4"><FONT size=2>填写导航文字(4)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#5"><FONT size=2>填写导航文字(5)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#6"><FONT size=2>填写导航文字(6)</FONT></A></TD></TR>
<TR bgColor=#caff70 height=20>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#7"><FONT size=2>填写导航文字(7)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#8"><FONT size=2>填写导航文字(8)</FONT></A></TD>
<TD width="33%">&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0></FONT><A href="http://hu320521.blog.163.com/链接地址#9"><FONT size=2>填写导航文字(9)</FONT></A></TD></TR></TBODY></TABLE>

以上代码实例图

 学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(1)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(2)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(3)
 学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(4)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(5)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(6)
 学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(7)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(8)  学习和制作表格的代码《之五》 - 杨东 - 杨东小園hu320521填写导航文字(9)

以上实例图样的说明;

从上例中所见,表式的外边框没有双线,这是因为最(简单型)的,每小格中有一个小手指在不断地闪动,这是因为已在框内插入了小动画图片,这表每一行分格都有不同的颜,这是因为在每一行代码中变更了色码,其中第一行<TR bgColor=#caff70 height=20>浅绿色,第二行为淡绿色,<TR bgColor=#99ff00 height=20>,第三行<TR bgColor=#ffd700 height=20>是纷黄色,也就是只要改变一下某一行的颜色代码,就可改变所指定行次的颜色,由于在这表中没有加导航目录地址,所以就没有注明标题,因为没插加网址故而也就不能点开,只要你在<A href="链接地址">代码中加进网址,就能点开,但一定要写入明确的标的题目.

作为导航表格不可能就这三行,如若要增加多行次表式,每增加一栏行次需在结束语之前就必须加插一组代码即可;

每组代码如下

<TR bgColor#FF66FFheight=20>
<TD width="33%"><IMG src="小图地址" border=0><A href="链接地址#7">这里填写导航文字</A></TD>
<TD width="33%"><IMG src="小图地址" border=0><A href="链接地址#8">这里填写导航文字</A></TD>
<TD width="33%"><IMG src="小图地址" border=0><A href="链接地址#9">这里填写导航文字</A></TD></TR>

结束语如下

</TBODY></TABLE>

学习表式代码《四》 - 杨东 - 杨东小园

 

第二种类型栏目表式(内外双线边框格式)

代码如下

<DIV align=center>
<TABLE borderColor=#ff00ff cellSpacing=2 cellPadding=0 width=300 align=center bgColor=#00ee00 border=5>
<TBODY>
<TR>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD></TR>
<TR>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD></TR>
<TR>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD>
<TD>&nbsp;<IMG src="
http://img.blog.163.com/photo/UEK_F1MrFzbF5SHvzxZ9kA==/339458821913404769.jpg" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></TD></TR></TBODY></TABLE></DIV>

以上代码的实例图示如下 

以上实例图示的说明

    此实例如果要改变边框的粗细,就要修改border=5>此数值越大越粗.如果有改变每行每列之间双线距离,就要把控制双线距离的代码 cellSpacing=2进行调节,越大距离越宽,但不宜过宽.以上表内的手指小图片已插入,但没有加入导航网址所以未填写相应的导航题目.

如果要增加行次,要在这表格的结束语之前,也就是加插在中间,

每一组添加的代码如下

<TR>
<TD>&nbsp;<IMG src="小图片地址帖入处" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD>
<TD>&nbsp;<IMG src="小图片地址帖入处" border=0><A href="此处填写连接地址"><STRONG><FONT face=楷体_GB2312 size=2>填写导航目录处</A> </FONT></STRONG></TD></TR>

结束语如下

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


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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