好友

享受生命，享受健康，享受快乐，享受幸福！

日志

关于我

好友

一个善解人意,宽宏大量,包容一切,非常随和的老人。

文章分类

文本表格代码的扩展应用

2011-10-24 17:19:47| 分类：【博客代码】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

文本表格代码的扩展应用

充分利用表格的单元格能够做出一些意想不到的效果。事实上，表格的组成元素中，可视部分的核心元素就是单元格，它由表线规范起来，成为一个个可装载各种内容的容器。在一个表格里，作为容器的单元格可以是多个的，也可以只是一个。此前我们所讲的表格嵌套，基本上是由一个父表格加上若干个并列关系或从属关系的子表格组合而成，而这次，我们将讨论一个含有多个单元格的表格的实现方法以及单元格里与其他表格的嵌套问题。

在HTML语法中，单元格由是这样实现的：
<tr>
<td>要加载的内容</td>
</tr>

以上语法不能独立使用，它们必须放在<table></table>或者<tbody></tbody>中间。<table><tbody>和</tbody></table>之间可以有多个<tr><td></td></tr>即多个单元格，<tr>和</tr>之间又可以有多个<td>...</td>构成一行中的单元格。单元格里又可以加载各种合法的内容。比如，我们可以在上面的“要加载的内容”里加上另外的表格(子表格)，就形成了表格的高级嵌套，组合出相对复杂的效果。

我们先来看看一个简单的多单元格的表格实例：

这个是3×3的表格，即，有9个单元格的表格。完整代码如下：

代码如下:

<table border="1" cellpadding="3" cellspacing="5" width=450>
<tr>
   <td bgcolor=#99ee33 width=35><FONT color=#ffffff size=4>1 </FONT></td>
   <td bgcolor=#cc66dd width=380><FONT color=#ffffff size=4>2 </FONT></td>
   <td bgcolor=#ff0099 width=35><FONT color=#ffffff size=4>3 </FONT></td>
</tr>
<tr>
   <td bgcolor=#00cc00 width=35><FONT color=#ffffff size=4>4 </FONT></td>
   <td bgcolor=33DD88 width=380><FONT color=#ffffff size=4>5 </FONT></td>
   <td bgcolor=#ff77cc width=35><FONT color=#ffffff size=4>6 </FONT></td>
</tr>
<tr>
   <td bgcolor=#88cc00 width=35><FONT color=#ffffff size=4>7 </FONT></td>
   <td bgcolor=33aa88 width=380><FONT color=#ffffff size=4>8 </FONT></td>
   <td bgcolor=#cc77cc width=35><FONT color=#ffffff size=4>9 </FONT></td>
</tr>
</table>

显示:

1 2 3

4 5 6

7 8 9

你会说：这有什么？这只不过是一个普普通通的表格。呵呵，是的，它是一个普通的表格，而且很简单。但还是请你看看下面表格的效果，它只是在上面表格的基础上做了些更改：

.

　　　

　

　

　　　

你可能又会说：这也没什么呀！不过是把border等值设置为0，把单元格的高度和单元格的颜色改变了而已。

是的。但是，如果我把第五个单元格<td>里的bgcolor=……改为background=……，再加载相应内容，它的外观就大为不同了.

从上面表格中应该可以看出：我们是在第5个单元格里再嵌套一个带有背景图的表格，这才是本节的核心内容。全部代码如下：

代码如下:

<table border="1" cellpadding="0" cellspacing="0" width=445>
   <tr>
     <td bgcolor=#99ee33 width=35 height=35>　</td>
     <td bgcolor=#99ee33 width=495>　</td>
     <td bgcolor=#99ee33 width=35>　</td>
   </tr>
   <tr>
     <td bgcolor=#99ee33 width=35 height=200>　</td>
     <td bgcolor=#cc66dd width=495>
     <table align=center background=http://znrs.2000y.net/UploadFile/2004-6/200462114271074.gif border=0 cellpadding=0 cellspacing=0 width=495 height=325>
     <tbody><tr><td></td></tr></tbody></table>
     </td>
     <td bgcolor=#99ee33 width=35>　</td>
   </tr>
   <tr>
     <td bgcolor=#99ee33 width=35 height=35>　</td>
     <td bgcolor=#99ee33 width=395>　</td>
     <td bgcolor=#99ee33 width=35>　</td>
   </tr>
</table>

小结：

一、介绍用HTML制作多单元格的表格，表格中的每一行由<tr>...</tr>组成，<tr>...</tr>里用<td>...</td>构成单元格，有多少个<td>...</td>，一行里就有多少列，有多少个<tr>...</tr>，表格就有多少行。

二、在<td>...</td>的省略号部分，我们可以加载所需内容，当我们加载一个完整的<table>...</table>语法时，我们实际上是在一个单元格里嵌套了一张表格。

表格的并列组合

        并列组合，就是表与表之间的关系不是从属关系，亦即，它们不是嵌套在一起的，而是以并排或上下的形式组合在一起。为了容易规范以并列关系组合起来的表格整体，我们把这些组合起来的表格放在一个表格里面，因此，本讲依然与表格的嵌套有关，只是，表格的嵌套不再是本讲的主要内容。

三个并排起来的表格并不难以实现。以下的三个表格实例是紧密并排在一块的，它们都是子表格，换句话说，它们是放在一张父表里。请研究一下表格效果与代码：

代码如下:
<P align=center>

<table align=center border=1 cellspacing=0 cellpadding=0 width=500> <tbody><tr><td>

<table align=left border=1 cellspacing=0 cellpadding=0 width=30 height=150>
<tbody><tr><td>
<center>表<br>一</center>
</td></tr></tbody>
</table>

<table align=left border=1 cellspacing=0 cellpadding=0 width=440>
<tbody>
<tr>
<td height=30><center>表二(单元格1)</center></td>
</tr>
<tr>
<td height=118><center>表二(单元格2)</center></td>
</tr>
</tbody>
</table>

<table align=left border=1 cellspacing=0 cellpadding=0 width=30 height=150>
<tbody><tr><td><center>表<br>三</center></td></tr></tbody>
</table>

</td></tr></tbody></table>

显示:

表
一

表二(单元格1)

表二(单元格2)

表
三

上面的表格实例应该说是一目了然的。表一和表三分别位于左边和右边，它们只是一个非常简单的表格；表二有两个高度不一致的单元格，位于表一和表三之间。这三个表格以典型的并排关系组合在一起，它们作为套在一个父表里的子表格，其相互间的关系是并列的而不是从属的(不过它们一起从属于其所在的父表格)。表格代码的易读性也很理想，只有两个地方需要说明：一是，表二第二个单元格的高度设置为118，这是因为，表二的边框我们设置为1，既然表里有两个单元格，单元格的边框占用两个单位(即2)，那么，从整齐角度出发，这个单元格的高度需要减去2。事实上，宽度也应该这么计算的，虽然代码中并未做相应处理；二是，三个表格我们都用了align=left来规定位置，而不是我们想当然的一个用left，一个用center，另一个用right。原因很简单：让它们紧密靠在一起。

以上讲的是让几个表格并排在一起的组合方法。下面讲一讲上下排列的组合方法。

我们以上面的表格实例当作一个表格单位(事实上它们是套在一张表格里面的，我们这样看待它是未尝不可的)，在它的下面再放置一张宽度和它一致的表格，从而组合成一个相对复杂的实例。为了便于观察，我们先来看看即将使用的表格式样：

代码如下:

<P align=center>
<table border=1 cellspacing=0 cellpadding=0 width=500 height=200>
<tbody>
<tr>
<td width=30 height=100><center>表<br>四<br>单<br>1</center></td>
<td width=440 height=100><center>表四(单元格2)</center></td>
<td width=30 height=100><center>表<br>四<br>单<br>3</center></td>
</tr>
<tr>
<td width=30><center>表<br>四<br>单<br>4</center></td>
<td width=440><center>表四(单元格5)</center></td>
<td width=30><center>表<br>四<br>单<br>6</center></td>
</tr>
</tbody>
</table>

</td></tr></tbody>
</table>

显示:

表
四
单
1 表四(单元格2) 表
四
单
3

表
四
单
4 表四(单元格5) 表
四
单
6

这不是一个复杂的表格，我们在上一讲已经熟悉它了。现在我们要做的是把这张表格与上面的组合表格整合起来。整合操作也不复杂，需要注意的是，我们需要有整体概念，随时随地地把任意一个组合体看成一个整体，而一个整体在某时它又只是一个组合体的成员。——呵呵，抽象吧？不要紧，关键是操作。

代码总是枯燥的，读着读着我们会头晕。但是，要想深入研究，我们不得不读代码。代码与实效结合起来，阅读起来会容易一些：

代码如下:

<table align=center border=0 cellspacing=0 cellpadding=0 width=500> <tbody><tr><td>
<table align=center border=0 cellspacing=0 cellpadding=0 width=500> <tbody><tr><td>

<table align=left border=1 cellspacing=0 cellpadding=0 width=30 height=150>
<tbody><tr><td>
<center>表<br>一</center>
</td></tr></tbody>
</table>

<table align=left border=1 cellspacing=0 cellpadding=0 width=440>
<tbody>
<tr>
<td height=30><center>表二(单元格1)</center></td>
</tr>
<tr>
<td height=118><center>表二(单元格2)</center></td>
</tr>
</tbody>
</table>

<table align=left border=1 cellspacing=0 cellpadding=0 width=30 height=150>
<tbody><tr><td><center>表<br>三</center></td></tr></tbody>
</table>

</td></tr></tbody></table>

<table border=1 cellspacing=0 cellpadding=0 width=500 height=200>
<tbody>
<tr>
<td width=30 height=100><center>表<br>四<br>单<br>1</center></td>
<td width=440 height=100><center>表四(单元格2)</center></td>
<td width=30 height=100><center>表<br>四<br>单<br>3</center></td>
</tr>
<tr>
<td width=30><center>表<br>四<br>单<br>4</center></td>
<td width=440><center>表四(单元格5)</center></td>
<td width=30><center>表<br>四<br>单<br>6</center></td>
</tr>
</tbody>
</table>

</td></tr></tbody>
</table>

显示:

表
一

表二(单元格1)

表二(单元格2)

表
三

表
四
单
1 表四(单元格2) 表
四
单
3

表
四
单
4 表四(单元格5) 表
四
单
6

我们已经知道，表格可以有背景图，表格的单元格也可以有背景图，那么，如果我们制作或找到合适的图片，分别用作表一、表二单元格1、表三、表四单元格1表四单元格3、表四单元格4、表四单元格5和表四单元格6的背景，再将所有表格的border等值取值为0，然后在表二单元格2和表四单元格2放置其他内容，得出的组合效果就相当完美，你甚至不能看出它是一个表格组合。

代码如下:

<P align=center>.

<table align=center border=0 cellspacing=0 cellpadding=0 width=453> <tbody><tr><td>
<table align=center border=0 cellspacing=0 cellpadding=0 width=453><tbody><tr><td>

<table align=left border=0 cellspacing=0 cellpadding=0 width=29 height=215 background=http://znrs.2000y.net/UploadFile/2004-6/2004623101015472.gif><tbody><tr><td></td></tr></tbody></table>

   <table align=left border=0 cellspacing=0 cellpadding=0>
     <tbody>
     <tr>
       <td height=20 width=395 background=http://znrs.2000y.net/UploadFile/2004-6/2004623101015617.gif></td>
     </tr>
     <tr>
       <td bgcolor=#000000 height=195 width=395>
       <table align=center border=0 cellpadding=0 cellspacing=0 background=http://www.2000y.net/109348/../../admin/uploadpic/2004512182055811.gif width=94 height=112><tbody><tr><td></td></tr></tbody></table>
       </td>
     </tr>
     </tbody>
   </table>

   <table align=left border=0   width=25 height=215 background=图片地址   cellspacing=0 cellpadding=0>
     <tbody><tr><td></td></tr></tbody>
   </table>

</td></tr></tbody></table>

   <table border=0 cellspacing=0 cellpadding=0>
     <tbody>
     <tr>
       <td width=29 height=263 background=图片地址>　</td>
       <td width=395 height=263   background=图片地址>　</td>
       <td width=25 height=263 background=图片地址>　</td>
     </tr>
     <tr>
       <td width=25 height=25 background=图片地址>　</td>
       <td width=395 height=25 background=图片地址>　</td>
       <td width=25 height=25 background=图片地址>　</td>
     </tr></tbody></table>
</td></tr></tbody> </table>

在网页制作中，表格经常用于整体布局之用，它们就是以并列+嵌套的方式组合起来的，制作帖子也大量使用表格的并列+嵌套形式的组合。通过观察表格组合的实例和分析代码，相信大家会慢慢熟悉和掌握表格的组合与嵌套的高级应用。

博客知识
博览群书
健康养生

美食天地

美文美诗

感悟哲理

电脑知识

幽默笑话

经典音乐
图文赏析
人生感悟

日记边框

百科知识

flash音画



五花八门

民间验方

评论这张

转发至微博

阅读(234)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087067085082084075092084084075072087082075085081095071083086',
              blogTitle:'文本表格代码的扩展应用',
              blogAbstract:'  <TABLE style=\"LEFT: -120px; WIDTH: 750px; TOP: 0px;\"  cellSpacing=\"35\" align=\"center\" background=\"http://img.bimg.126.net/photo/nr32yFZO6Wt94gF46uQvRA==/4251116573261796186.jpg;\" border=\"0\" \>  <TBODY\>  <TR\>  <TD\>  <DIV align=\"center\" \>  <DIV\>  <DIV align=\"center\" \>  <TABLE width=\"99%\"  background=\"http://img775.ph.126.net/W0ZtSl9pWnlHGULFu1yN7g==/4856569248166039304.jpg\" \>  <TBODY\>  <TR\>  <TD width=\"100%\"  \>  <DIV align=\"center\" \>  <CENTER\>  <P style=\"TEXT-INDENT: 2em;\"  \>  <TABLE style=\"BORDER-COLLAPSE: collapse;\"  borderColor=\"#111111\" cellSpacing=\"3\" cellPadding=\"0\" width=\"90%\"  background=\"http://www.spiritisup.com/truesungold.jpg\" border=\"1\" \>  <TBODY\>  <TR\>  <TD width=\"100%\"  \>  <DIV align=\"center\" \>  <CENTER\>  <P align=\"center\" \>  </P\></CENTER\></DIV\></TD\></TR\></TABLE\></P\></CENTER\></DIV\></TD\></TR\></TABLE\></DIV\></DIV\></DIV\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/13817947020118283849680',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1319447987370,
              publishTime:1319447987333,
              permalink:'blog/static/13817947020118283849680',
              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/13817947020118283849680">${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 - 订阅此博客

好友

导航

日志

文本表格代码的扩展应用

历史上的今天

最近读者

热度

评论

页脚