陶子博客

您好朋友!愿我的一声问候,能给您带来无穷的快乐!

日志

关于我

陶子

文章分类

做桌面鏈接邊框用表格

2009-12-28 14:37:51| 分类：博客表格制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

做桌面鏈接邊框用表格

☆效果图及代码如下☆

添加主标题

编辑內容1	编辑內容4	编辑內容7
编辑內容2	编辑內容5	编辑內容8
编辑內容3	编辑內容6	编辑內容9

多行多列表格代码<TABLE borderColor=#ffff00 cellSpacing=2 cellPadding=2 width=600 bgColor=#000000 border=2>
<TBODY>
<TR align=middle>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF ,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>添加主标题 </FONT></FONT></B></TD></TR></TBODY></TABLE></CENTER>

<CENTER>
<TABLE cellSpacing=1 cellPadding=1 width="100%" align=center border=0>
<TBODY>
<TR>
<TD>
<P>
<TABLE borderColor=#ffff00 cellSpacing=2 cellPadding=2 width=600 bgColor=#000000 border=2>
<TBODY>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#CC3300 )"><B><FONT color=#ffffff>编辑內容1</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容4</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容7</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ff0000)"><B><FONT color=#ffffff>编辑內容2</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容5</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容8</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ff0000)"><B><FONT color=#ffffff>编辑內容3</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容6</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容9</FONT></B></TD></TR></TR></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>

说明∶要增加行数复制红色布分代码粘贴其后面,直到需要的行数为止。宽度、颜色随意调整。表格作完把链接代码<a href="链接网址" target="_blank">加在蓝色><之间即可。以下表格链接均如此。

一列二栏表格
	编辑內容1	编辑內容2
	编辑內容3	编辑內容4
	编辑內容5	编辑內容6
	编辑內容7	编辑內容8

一列二栏表格代码<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=1 cellPadding=1 width=600 bgColor=#000000 border=3>
<TBODY>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)" width=40 height=140 rowSpan=5>
<P><FONT color=#ffffff><B>一<BR>列<BR>二<BR>栏<BR>表<BR>格</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)" ><B><FONT color=#ffffff>编辑內容1</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容2</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容3</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容4</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容5</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容6</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容7</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容8</FONT></FONT></B></TD></TR></TR></TR></TR></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></CENTER>

说明∶要增加行数复制红色部分代码粘贴其后面,直到需要的行数为止,但最后一定要把合并行代码rowSpan=5数值改成行数值。宽度、颜色随意调整。

一栏三列表格
编辑內容1	编辑內容2	编辑內容3
编辑內容4	编辑內容5	编辑內容6
编辑內容7	编辑內容8	编辑內容9
编辑內容10	编辑內容11	编辑內容12

一栏二列表格代码<TABLE cellSpacing=1 cellPadding=1 width=600 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=2 cellPadding=2 width=600 bgColor=#000000 border=2>
<TBODY>
<TR align=middle>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)" colSpan=4><B><FONT face=华文彩云 color=#ffff00 size=5>一栏三列表格</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容(1)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容(2)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00ff0000)"><B><FONT color=#ffffff>编辑內容(3)</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ff0000)"><B><FONT color=#ffffff>编辑內容(4)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容(5)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#383838,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容(6)</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容(7)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容(8)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容(9)</FONT></FONT></B></TD>
<TR>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff00)"><B><FONT color=#ffffff>编辑內容(10)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#00EBF6)"><B><FONT color=#ffffff>编辑內容(11)</FONT></FONT></B></TD>
<TD style="FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#9900FF,endcolorstr=#ffff000)"><B><FONT color=#ffffff>编辑內容(12)</FONT></FONT></B></TD></TR></TR></TR></TR></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
说明∶要增加行数复制红色部分代码粘贴其后面,直到需要的行数为止。宽度、颜色随意调整。

【表格制作方法及表格中的文字链接】

【表格的高级样式(无名表格、虚线表格)制作分解】

【表格的高级样式(普通、细线、立体表格)制作分解】

【高级表格的制作及语法解析待续】

陶子歡迎您常来寒舍坐坐!

评论这张

转发至微博

阅读(402)| 评论(2)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083070085085080074082081080095081094085068083094082075',
              blogTitle:'做桌面鏈接邊框用表格',
              blogAbstract:'<P align=\"center\" \><A hert=\"http://taozi6439532.blog.163.com/blog/static/58477848200911280841333/\" target=\"_blank\" rel=\"nofollow\" \><IMG height=\"300\" src=\"http://img850.ph.126.net/cvm1JQl0dFhMH5snS8qXCQ==/577305177234164898.gif\"  width=\"300\" \></A\></P\>    ',
              blogTag:'',
              blogUrl:'blog/static/58477848200911280841333',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317280577443,
              publishTime:1261982271860,
              permalink:'blog/static/58477848200911280841333',
              commentCount:2,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/58477848200911280841333">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

陶子博客

导航

日志

做桌面鏈接邊框用表格

历史上的今天

最近读者

热度

评论

页脚