陶子博客

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

日志

关于我

陶子

文章分类

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

2008-04-21 13:30:32| 分类：博客表格制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

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

操作窗口:编辑状态下的自定义模块中或编辑状态下的日志窗口的HTML编辑器中

一、表格基本代码:

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>

<TBODY>单元格代码处</TBODY></TABLE>

说明：width=450 表单元格宽度；bgColor=#ff0000 表边框颜色，“ff0000”这是红颜色代码，要改变颜色可参看颜色代码表。

二、表格单元格代码:

<TR bgColor=#3333FF height=40>

<TD width="100%">文字编辑或文字链接代码处 </TD></TR>

三、将单元格代码插入基本代码中后的代码示范:

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#3333FF height=40>

<TD width="100%">文字编辑或文字链接代码处 </TD></TR></TBODY></TABLE>

说明:

1、width=450 这是单元格的宽度,“450”这个值是可以变的。如果把表放在首页中间宽的一栏，这个值可设为“440--450”为宜；如果把表放在窄的一栏，这个值可设为“220”为宜。

2、红色代码是代入的单元格代码；

3、height=40 这是单元格的高度， “40”这个值是可以改大改小的；

4、width="100%" 这是表单元格的宽度的百分比，100%这个值也是可以变化的。如果在一行中不需再分成小单元格，那么它的百分比就是100%；（即单元格宽度width=450 的100%）

四、将插入红色单元格代码后的一段代码连续复制粘贴几次就是几行单元格。

一行单元格效果:（复制粘贴代码1次)

文字编辑或文字链接代码处

两行单元格效果:（复制粘贴代码2次）

文字编辑或文字链接代码处

三行单元格效果：（复制粘贴代码3次）

文字编辑或文字链接代码处

文字编辑或文字链接代码处

文字编辑或文字链接代码处

四行单元格效果：（复制粘贴代码4次）

文字编辑或文字链接代码处

文字编辑或文字链接代码处

文字编辑或文字链接代码处

文字编辑或文字链接代码处

五、将行分成若干个小单元格：

    1、如果在一行中又分成2个小单元格，那么它的百分比就是50%；（即每个小单元格占单元格宽度width=450 的50%）并将由开始标记<TD>和结束标记</TD>组成的这段单元格代码(<TD width="50%">文字编辑或文字链接代码处</TD>）

再复制粘贴1次插入代码中,下面代码示范中红色处就是.

     代码示范如下：

</FONT></STRONG></P><TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>

<TBODY>

<TR bgColor=#3333ff height=40>

<TD width="50%">文字编辑或文字链接代码处</TD>

<TD width="50%">文字编辑或文字链接代码处</TD></TR></TBODY></TABLE>

    思考:如果要将一行单元分成3个、4个、5个......小单元格怎么办?

  答案:分成几个小单元格,红色代码就要在整个代码中出现几次,其百

       分比依次是:33.3%、25%、20%......

请看看效果:

文字编辑或文字链接代码处(1) 文字编辑或文字链接代码处(2)

表格代码

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="50%"> <STRONG><FONT face=隶书 color=#cc99ff>文字编辑或文字链接代码处(1)</FONT></STRONG></TD>
<TD width="50%"><STRONG><FONT face=隶书 color=#cc99ff>文字编辑或文字链接代码处(2)</TD></TR></TBODY></TABLE>

1 2 3

表格代码

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">1</TD>
<TD width="33.3%">2</TD>
<TD width="33.3%">3</TD></TR></TBODY></TABLE>

1 2 3 4

表格代码

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="25%">1</TD>
<TD width="25%">2</TD>
<TD width="25%">3</TD>
<TD width="25%">4</TD></TR></TBODY></TABLE><

1 2 3 4 5

表格代码

<TABLE cellSpacing=3 cellPadding=0 width=600 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#000000 height=40>
<TD width="20%">1</TD>
<TD width="20%">2</TD>
<TD width="20%">3</TD>
<TD width="20%">4</TD>
<TD width="20%">5</TD></TR></TBODY></TABLE>

六、最后,就是在表格中做文学的链接了.

1 2 3

4 5 6

7 8 9

10 11 12

13 14 15

表格代码

<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">1</TD>
<TD width="33.3%">2</TD>
<TD width="33.3%">3</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">4</TD>
<TD width="33.3%">5</TD>
<TD width="33.3%">6</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">7</TD>
<TD width="33.3%">8</TD>
<TD width="33.3%">9</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">10</TD>
<TD width="33.3%">11</TD>
<TD width="33.3%">12</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=1 cellPadding=0 width=450 align=center bgColor=#ff0000 border=0>
<TBODY>
<TR bgColor=#3333ff height=40>
<TD width="33.3%">13</TD>
<TD width="33.3%">14</TD>
<TD width="33.3%">15</TD></TR></TBODY></TABLE>

2行表格示图：

输入内容
输入内容

2行表格代码

<TABLE borderColor=#8O0000 cellSpacing=15 cellPadding=0 width="450" bgColor=#ffb6C1 border=10>
<TBODY>
<TR>
<TD><FONT color=#0000ff>输入内容</FONT></TD>
<TR>
<TD><FONT color=#0000ff>输入内容</FONT></TD></TR></TBODY></TABLE>

多行表格示图：

输入内容
输入内容
输入内容
输入内容

多行表格代码

<TABLE borderColor=#9400d3 cellSpacing=10 cellPadding=0 width="450" bgColor=#fff0f5 border=12>
<TBODY>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD></TR></TBODY></TABLE>

2列表格示图：

输入内容输入内容

2列表格代码

<TABLE borderColor=#006400 cellSpacing=10 cellPadding=0 width="450" bgColor=#bdb76b border=10>
<TBODY>
<TR>
<TD><FONT color=#00008b>输入内容</FONT></TD>
<TD><FONT color=#00008b>输入内容</FONT></TD></TR></TBODY></TABLE>

3列表格示图：

内容内容内容

3列表格代码

<TABLE borderColor=#ff0000 cellSpacing=10 cellPadding=0 width="450" bgColor=#bdb76b border=5>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

行列合并2行2列表格示图：

输入内容输入内容
输入内容输入内容

行列合并2行2列表格代码

<TABLE borderColor=#ff4500 cellSpacing=10 cellPadding=0 width="450" bgColor=#f0e68c border=10>
<TBODY>
<TR>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TR>
<TD><FONT color=#800000>输入内容</FONT></TD>
<TD><FONT color=#800000>输入内容</FONT></TD></TR></TBODY></TABLE>

行列合并6行3列表格示图：

输入内容输入内容输入内容
输入内容输入内容输入内容
输入内容输入内容输入内容
输入内容输入内容输入内容
输入内容输入内容输入内容
输入内容输入内容输入内容

行列合并6行3列表格代码

<TABLE style="WIDTH: 450px; HEIGHT: 315px" borderColor=#ff0000 cellSpacing=15 cellPadding=0 width=660 bgColor=#000000 border=10>
<TBODY>
<TR>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TR>
<TD> 输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TR>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TR>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TR>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TR>
<TD>输入内容</TD>
<TD>输入内容</TD>
<TD>输入内容</TD></TR></TBODY></TABLE>

一栏五列多格表格示图：

内容

内容内容内容内容内容

内容内容内容内容内容

内容内容内容内容内容

内容内容内容内容内容

内容内容内容内容内容

内容内容内容内容内容

一栏五列多格表格代码

<TABLE borderColor=#ff0033 cellSpacing=4 cellPadding=2 width=450 align=center border=4>
<TBODY>
<TR>
<TD colSpan=25> 内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

内容1 内容2 内容3

内容内容内容内容内容

表格代码

<TABLE style="WIDTH: 450px; HEIGHT: 88px" borderColor=#ff0000 cellSpacing=3 cellPadding=0 width=450 bgColor=#000000 border=3>
<TBODY>
<TR>
<TD><FONT color=#ffff00>内容1</TD>
<TD><FONT color=#ffff00>内容2</TD>
<TD><FONT color=#ffff00>内容3</TD>
</TD></TR></TBODY></TABLE>
<TABLE style="WIDTH: 450px; HEIGHT: 88px" borderColor=#cc0000 cellSpacing=3 cellPadding=0 width=450 border=3>
<TBODY>
<TR>
<TD><FONT color=#ffff33 >内容</TD>
<TD> <FONT color=#ffff33 >内容</FONT></TD>
<TD><FONT color=#ffff33 >内容</FONT></TD>
<TD><FONT color=#ffff33 >内容</FONT></TD>
<TD><FONT color=#ffff33 >内容</TD></TR></TBODY></TABLE>

1

2 3 4

表格代码

<TABLE borderColor=#0080ff width=500 border=1>
<TBODY>
<TR>
<TD colSpan=3>1</TD></TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR></TBODY></TABLE>

序号

样                       式

001 内容

002 内容

003 内容

004 内容

005 内容

006 内容

007 内容

008 内容

009 内容

010 内容

011 内容

012 内容

013 内容

014 内容

015 内容

表格代码

<TABLE borderColor=#ff00ff cellPadding=“1” width=450 bgColor=#000000 border=2>
<TBODY>
<TR>
<TD align=middle width="10%" height=50>序号</TD>
<TD align=middle width="90%" height=50>
<P></P>
<P align=middle>样 式</TD></TR>
<TR>
<TD align=middle width="10%">001</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">002</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">003</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">004</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">005</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">006</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">007</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">008</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">009</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">010</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">011</TD>
<TD align=middle width="90%">内容 </TD></TR>
<TR>
<TD align=middle width="10%">012</TD>
<TD align=middle width="90%">内容</TD></TR>
<TR>
<TD align=middle width="10%">013</TD>
<TD align=middle width="90%">内容</TD></TR>
<TR>
<TD align=middle width="10%">014</TD>
<TD align=middle width="90%">内容</TD></TR>
<TR>
<TD align=middle width="10%">015</TD>
<TD align=middle width="90%">内容</TD></TR></TBODY></TABLE>

1

2 3 4

5 6

7

表格代码
<TABLE cellSpacing=2 cellPadding=0 width=580 align=center bgColor=#080808 border=1>
<TBODY>
<TR align=middle bgColor=#0000ff>
<TD colSpan=3>1</TD></TR>
<TR bgColor=#ff00ff align=middle >
<TD>2</TD>
<TH width=60 height=5 rowSpan=2>3</TH>
<TD>4</TD></TR>
<TR bgColor=#ff0000 align=middle >
<TD>5</TD>
<TD>6</TD></TR>
<TR bgColor=#3300ff align=middle >
<TD colSpan=3>7</TD></TR></TBODY></TABLE>

【表格制作方法及表格中的文字链接】 【代码边框编辑制作】 【幾種樣式表格及代碼】 【表格与分割文版代码】

【做桌面鏈接邊框用表格】 【表格的高级样式(无名表格、虚线表格)制作分解】 【表格的高级样式(普通、细线、立体表格)制作分解】 【高级表格的制作及语法解析】

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

评论这张

转发至微博

阅读(628)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_084071085086081068087080094095081094085068083094082075',
              blogTitle:'表格制作方法及表格中的文字链接',
              blogAbstract:'<P align=\"center\" \><A hert=\"http://taozi6439532.blog.163.com/blog/static/58477848200832113032702/\" target=\"_blank\" rel=\"nofollow\" \><IMG height=\"300\" src=\"http://img850.ph.126.net/cvm1JQl0dFhMH5snS8qXCQ==/577305177234164898.gif\"  width=\"300\" \></A\></P\>    ',
              blogTag:'',
              blogUrl:'blog/static/58477848200832113032702',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1317596642406,
              publishTime:1208755832702,
              permalink:'blog/static/58477848200832113032702',
              commentCount:0,
              mainCommentCount:0,
              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/58477848200832113032702">${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 - 订阅此博客

陶子博客

导航

日志

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

历史上的今天

最近读者

热度

评论

页脚