注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

走近太平洋

感悟生命真谛

 
 
 

日志

 
 

表格详解  

2011-06-07 15:43:51|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一:表格代码的基本结构:
       1:功能结构
            <功能参数><分表参数>内容<分表结束><功能结束>
       2:代码结构
         结构1(简单的表格):
      <TABLE width=宽度 height=高度><TD>显示内容</td></TABLE>
      
      二、实例分析:
      一个要在论坛里宽屏显示图片的代码:
      <table style="LEFT: -220px; POSITION: relative; TOP: 100px" align=center
      border="0" bordercolor=#ff0000 cellpadding="0" cellspacing="0"
      width="1000" height="440" bgcolor=#0000ff
      background="
http://ai.img1001.com/uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
       <tr>
        <td> </td>
       </tr>
      </table>
        这个代码说明了什么呢?首先我们先简化一下如下:
      <table>
       <tr>
        <td> </td>
       </tr>
      </table>
      1、结构标签解释:
             
      从<table>开始到</table>结束。告诉电脑我这里有一个表格。从<tr>开妈到</tr>结束,告诉电脑在这个表格中有一行表单。从<td>开始到</td>结束,告诉电脑在这一行表单中有一列表单。这个看懂了吧,这样你对这段代码便有了宏观的把握,不至于扰乱思路。
      这是一个最基本的表格代码,这是一个组合,<table>表格一般不会单独出现,<tr><td></td></tr>这是一个单元格,如果没有单元格的代码,在许多网页中,表格参数也就失效不显示效果了。
             
      参数:上面的代码没有任何参数,那么,它的参数就全部是默认的了,在软件中就是软件默认的参数,在网页中,就是网页的默认参数。实例的表格参数如下:
      2、基本参数解释:
      align=center      align=  是定义表格内容的显示位置,align=center:是居中 align=left:是左对齐
      align=right:是右对齐
      border="0" cellpadding="0" cellspacing="0"  
      这是表格的显示效果,依次为“边宽”、“单元格间距”、“单元格边距”,这里设置为0像素,就不会有任何表格框的显示,在一般音画中可省略这些代码,因为默认的情况下,表格是不显示框架的。在许多有边框的祝福音画中,利用这些参数,合成边框效果。
      bordercolor=#ff0000    定义表格边的颜色为红色。
      width="1000"           定义了这个表格的宽度为1000像素。
      height="440"           定义了这个表格的高度为440像素。
      bgcolor=#0000ff        定义表格的背景颜色为蓝色。
      background="背景的地址">
      background="
http://ai.img1001.com/uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
          
      这定义了这个表格的背景用图片显示,网址是:
http://ai.img1001.com/uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg
       地址的引号也可省略。
      3、风格参数解释:
      这部分是表格的风格特性参数,style=""  这是风格参数的格式,引号内是参数内容。参数内容:注意:有多个参数时,每个参数之间要用;号隔开。
      本例中以下内容便是风格参数:
      style="LEFT: -220px; POSITION: relative; TOP: 100px"
      LEFT: -220px         
      表示这个表格,要在母表格的基准上向左移动220个像素。在论坛中发音画,经常用这个参数,因为论坛发的帖子内容,本身在论坛网页软件的一个表格中,如果不用这个参数,超过论坛帖子表格宽度的图片等内容便不能全部显示了。至于移动多少,这和你所在的论坛的左边条宽度有关,发帖子时,要进行不断的修改,才能达到图片等刚好能全屏显示。注意:你的图片一般不要超过1000PX,超过了,无论你怎么调参数都不会全屏显示你的图片了。除非你的显示器屏幕特别大,都能把显示格式选择为2048x1536。
      POSITION: relative   表示这个表格和母表格的坐标关系,relative
      是相对关系,表示本表格的所有参数坐标是以母表格为基准坐标的。absolute 是绝对关系,表示本表格的所有参数坐标是以总网页为基准坐标的。
      TOP: 100px         表示这个表格距离顶部的像素距离。这个参数的具体效果和上一个坐标关系的确定有关,好好想想,能明白了吧。
      另外,风格参数等不只可用在表格,也可用在其它标签中,例如:
      <tr>
      <td style="LEFT: -220px; POSITION: relative; TOP: 100px" border="0"
      cellpadding="0" cellspacing="0" width="1000" height="440"
      background="
http://ai.img1001.com/uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg"></td>
      </tr>
      三:注意事项:
      1:数据的分配要准确:
      如果你将一个总表格分为多个单表格来处理,就要定义每个单表格的长和宽度.每个单表格加起来的总长和总宽要和总表格一致.
      例1:总宽是200 总高是60 左右分 100x60+100x60=200x60 就和总宽高一样
      <table width=200 height=60><td width=100 height=60>我是芳草</td><td width=100
      height=60>我是明月</td></table>
      例2:总宽是200 总高是60 上下分 200x30+200x30=200x60 就和总宽高还是一样
      <table width=200 height=60><tr><td width=200
      height=30>我是星空</td></tr><tr><td width=200 height=30>我是明月</td></tr></table>
      2:固定表格数据并不是真的完全固定,会随着内容的大小和多少来自动调整宽高.
      例1:我们固定总宽为300 总高为30.
      <table width=300 height=60 bgcolor=FFFF00><td><FONT color=FF0000
      size=7>心灵芳草个欢迎你</FONT></td></table> 
      我们看到实际将表格挤高了.超过我们的规定,我们一定要记住这一点.要根据实际内容的宽高来调整表格的大小.才能达到理想的效果.
      四、代码的简化:
      在音画中,表格一般用来显示图片,也就是说只要能按我的要求显示图片就可以了,所以,有许多代码并不是必须的,多余的代码可以省略。从本例看实际上只是要用背景方式在表格中显示图片,所以代码可以简化为如下:
      <table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000"
      height="440"
      background="
http://ai.img1001.com/uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
       <tr>
        <td> </td>
       </tr>
      </table>
      其它的对齐、边框,格距,格边距,背景色等都是不需要的了
  评论这张
 
阅读(12)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017