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

乐乎88llbb.lofter.com

 
 
 

日志

 
 

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>里面去,代码如下:

<table background=图片地址>
<tbody>
<tr>
<td>
<p> 蓝波欢迎您!</p></td></tr></tbody></table>
(这也是最原始最简单的“图片上加文字的方法”)
1、效果:
蓝波欢迎您!

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

<table background=图片地址 width=60 height=60 border=1>
<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、图片加播放器组合。代码如下↓ 效果在右→

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=音乐地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ></P></TD></TR></TBODY></TABLE>

(注:播放器的位置,可以简单用增减 <P>&nbsp;</P> 这对代码来调节。有关更多播放器的特效代码和属性注解,可参看本博日志《WMP播放器款式及代码》!)

 

 

 

 

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

<TABLE BACKGROUND=背景图片地址 WIDTH=展示的宽度 HEIGHT=展示的高度 BORDER=1><TBODY><TR><TD><P><EMBED SRC=flash地址 WIDTH=播放器显示的宽度 HEIGHT=播放器显示的高度 ></P></TD></TR></TBODY></TABLE>

(注:这个代码和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>&nbsp;</P> 这对代码来调节位置 ,其实它就是一对段落代码,可以在其中写入各种内容!)

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

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

<TABLE><TBODY><TR><TD>
<TABLE><TBODY><TR><TD>
<TABLE><TBODY><TR><TD>
...... 这里写日志内容
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

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

《雪》
下雪了
越来越大
真的
还没见过这么大的
大啊
太大了
太大了
.。。。。。
·若要熟练掌握TABLE的使用,编出更复杂更漂亮的效果,
只要多琢磨多练习,那也不是什么难事!
  评论这张
 
阅读(3413)| 评论(16)

历史上的今天

评论

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

页脚

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