HTML学习教程

一、表格的基本构架

     

    表格是在论坛做帖的重要武器。因为论坛提供给用户操作的区域是非常有限的，用户只能在论坛程序框架好的body 区域里的某个区域施展身手，不能修改body的背景色，更不能介入head的定义，因此，诸如让自己的帖子有底色、底图之类的修饰，用户只能通过表格来实现。表格是一个可自定义的容器，因而它就是我们用以实现帖子构设的利器。

    把表格称作容器源于表格的装载特性。表格是用于装载数据的，与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格，知道表 格有表头、表体、单元格、行、列等等概念，它们并不难理解。而在HTML里，对表格的理解和运用可能会增加一些概念，但也不复杂，只要用心学习一定会很快 掌握的。

    表格不仅仅只能装载数据，它还被广泛地应用于网页的布局，这与其本身的作用有关。它能将其所在区域划分为行和列诸多单元格。表格用于网页布局过去非常流 行，现在仍然深受欢迎，它在网站、论坛做帖有着不可估量的作用。因使用了表格，帖子的页面布局将会随心所欲地排版。

 

 

     表格是一个可自定义的容器。一张完整的表格有表头、表体、单元格、行、列等等元素组成。下面是一个完整的表格标签代码框架：为了一目了然，清晰明白，先不对它的属性进行描述。

 

  
    
       
    
  

 内容 

 

 

标签代码说明：

 

    

： 表格的起始符。任何一个表格都必须以它开头，且必须有终止符 。

    ： 表体的起始符。紧跟在

 之后，表示表体开始。必须有结尾符，放在 之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。

    ： tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。 紧跟在 之后。必须有终止符 。

    ： td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个紧跟在 之后。终止符为 。td与tr配合构成单元格。

    、、、： 这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。

    从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。

下面便是它们的隶属关系

 

  
 
   
      
   
 

内容 

 

二、表格的属性

 

1、 标签中各个元素的属性设置

  

  

标签中所需要设置的元素：

border 表格的边框、cellspacing单元格间距：cellpadding 单元格衬距： width表格的宽度：height表格的高度：bgcolor： 表格的背景色； background： 表格的背景图 ； bordercolor： 表格的边框颜色 ； bordercolorlight： 亮边框颜色 bordercolordark： 暗边框颜色； align： 表格的对齐方式。

 

    如何设置这些属性

    border： 此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素，（默认值）为0表示没有边框。

    cellspacing ： 单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也就是单元格的间距。

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

    width ： 表 格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那 么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，因此在设置表格的宽度时应充分考虑显示分辨率问题。width 的取值还可以使用百分比，如表述方式：widht="100%"，这种赋值法有个好处：即表格的宽度将根据可显示的宽度来自我调整宽度。

    height ： 表格的高度，取值方法同width。提示：如果不是特别需要，可不设置表格的高度，由系统根据表格的内容自动设置高度。如果需要表格的高度精确则要设置，比如，要用表格的背景来发一张图片时，如果表格的高度不精确定义，图片便不可能完整或完美地显示。

    bgcolor ： 表格的背景色。取值方法为：bgcolor=#ff0000 或bgcolor=red 。单元格

 

    
        width="100%">亮边框（bordercolorlight=#008000）与暗边框     （borderColorLight=#008000 ），

       

    

   

 

也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。     background ： 表格的背景图。取值为：background=一个有效的图片地址 。

也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。     bordercolor ： 表格的边框颜色，当border值不为0时设置此值有效。bordercolor =#ff0000或bordercolor =red 。bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。     bordercolorlight ： 亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。取值方法：bordercolorlight =#ff0000 或bordercolorlight =red 。     bordercolordark ： 暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。bordercolordark =#ff0000 或bordercolordark =red 。     align ： 表格的对齐方式，值有left （左对齐，默认）、center （居中）以及right （右 对齐）。align定义的是表格自身的位置，这是一个很有用的属性，建议使用它规定表格的对齐方式，尽量不要使用 表格 、 表格 和表格之类的标签来规定表格的位置，因 为这么做将导致论坛添加许多废码！     此外，当表格的宽度设置为100%，或者，表格的宽度设置成了占满它所在的容器的宽度，没有必要定义align属性。     表格标签的属性较多，使得本节有一定的难度，需要悉心领会并一一记住。     下面给出一个表格式样和代码，表格中有一些简单的说明。   本表格的属性设置： 边框大小：border=1 边框颜色：bordercolor=#ff0000 背景色：bgcolor=#cc9968 表格宽度：width=400 单元格间距：cellspcing=16 单元格衬距：cellpadding=8 表格的对齐方式（居中）：align=center 注：其他属性未设置。     这个表格的代码：   本表格的属性设置： 边框大小：border=1 边框颜 色：bordercolor=#ff0000 背景色：bgcolor=#cc9968 表格宽 度：width=400 单元格间距：cellspcing=16 单元格衬距：cellpadding=8& lt;BR>表格的对齐方式（居中）：align=center 注：其他属性未设置。   练习及实例   实例之一 未设置表格边框的代码,将其放到发文章对话框内看看效果是什么样子?                      内容      实例之二       尚未修饰的“完整的表格”   大家好（在这里添加文字）（可将内容复制粘贴在表格内）以下表格均可用复制粘贴的方法。      可以把文字添加在代码中（也可以复制在做好的表格内）     用100%比定义表格的宽度：      代码：                                 大家好！      用像素定义表格的宽度 width=400 align=center>                   表格里的内容写在这里         实例之三 简单的边框修饰   亮边框（bordercolorlight=#008000）与暗边框 （borderColorLight=#008000 ），      代码：     borderColorDark=#808000 width="100%" borderColorLight=#008000 border=6>

 

    换边框颜色

 

 

亮边框（bordercolorlight=#ff66ff）与暗边框 （borderColorLight=#9966cc ），

 

代码：

 

borderColorDark=#0f66f0 width="100%" borderColorLight=#9966cc border=6>

     

     
         width="100%">亮边框（bordercolorlight=#ff66ff）与暗边框 （borderColorLight=#9966cc ）

        

     

    

 

 

实例之四

 

    同一颜色的边框

 

 

 

练习（可将内容复制粘贴在表格内）

 

  代码：如果将内容添加在代码内，一定要添加在“ 中间，请看实例。

   
    
        width="100%">练习之三

       

    

  

 

 

 

 

 

实例之五

 

   表格边框线的粗细和框边的空白

 

 

练习之四（可将内容复制粘贴在表格内）

 

 

代码：

 

 

    
     
         width=100%>练习之五 
     

  

 

 

 表格背景的修饰

    HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主。取值方法：bgcolor=black或bgcolor=#000000。

    除了使用背景色，还可使用图片修饰表格背景，这样会使表格的外观会更漂亮。但应该注意：用来作表格背景图的文件不要太大，太大了打开网页速度较慢，最好是有规则图案的小图片，或与表格大小相一致的图片。否则做出的表格也不会有理想的外观效果。

实例之六

   表格背景颜色的修饰

   这个表格已经有背景修饰了，比上面的好多看了吧，颜色可根据你的需要换的

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

 在老师这个实例中，其中内容已经有简单的编辑了，这里面出现了一些编辑内容的标示语言，在学内容编辑时将会陆续接触到，学习要循序渐进，不要急于求成。

代码： 

  
  
     
  
  

      

背景色：bgcolor=#CCCC00
  
      暗边框颜色：#008000

      亮边框颜色：#008060
     

练习之六  《  》  从这个色码表里找你喜欢的颜色

代码 ：

 
   
       width="100%">练习之五

   

 

 

可以把这里的背景或边框的颜色代码（#ff9999）换成： #FF6666  #99CC66  #00FF00 等，看看会怎么样？

记住“#”字符号可别忘记了。

 

实例之七

   用图片修饰背景

 

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

 

background=~herb/kabe-1.gif >
  
  
    
  
  

      

背景色：bgcolor=#CCCC00
  
      暗边框颜色：#008000

      亮边框颜色：#008060
    

 

    换过背景图片的表格

 

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

    background=~herb/kabe-1.gif >   用下面的背景图片将书面的图片换一下看看效果       

   备用素材！

 

   

  （查图片地址的方法：将鼠标放到图片上点右键，在属性中就可以找到图片的原地址）  

   

     

实例之八

   表格内容的编辑

   

户外活动 

 

回家睡觉 

 

心韵制作于二○○五年四月三十日

 

  代码：

  

  

 

 黑体 color=#008000 size=5> 户外活动  

 黑体 color=#008000 size=5> 回家睡觉 

心韵制作于二○○五年四月三十日 

 

 

 

 

<strong >户外活动 >

<strong >回家睡觉 >

心韵制作于二○○五年四月三十日

< /TD>

 

 

…：字体加粗，与…效果，这两个代码中的“字体加粗”  虽语法不一样，但效果一样的。

http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg ">

 

用下面的图片 把代码里的图片换一下看看效果

 

图片素材网址：

                

 

               http://www.scxxt.com.cn/ziyuan/mdv/seniorchinese/teach/g4/41009/images/p003.jpg

 

 

表格嵌套

 

 

两层边框（两张表格的嵌套 ）

Table No.1(Father Table)

Table No.2(Son Table)

Table No.1(Father Table)

代码：

  
  
  

Table No.1(Father Table)
     
    
      
      
      
    
    

Table No.2(Son Table)

      Table No.1(Father Table)
  

3.三层边框（三张表格的嵌套）

代码：

 

  
  
  



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

 

     四个边框（四个表格嵌套，加背景）

 

 

代码：

< TABLE borderColor=#6633ff cellPadding=10 width="100%" bgColor=#cccc00 background=~queen/webgraph/bg/image/star_kabe_01.jpg border=0>

 TR>

 

 

 

 

 

上下表格嵌套：

 

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

 

 

    祝大家开心快乐！

  欢迎光临心缘之梦！

 

代码：

 

  

     
      
    

加入内容 

 
     
      
    

加入内容 

  

 

请注意它们之间的关系。

加入背景的嵌套表格

       学习要循序渐进！

   只要用心，你一定会学得最好！

代码：

 

background=~herb/kabe-1.gif border=10>


< /TABLE>

       学习要循序渐进！

background= border=10>

   只要用心，你一定会学得最好！< /TD>

 

 

 

  左右表格嵌套 ：

 

     

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

 

你学会了吗？

不会也没关系，慢慢来，       先搞清楚它们之间的关系

 

 

  
   
  
  

加入背景的嵌套表格

 

 

 

 

 

  
   
  
  

background=~herb/kabe-1.gifheight=300 width="100%" border=4>

background=   height=300 width="100%" border=4>

阅读(1484) | 评论(0) | 转发(0) |

0

上一篇：Linux -boa-cgi

下一篇：嵌入式Http服务器BOA移植经验总结(qiang)