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

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

表格边框制作技巧【续】  

2011-04-09 06:37:42|  分类: 表格制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自敬礼!《表框制作》

 

表框制作基础知识

 

基本代码:

<TABLE width=400 border=2 cellspacing=5 cellpadding=5 align=center valign=TOP
background="背景图" bgcolor=#0000ff bordercolor=#ff0000 bordercolorlight=#00ff00
bordercolordark=#00ffff cols=2>

代码注释:

width=400 表格宽度,接受绝对值(如400)及相对值(如80%)。

border=2 表格边框的厚度。

cellspacing=5 表格的格线的厚度。

align=center 表格水平位置居中,可选left居左或居right右

valign=TOP 表格内的内容对齐方式,top上,middle中,bottom下。

background= 表格的背景图片,与表格底色bgcolor不要同用。

bgcolor=#0000ff 表格的底色,与background不要同用。

bordercolor=#ff0000 表格边框颜色。

bordercolorlight=#00ff00 表格边框向光部分的颜色。

bordercolordark=#00ffff 表格边框背光部分的颜色,使用bordercolorlight 或 bordercolordark 语句时表格边框颜色 bordercolor 将会失效。

cols=2 表格栏位数目。

一、基本语句:

<TABLE border=2 cellSpacing=2 borderColor=#ff0000 cellPadding=0 width=600 bgColor=#dbe4f4 align=center height=40>
<TBODY>
<TR>
<TD><P align=center><FONT color=#0000ff size=4 face=宋体>文字或图片</FONT></P>

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

效果:

文字或图片

例句(效果见本外框):

<TABLE border=2 cellSpacing=0 borderColor=#fff000 cellPadding=0 width=660 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=10 cellSpacing=10 borderColor=#228b22 borderColorDark=#00ced1 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD>
<P>&nbsp;</P>
<P align=center><FONT color=#ff0000 size=6 face=宋体><B>表格制作基础知识</B></FONT></P>
<P>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

二、将行分成若干个小单元格:

如果在一行中分成2个小单元格,每个小单元格占总宽度的50%,由开始标记<TD>和结束标记</TD>组成的这段单元格代码出现两次,例句如下:

<TABLE border=2 cellSpacing=2 borderColor=#ff0000 cellPadding=0 width=600 bgColor=#dbe4f4 align=center height=40>
<TBODY>
<TR>
<TD width="50%">文字或图片</TD>
<TD width="50%">文字或图片</TD>
</TR></TBODY></TABLE>

注:分成几个小单元格,语句中<TD width="50%">文字或图片</TD>就要连续出现几次,并改变每个单元格平均所在总宽度的百分比,依次为:100%、50%、33.3%、25%、20%......。

效果两列):

文字或图片

文字或图片

三、表格嵌套:

表格是HTML文档里的元素之一,可以把它看成一个容器,利用这一特点来装饰文档。

例句1一个子表):

<TABLE border=6 borderColor=#0099cc width=600 align=center>
<TBODY>
<TR>
<TD>外表格
<TABLE border=4 borderColor=#ff0000 width="98%" align=center>
<TBODY>
<TR>
<TD>内表格</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

效果1:

外表格

内表格

 

例句2(嵌套两个子表):

<TABLE border=6 borderColor=#ff3388 width=600 align=center>
<TBODY>
<TR>
<TD>
<P></P>
<TABLE border=2 borderColor=#00ffff width="98%" height=50 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<P></P>
<TABLE border=2 borderColor=#888888 width="98%" height=50 align=center>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<P></P></TD></TR></TBODY></TABLE>

效果2:

例句3(三层嵌套):

<TABLE border=8 borderColor=#6633ff width=600 align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#ff0000 size=4>第一层</FONT></P>
<TABLE border=6 borderColor=#cc9966 width=570 align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#ff00ff size=4>第二层</FONT></P>
<TABLE border=4 borderColor=#003300 width=550 align=center height=60>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#0000ff size=4>第三层 </FONT></P>

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

注意:做多层表格嵌套要注意起始标识符的正确性,一般性错误系统会自动更正,如果错误太多,系统的自动修正效果达不到需要的效果,有时还会进入死循环而死机。

效果3:

第一层

第二层

第三层

例句4(并列嵌套):

<TABLE border=6 borderColor=#ccffcc width=600>
<TBODY>
<TR>
<TD>
<TABLE border=3 borderColor=#666666 width=300 height=40>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD>
<TABLE border=3 borderColor=#666666 width=300 height=40>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

注意:表格中的两个二级表格是并列放在父表里的,将父表分隔成左右各一半。要注意二级表格的高度一致,在使用中可以根据情况定义。

效果4:

例句5(有标题栏):

<TABLE border=2 cellSpacing=0 borderColor=#ff9999 cellPadding=0 width=600 align=center height=200>
<TBODY>
<TR>
<TD style="FILTER: Blur(Add=true, Direction=200, Strength=10)" bgColor=#ff9999 height=30>
<P align=center><FONT color=#0000ff size=6><B>标题字: </B></FONT></P></TD></TR>
<TR>
<TD height=200 vAlign=top>
<P align=left><FONT color=#ff00ff size=4><B>这里放文字、图片或动画</B></FONT></P></TD></TR></TBODY></TABLE>

效果5:

标题字:

这里放文字、图片或动画

 

 

幽谷星尘祝朋友们浏览愉快
                                            正在更新中……

幽谷星尘欢迎赐教

博客技巧 电脑技能 博客素材 非常博友群  人脉天地间【编辑中】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 视频教程 养生保健 日志边框
音画图文 FLASH系列 U5制作 美文转载 音画赏析1 PS课件2
音画赏析2 视频欣赏 查看关于本站的更多信息非常博友群  人脉天地间【编辑中】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 PS课件1 社会万象

博客素材一● 博客素材二● 博客素材三

 

非常博友群  人脉天地间【编辑中】 - 幽谷星尘 - 人无癖不可与交,以其无深情也。  进入真情团队2

 

 

  评论这张
 
阅读(461)| 评论(0)

历史上的今天

评论

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

页脚

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