蓝天博客

（正在更新中......知识的海洋休闲的乐园

日志

边框表格解析制作精要

2009-03-09 10:48:27| 分类：【博客技巧】 | 标签： |字号大中小订阅

上图代码如下

<TABLE cellSpacing=0 borderColorDark=#FF0000 cellPadding=6 width=600 borderColorLight=#FF0000 background=http://img.blog.163.com/photo/j7WUuYZcGyH1bw7pMCQVeg==/2030279007014307051.jpg border=3>

<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#FF0000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313595718.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://img.blog.163.com/photo/oN_nFE9E9QRw-5tmxXMRhQ==/5429652300749104466.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://img.blog.163.com/photo/hsKrA_6sLhzBN3JNVH6Fag==/1705175408913569460.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://img.blog.163.com/photo/PFDxwoiNrj8piPXB9KhTiQ==/3702803318628988463.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=11 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813141196.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://img.blog.163.com/photo/iHQrFEZH8fhR8_EDX_zCgQ==/2549318864068760027.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=0 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135611790.jpg border=1>
<TBODY>
<TR>
<TD>

<P align=center><img
src="http://img.bimg.126.net/photo/ME-G_ARpUZWWcxevgs4ctQ==/3393462319225021832.jpg
+ZG+JLS+KPB+ZYB+" width=500></p>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

语法解析如下
边框标记格式为＜table＞<tbody>＜tr＞＜td＞插入内容＜/td＞＜/tr＞</tbody>＜/table>

属性有：

table是标签名；border=1表格边框的厚度或宽度；

cellSpacing=6 两个单元格之间的距离  ；

cellpadding=11单元格内部内容与格线之间的距离；
borderColorDark=#FF0000 设定表格暗边框颜色；

borderColorLight=#FF0000 设定表格亮边框颜色
bgcolor=#fff000 　表格的背景颜色；

borderColor=#0000ff　边框颜色
background=http://------jpg（gif) 设定该图片为背景色
width=200 表格宽度   也可用x%数表示   也可不设数值，表格将根据单元格里的内容自动定义宽度
height=300 表格高度通常可以不设置，而是让系统根据内容的多少自行设定

以上数字颜色图片地址均可酌情调整

标签命令有：
1．<table></table>分别作起始标识符　这是定义表格的元素，是表格的“身份证”。
网页中有几张表格那就有几对此元素。如果有十对那么就有十张表格。
2． <tr></tr> 这是用来定义表格中“行”的元素。即：表格中行的“身份证”。在表格中有几对此元素就表示当前表格中有几行。

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

4. <tbody></tbody>表格的身体是在table中使用的，一般用<tbody></tbody>来分隔<table>内的代码，以加快网页显示，有时可以省略。

制作方法和要领

一行一列的边框表格制作

效果如下：

蓝天欢迎您

代码：<table border=3 bordercolor= #ADADAD  width=50%>
<tr>
<td>
蓝天欢迎您
</td></tr></table>

内外镶套的两个边框表格制作

效果如下：

蓝天欢迎您

代码：<table bordercolor= #ADADAD   border=2 width=80%>
<tr>
<td>
<table border=2 bordercolorlight=#008000 bordercolordark=#808000 width=100%>
<tr>
<td>
蓝天欢迎您
</td></tr></table></td></tr></table>

内外镶套的三个边框表格制作

效果如下：

蓝天欢迎您

代码：<table  bordercolor= #ADADAD  border=2 width=90%>
<tr><td>
<table border=2 bordercolorlight=#008000 bordercolordark=#808000 width=100%>
<tr><td>

<table border=2   bordercolor=#FF0000 width=100%>
<tr><td>

沧海觅真欢迎您
</td></tr></table> </td></tr></table></td></tr></table>

两行一列的边框表格制作

效果如下：

蓝天欢迎您

蓝天欢迎您

代码：<table bordercolor= #ADADAD  border=2 width=50%>
<tr><td>
蓝天欢迎您</td></tr>
<tr><td>
蓝天欢迎您</td></tr>
</table>

三行一列的边框表格制作

效果如下：

蓝天欢迎您

蓝天欢迎您

蓝天欢迎您

代码：<table bordercolor= #ADADAD  border=2 width=50%>
<tr><td>
蓝天欢迎您</td></tr>
<tr><td>
蓝天欢迎您</td></tr>
<tr><td>
蓝天欢迎您</td></tr>

</table>

一行三列的边框表格制作

效果如下：

蓝天欢迎您蓝天欢迎您蓝天欢迎您

代码：<table bordercolor= #ADADAD  border=2 width=50%>
<tr>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
</tr>
</table>

三行三列的边框表格制作

效果如下：

蓝天欢迎您蓝天欢迎您蓝天欢迎您

蓝天欢迎您蓝天欢迎您蓝天欢迎您

蓝天欢迎您蓝天欢迎您蓝天欢迎您

代码：<table bordercolor= #ADADAD  border=2 width=50%>
<tr>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
</tr>
<tr>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
</tr>
<tr>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
<td> 蓝天欢迎您</td>
</tr>
</table>

三行一列内边框表格镶嵌于一个外边框表格

蓝天欢迎您

蓝天欢迎您

蓝天欢迎您

代码：
<table border=3 bordercolorlight=red bordercolordark=green width=70%>
<tr><td>
<table bordercolor= #ADADAD  border=2 width=100%>
<tr><td>
蓝天欢迎您</td></tr>
<tr><td>
蓝天欢迎您</td></tr>
<tr><td>
蓝天欢迎您</td></tr>
</table>
</td></tr></table>

一种简单的边框制作：音画制作入门---怎样做边框
             搜集整理：蓝天      资料来源：沧海觅真

评论这张

转发至微博

2人 | 分享到：

阅读(864)| 评论(8)| 引用 (20) |举报

图解宽带路由器共享上网设置过程

让你睡眠更香甜的九种食物

历史上的今天

this.p={  m:2,
              b:2,
              id:'fks_085074080095084065081084084095093095085067080087087064',
              blogTitle:' 边框表格解析制作精要',
              blogAbstract:'<P\><EM\><FONT color=#99ccff\></FONT\></EM\> </P\>\r\n<BLOCKQUOTE\>\r\n<P align=center\> </P\>\r\n<P align=center\><A href=\"http://bscx123.blog.163.com/edit/\"\><IMG title=沧海觅真欢迎你 alt=沧海觅真 src=\"http://img.bimg.126.net/photo/ME-G_ARpUZWWcxevgs4ctQ==/3393462319225021832.jpg%20%20+ZG+JLS+KPB+ZYB+\" border=0\></A\></P\>\r\n<P\></P\>\r\n<P align=center\><FONT color=#ff0000\></FONT\> </P\>\r\n<P align=center\><FONT size=4\><STRONG\><FONT color=#ff0000\>上图代码如下</FONT\>  </STRONG\></FONT\></P\>\r\n<P align=center\><TABLE cellSpacing=0 borderColorDark=#FF0000 cellPadding=6 width=600 borderColorLight=#FF0000 background=http://img.blog.163.com/photo/j7WUuYZcGyH1bw7pMCQVeg==/2030279007014307051.jpg border=3></P\>\r\n<P align=center\><TBODY><BR\><TR><BR\><TD><BR\><TABLE cellSpacing=0 borderColorDark=#FF0000 cellPadding=15</P\></BLOCKQUOTE\>',
              blogTag:'',
              blogUrl:'blog/static/99404113200929104827876',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1257726338351,
              publishTime:1236566907876,
              permalink:'blog/static/99404113200929104827876',
              commentCount:8,
              mainCommentCount:6,
              recommendCount:2,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'未设置',
              visitorCity:'未设置',
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              lofter_single:'<a hidefocus="true" target="_blank" href="http://www.lofter.com/touch"><img onload="var nimg = new Image(); nimg.src=\'http://blog.163.com/newpage/images/analyse.png?lofter_single&t=\'+new Date().getTime()" border="0" src="http://b2.bst.126.net/newpage/images/lofter_single4.jpg"/></a>'
            }

{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/99404113200929104827876">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--相关文章--> <#--历史上的今天--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

公司简介 - 联系方法 - 招聘信息 - 客户服务 - 隐私政策 - 博客风格 - 手机博客 - VIP博客 - 订阅此博客

蓝天博客

导航

日志

边框表格解析制作精要

历史上的今天

相关文章

最近读者

评论

页脚

蓝天欢迎您	蓝天欢迎您	蓝天欢迎您
蓝天欢迎您	蓝天欢迎您	蓝天欢迎您
蓝天欢迎您	蓝天欢迎您	蓝天欢迎您