天天快乐

愿您快乐天天!

日志

关于我

天天快乐

文章分类

高级表格的制作及语法解析

2009-12-04 22:53:26| 分类：博客制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

高级表格的制作及语法解析

源自:金钥匙的【高级表格的制作及语法解析】

表格式样:


单元格1	“滚动图”					单元格3
	单元格4	单元格5	单元格6	单元格7	单元格8
	单元格9	单元格10	单元格11	单元格12	单元格13
	单元格14	单元格10	单元格15	单元格12	单元格16
	“旋转字”
	单元格18	单元格19	单元格20	单元格21	单元格22
	单元格23	单元格19	单元格24	单元格21	单元格25
	单元格26	单元格27	单元格28	单元格29	单元格30
	单元格31	单元格32	单元格33	单元格34

代码如下:

<TABLE borderColor=green width="90%" bgColor=#fff000 border=5>
<CAPTION align=bottom><STRONG>高级表格制作</STRONG></CAPTION>
<TBODY>
<TR>
<TH bgColor=blue rowSpan=9>单元格1</TH>
<TD bgColor=red colSpan=5>“滚动图”</TD>
<TD bgColor=blue rowSpan=9>单元格3</TD></TR>
<TR>
<TD>单元格4</TD>
<TD>单元格5</TD>
<TD>单元格6</TD>
<TD>单元格7</TD>
<TD>单元格8</TD></TR>
<TR>
<TD>单元格9</TD>
<TD bgColor=blue rowSpan=2>单元格10</TD>
<TD>单元格11</TD>
<TD bgColor=blue rowSpan=2>单元格12</TD>
<TD>单元格13</TD></TR>
<TR>
<TD>单元格14</TD>
<TD>单元格15</TD>
<TD>单元格16</TD></TR>
<TR>
<TD bgColor=red colSpan=5>“旋转字”</TD></TR>
<TR>
<TD>单元格18</TD>
<TD bgColor=blue rowSpan=2>单元格19</TD>
<TD>单元格20</TD>
<TD bgColor=blue rowSpan=2>单元格21</TD>
<TD>单元格22</TD></TR>
<TR>
<TD>单元格23</TD>
<TD>单元格24</TD>
<TD>单元格25</TD></TR>
<TR>
<TD>单元格26</TD>
<TD>单元格27</TD>
<TD>单元格28</TD>
<TD>单元格29</TD>
<TD bgColor=blue rowSpan=12>单元格30</TD></TR>
<TR>
<TD>单元格31</TD>
<TD>单元格32</TD>
<TD>单元格33</TD>
<TD>单元格34</TD></TR></TBODY></TABLE>

【语法解析】

1.<TABLE></TABLE>分别作起始标识符　这是定义表格的元素，是表格的“身份证”。网页中有几张表格那就有几对此元素。

2.<TR></TR> 这是用来定义表格中“行”的元素。即：表格中行的“身份证”。在表格中有几对此元素就表示当前表格中有几行。尾标签</tr>在后面仍有衔接的<tr>时可以省略

3.<TD></TD>是表示一行中单元格的元素。一行中有几对此元素，就有几个单元格。

4.<TD ROWSPAN=x>插入对象</TD>表示在纵向上合并x行；

5.<TD COLSPAN=x>插入对象</TD>表示在水平方向上合并x列

6.bgcolor=red 　表格的背景颜色；borderColor=green　表格的边框颜色

7.<TH>表头</TH> 定义表头表头内容置于<TH>和</TH>之间，显示时呈粗体字形式

8.<CAPTION > </CAPTION> 建立表格的标题，通过ALIGN属性定义标题的位置，其属性有四：即top（在表格上方）、bottom（在表格下方）、left（在表格的左上方）、right（在表格的右上方）。

【分解制作要领】

1 表格某行各列单元格通跨

单元格1
单元格2	单元格3	单元格4

代码如下:

2：只横跨其中两列单元格

单元格1		单元格2
单元格3	单元格4	单元格5

代码如下:

3 纵向跨越三行单元格

单元格1	单元格2	单元格3
	单元格4	单元格5
	单元格6	单元格7

代码如下:

4 纵向跨越两行单元格

单元格1	单元格2	单元格3
单元格1	单元格4	单元格5
单元格6	单元格7	单元格8

代码如下:

5 横跨两列单元格、纵跨两行单元格

单元格1	单元格2	单元格3
单元格4	单元格5	单元格6	单元格7
单元格4	单元格8	单元格9	单元格10

代码如下:



		天天快乐欢迎您的光临指导，愿您健康快乐幸福永远！

评论这张

转发至微博

阅读(3823)| 评论(17)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083064085095086074092082081095087095087066082080083070',
              blogTitle:'高级表格的制作及语法解析',
              blogAbstract:'<P align=\"center\" \>  <TABLE title=\"《高级表格的制作及语法解析》天天快乐欢迎您\" borderColor=\"#cc9900\" cellSpacing=\"35\" borderColorDark=\"#cc9900\" cellPadding=\"0\" width=\"650\" align=\"center\" background=\"http://img.bimg.126.net/photo/0R0FbE7lSeAeE0yf_qdJsQ==/4232257749822448209.jpg\" border=\"0\" \>  <TBODY\>  <TR\>  <TD\><BR\>  <TABLE title=\"《高级表格的制作及语法解析》天天快乐欢迎您\" height=\"0\" cellSpacing=\"0\" cellPadding=\"0\" width=\"10\" background=\"http://img.bimg.126.net/photo/H_nZomf1qarafiT00YxG2A==/2557763113370367136.jpg\" border=\"0\" \>  <TBODY\>  <TR\>  <TD\>  <DIV align=\"center\" \>  <TABLE title=\"《高级表格的制作及语法解析》天天快乐欢迎您\" borderColor=\"white\" height=\"0\" cellSpacing=\"2\" borderColorDark=\"#cc9900\" cellPadding=\"0\" width=\"335\" borderColorLight=\"#000000\" background=\"http://img.bimg.126.net/photo/SkgZUeFb0ZdUudYOqAFaaw==/575616327374159119.jpg\" border=\"1\" \>  <TBODY\>  <TR\>  <TD\>  </TD\></TR\></TABLE\></DIV\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></P\>',
              blogTag:'',
              blogUrl:'blog/static/39616655200911382613385',
              isPublished:1,
              istop:false,
              type:1,
              modifyTime:1316787237778,
              publishTime:1259938406274,
              permalink:'blog/static/39616655200911382613385',
              commentCount:17,
              mainCommentCount:17,
              recommendCount:5,
              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/39616655200911382613385">${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 - 订阅此博客

天天快乐

导航

日志

高级表格的制作及语法解析

历史上的今天

最近读者

热度

评论

页脚