您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页素材>>>网页制作实例教程>>>HTML教程——步步为营之三
HTML教程——步步为营之三
发表日期:2009/11/6 21:04:00 出处:网络 作者:未知 发布人:zhang9607lin 已被访问 2335



本教材是参照黑马老师的“HTML帖子制作教程 ”编写而成。是为了给来本网站发帖,而不会做网页的朋友提供无偿服务,面向初学者编写的。如果朋友们用心去学习,这个教材一定能让你作出一个漂亮的图文并茂的帖子。所谓步步为营,就是不要急于求成,耐心的一步一步学,一步一步的练,你一定会成功的!

 

    表格的嵌套

 

    论坛所有精美的帖子,几乎无一例外地都用到表格的嵌套技术,只有通过表格的修饰,帖子才能既成为独立的显示单位,又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色,兼管帖子的布局的同时还承载着表达帖子信息元素的重任。

    表格作为容器,期本身也是可以放置在表格中的元素。因此就有了表格的嵌套。表格的嵌套还可以是另外的形式,那就是,一个表格的单元格里还有表格。不论是哪种形式的嵌套,理论上嵌套的层可以是无穷尽的,但现实中并不会这么做,我们总是根据需要有限制地使用嵌套。

    表格嵌套其实也不复杂。如果你能够独立用代码做一张表格(强烈建议练出这样的本事),那么,你就可以做一个两张表格的嵌套,很简单,把代码复制一下,粘贴在原代码的<td>和</td>之间(亦即在“和”的位置)。

实例:

   请看以下代码和两个表格的嵌套效果:

<table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
 <tr>
   <td>
表一
   
  <table border=1 cellpadding=0 cellspacing=0 width=450 height=200 align=center><tbody>
      <tr>
        <td>表二</td>
      </tr>
    </tbody></table>
 </td>
 </tr>
</tbody></table>

表一

表二

 

两层边框(两张表格的嵌套

Table No.1(Father Table)


Table No.2(Son Table)

Table No.1(Father Table)

代码:

<table border=8 bordercolor=#0099cc width=100%>
<tbody>
  <tr>
   <td>Table No.1(Father Table)
    <table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>
    Table No.1(Father Table)
   </td>
  </tr>
</tbody>
</table>


3.三层边框(三张表格的嵌套)

 

代码:

 

<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
  <TR>
   <TD>
    
<TABLE borderColor=#cc9966 width="100%" border=8>
     <TBODY>
      <TR>
       <TD>
        
<TABLE borderColor=#003300 height=200 width="100%" border=8>
         <TBODY>
          <TR>
           <TD></TD>
          </TR>
         </TBODY>
        </TABLE>
       </TD>
      </TR>
     </TBODY>
    </table>
   </td>
  </tr>
</tbody>
</Table>

    以上是黑马老师教的表格制作方法及代码

 

     四个边框(四个表格嵌套,加背景)

 

 

 

代码:

<TABLE borderColor=#6633ff cellPadding=10 width="100%" bgColor=#cccc00 background=http://www.alles.or.jp/~queen/webgraph/bg/image/star_kabe_01.jpg border=0>
<TBODY>
 <TR>
  <TD>
   <TABLE borderColor=#cc9966 width="100%" border=8>
    <TBODY>
     <TR>
      <TD>
      
<TABLE borderColor=#663388 height=200 width="100%" border=8>
        <TBODY>
         <TR>
         <TD>
          <TABLE borderColor=#003300 height=200 width="100%" border=8>
           <TBODY>
            <TR>
             <TD>
             <TABLE borderColor=#556633 height=100 width="100%" border=8>
              <TBODY>
               <TR>
                <TD>

                </TD>

               </TR>

              </TBODY>

             </TABLE>

            </TD>

           </TR>

          </TBODY>

         </TABLE>

        </TD>

       </TR>

      </TBODY>

     </TABLE>

    </TD>

   </TR>

  </TBODY>

 </TABLE>

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

 

多单元格表格嵌入示例

 

上下表格嵌套:

 

    表格的嵌套  这是由三个表格嵌套而成,灰色的为一级格(父格),另外两个为二级格(子格及他们包含在一级格内)一上一下,这两个完整的二级表格代码是一上一下并列放在一级表格内,即放在一级表格的<td>·····</td>之间的。

 

 

    祝大家开心快乐!

 

  欢迎光临心缘之梦!

 

代码:

 

<table border=6 bordercolor=#888888 width="100%">
  <tbody><tr><td>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td>
加入内容</td></tr></tbody>
    </table>

    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td>
加入内容</td></tr></tbody>
    </table>
  </td></tr></tbody>
</table>

 

请注意它们之间的关系。

加入背景的嵌套表格

       学习要循序渐进!
   只要用心,你一定会学得最好!

 

代码:

 

<TABLE borderColor=#888888 width="100%" border=6>
 <TBODY>
  <TR>
   <TD>
      <TABLE height=200 borderColorDark=#663399 cellPadding=2 width="100%"    bgColor=#cccc00 borderColorLight=#008000 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif border=10>
         <TBODY>
          <TR>
           <TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<FONT color=#7fff00 size=5><EM>
学习要循序渐进!</EM></FONT>

           </TD>

          </TR>

         </TBODY>

     </TABLE>
  
   <TABLE height=200 borderColorDark=#ff00cc cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B264505797.gif border=10>
       <TBODY>
         <TR>
           <TD>&nbsp;&nbsp;&nbsp;<FONT size=5><U><FONT color=#ff8c00>
只要用心,你一定会学得最好!</FONT></U></FONT>

           </TD>

         </TR>

       </TBODY>

     </TABLE>

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

 

表 格 应 用 示 例 代 码 之 一

 

 

 

    本节黑马举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码,这些代码得出的是本示例的整体外观效果,内容需要你自己往里添加,黑马添加的是此说明和本示例的代码,纯文字。

<table border=1 bordercolor=#363636 cellpadding=20 cellspacing=0 bgcolor=#dd6969 align=center width=600><tr><td bordercolor=#ff0000>
  <table border=1 bordercolor=#696969 cellpadding=10 cellspacing=0 bgcolor=#aa1212 width="100%"><tr><td bordercolor=#aa1212>
    <table border=0 cellpadding=10 cellspacing=0 bgcolor=#ffffff width="100%"><tr><td>
      <table border=0 cellpadding=10 cellspacing=0 bgcolor=#dd6969 width="100%" height=40 align=center><tr><td>
<p align=center><font face=黑体 size=4 color=#ffcc00>标 题</font></p>
      </td></tr></table>
      <table border=0 cellpadding=0 cellspacing=0 width="100%" height=10 bgcolor=#ffffff><tr><td></td></tr></table>
      <table border=0 cellpadding=0 cellspacing=10 bgcolor=#393939 width="100%" height=450 align=center><tr><td valign=top>
<p><font color=#ffffff>内容</font></p>
      </td></tr></table>
    </td></tr></table>
  </td></tr></table>
</td></tr></table>

    如果你还没有熟悉到一看代码就明白,你有必要看一下下面的分析。

    本例有四层表格的嵌套,总共使用了六张表格。最里层是三张表格上下排列,属表格组合。我们从外往里分析代码。

    最外层的表格,我们设置边框值为1并定义其颜色,这样,配合<td>的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距(cellpadding)为20,它恰好形成了帖子外边框。外表的宽度为600个像素,这是根据本页面而设置的,你可以在实际使用时更改。

    第二层表格的原理和外层的差不多,只是,我们更改了各元素的颜色,单元格衬距也调小了,cellpadding赋值为10

    第三层表格没有做太多的设置,我们仅令其背景色为白色、单元格衬距为10,这样得出一个白色的边框。

    第四层表格有三个上下并列组合的表格。第一个用来放帖子的标题;第二个表格只是用于隔开第一个和第三个表格并令之与第三层白色底的表格连为一体,为此它的bordercellpadingcellspacing都需要设置为0,高度则为10(与第三层表格所形成的边框一致);第三个表格用于放置帖子的内容,故将其单元格间距设置为10(也可设置单元格衬距),以便让文字等内容不至于太靠边。

   

      

相爱的双方是心灵深处的相互沟通与谅

   

网络让我们相遇,

相识,相知,

我们虽然相距很远很远,

但是网手把我们拉的很近很近,

也许我们今生无缘相见,但是我们心心

,因为我们付出了真心,

 我们是一生的朋友,

 

     




 
 

 

 

 左右表格嵌套

 

     

   这也是在一级表格(父格)内放有两个表格。但这与上述的两个表格是有区别的,是左右两个表格,首先要用两个“<td>……</td>”将一级表格(父格)分隔成左右部分,在分别在这个两个部分中加入一个完整的表格,便是如下效果。

 

      你学会了吗?

               不会也没关系,慢慢来,

      先搞清楚它们之间的关系

 

 

 

<TABLE borderColor=#ccffcc width="100%" border=4>
<TBODY>
  <TR>
  
<TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    
<TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>

加入背景的嵌套表格

 

 
 

 

 

 

 

<TABLE borderColor=#cc66cc width="100%" border=4>
<TBODY>
  <TR>
  
<TD width="50%">
    <TABLE borderColor=#336699 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    
<TABLE borderColor=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>

 

 

 

<TABLE borderColor=#cc66cc width="100%" border=4>
<TBODY>
  <TR>
  
<TD width="25%">
    <TABLE borderColor=#336699 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="25%">
    
<TABLE borderColor=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>

<TD width="25%">
    <TABLE borderColor=#336699 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="25%">
    
<TABLE borderColor=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>

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

    左右嵌套表格和多表格嵌套一定要注意给出其中各个小表格的宽度的值,<TD width="100%">列的代码中给出各个小表格宽度。如第一个表格中的左右两个小表格的宽度分别为“<TD width="50%">,而在添加的完整的表格中的宽度则是< width="100%">。可以用百分比来设定,也可以用像素来设定,但最后各小表格给出的宽度总和一定等于“父表格”的、宽度。各小表格的高度给出一个就可以了。


   多表格嵌套:

   只要用心,你一定会学得最好!
学习要循序渐进!
只要用心,你一定会学得最好!
 

 

<TABLE borderColor=#363636 cellSpacing=0 cellPadding=20 width=600 align=center bgColor=#dd6969 border=1>
<TBODY>
<TR>
<TD borderColor=#ff0000>
<TABLE borderColor=#696969 cellSpacing=0 cellPadding=10 width="100%" bgColor=#aa1212 border=1>
<TBODY>
<TR>
<TD borderColor=#aa1212>
<TABLE height=200 borderColorDark=#ff00cc cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B264505797.gif border=10>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;<FONT size=5><U><FONT color=#ff8c00>只要用心,你一定会学得最好!</FONT></U></FONT> </TD></TR></TBODY></TABLE>
<TABLE height=200 borderColorDark=#663399 cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#008000 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif border=10>
<TBODY>
<TR>
<TD><FONT color=#7fff00 size=5><EM>学习要循序渐进!</EM></FONT> </TD></TR></TBODY></TABLE>
<TABLE height=200 borderColorDark=#ff00cc cellPadding=2 width="100%" bgColor=#cccc00 borderColorLight=#ffcc66 background=http://www.53520.com/bbs/tp/1/4B264505797.gif border=10>
<TBODY>
<TR>
<TD><FONT size=5><U><FONT color=#ff8c00>只要用心,你一定会学得最好!</FONT></U></FONT> </TD></TR></TBODY></TABLE>
<TABLE borderColor=#cc66cc width="100%" border=4>
<TBODY>
<TR>
<TD width="25%">
<TABLE borderColor=#336699 height=300 width="100%" background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif border=4>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width="25%">
<TABLE borderColor=#ffcc66 height=300 width="100%" background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif border=4>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD width="25%">
<TABLE borderColor=#336699 height=300 width="100%" background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif border=4>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD width="25%">
<TABLE borderColor=#ffcc66 height=300 width="100%" background=http://www.53520.com/bbs/tp/1/4B26169335.9.gif border=4>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 



 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



qinqin7017
(2007/9/19 20:21:00)

谢谢.我己收藏了

 发表评论:共有 1 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

闪客公寓休闲娱乐网 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:340623306 联系人:王小华