乐乎88llbb.lofter.com

日志

关于我

蓝波

i noh ss!w I

文章分类

Table属性与应用

2009-12-07 22:17:49| 分类：代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

《Table属性与应用》

【蓝波编写】

·转载者不得删减内容不得改变结构！

<table>的属性

border ：表格的边框。比如，border=1，表示表格边框的粗细为1个像素，为0表示没有边框。

cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing，

表格只有一个单元格，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

cellpadding ：单元格衬距。指该单元格里的内容与cellspacing区域的距离， cellspacing为0，表示单元格里的内容与表格周边边框的距离。

width：表格的宽度。width的取值还可以使用百分比，如widht="100%"。

height：表格的高度，取值方法同width。

bgcolor：表格的背景色。bgcolor=#ff0000 或 bgcolor=red ，<td>单元格也可有此属性。

background：表格的背景图。<td>也有此属性。

bordercolor：表格的边框颜色，当border值不为0时此值有效。取值同bgcolor。

bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

bordercolordark：暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

align：表格的对齐方式，值有left（左对齐）、center（居中）以及right（右对齐）。

<table>属性的应用

1、 table 的属性是根据需要来取舍的，如我需要背景图片（用我头像），那么，我们就把背景图片属性代码 background 加到<table>里面去，代码如下：

<tbody>

<tr>

<td>

<p> 蓝波欢迎您！</p></td></tr></tbody></table>

（这也是最原始最简单的“图片上加文字的方法”）

1、效果：

蓝波欢迎您！

2、我们看到1效果并不理想，那么，我们再试着加上边框属性border、宽度属性width 、高度属性height ，文字也变成大号会移动的粉色字体，代码如下：

<tbody>

<tr>

<td>

<p><marquee direction=left scrollamount=3><font color=#ff00ff size=5> 蓝波欢迎您！</font></marquee></p></td></tr></tbody></table>

2、效果：

蓝波欢迎您！

3、其它属性应用不多累述，可以参看本博日志【表格大全】。

<table>

...

</table>这对代码的基本架构

因为<table> </table>是一对表格框架代码，所以它必须有横竖骨架来组成，也就是常说的行和列，所以最基本的代码样式是：

<table>

<tbody>

<tr>

<td>

这里写入图片、文字、音画...等等内容代码

</td>

</tr>

</tbody>

</table>

简解：

1、<table> 标签表示HTML表头；

2、<tbody>标签表示HTML表体；

3、<tr>表示行

4、<td>表示列

<table>

常用到的几种基础代码组合

1、图片加播放器组合。代码如下↓ 效果在右→

（注：播放器的位置，可以简单用增减 <P> </P> 这对代码来调节。有关更多播放器的特效代码和属性注解，可参看本博日志《WMP播放器款式及代码》！）

2、图片叠加flash自合。代码如下↓效果在右→

（注：这个代码和1是一样的，只是把音乐地址改成flash地址即可！）

3、图片文字flash组合。代码如下↓ 效果在右→

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=flash地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ><MARQUEE scrollAmount=3><FONT color=#ffff00 size=4>我就知道您会来！看看这花多美啊~！</FONT></MARQUEE></P></TD></TR></TBODY></TABLE>

（注：编代码1的时候说到用<P> </P> 这对代码来调节位置，其实它就是一对段落代码，可以在其中写入各种内容！）

我就知道您会来！看看这花多美啊~！

4、日志背景制作组合。代码如下↓ 效果在右→

...... 这里写日志内容

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

（注：在上面说了 TABLE 的基础架构代码，这个组合就是在一个架构代码中嵌入一个架构代码，再嵌入一个... 直到满足需要，这里给出的是三对不同颜色的代码。有关这个组合的详细讲解，可以参考本博日志《日志背景的制作》！）

《雪》

下雪了

越来越大

真的

还没见过这么大的

大啊

太大了

.。。。。。

·若要熟练掌握TABLE的使用，编出更复杂更漂亮的效果，
只要多琢磨多练习，那也不是什么难事！

评论这张

转发至微博

阅读(3444)| 评论(16)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083064080081085070092095085095085087089066086081087071',
              blogTitle:'Table属性与应用',
              blogAbstract:' \r\n<TABLE border=\"1\"  width=\"100%\"   bgColor=\"#e1f3ff\"  \>\r\n<TBODY\>\r\n<TR\>\r\n<TD colSpan=\"3\"  \>\r\n<DIV align=\"center\"  \><B\><FONT color=\"#993366\"  size=\"5\"  \>《Table属性与应用》</FONT\></B\></DIV\>\r\n<DIV align=\"center\"  \><A target=\"_blank\" href=\"http://88llbb.blog.163.com/\"  \><FONT color=\"#0000ff\"  size=\"3\"  \>【蓝波编写】</FONT\></A\></DIV\>\r\n<DIV align=\"center\"  \><FONT color=\"#339966\"  size=\"3\"  \>·转载者 不得删减内容 不得改变结构！</FONT\></DIV\></TD\></TR\>\r\n<TR\>\r\n<TD width=\"10%\"   align=\"middle\"  \><STRONG\><FONT color=\"#993366\"  size=\"4\"  \><table>的属性</FONT\></STRONG\></TD\>\r\n<TD colSpan=\"2\"  \>\r\n<P\><FONT size=\"2\"  \><BR\><FONT color=\"#ff00ff\"  \>border </FONT\><FONT color=\"#000000\"  \>：</FONT\>表格的边框。比如，border=1，表示表格边框的粗细为1个像素，为0表示没有边框。 <BR\><BR\><FONT color=\"#ff00ff\"  \>cellspacing<FONT color=\"#000000\"  \>：</FONT\> </FONT\>单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing， </FONT\></P\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/118127142009117101749236',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1422170801650,
              publishTime:1260195469236,
              permalink:'blog/static/118127142009117101749236',
              commentCount:16,
              mainCommentCount:16,
              recommendCount:1,
              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:'i noh ss!w I',
              hmcon:'0',
              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/118127142009117101749236">${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 - 订阅此博客

乐乎88llbb.lofter.com

导航

日志

Table属性与应用

历史上的今天

最近读者

热度

评论

页脚