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

.

.

 
 
 

日志

 
 

表格绘制全功略  

2007-11-19 11:43:47|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

 

 

   
 

从最基本代码开始;解剖表格代码;从简单到复杂的表格制作功略;

1、基本表格的制作

    a、基本表格代码

<TABLE BORDER=1>

<TR><TD>添加文字</TD></TR>

</TABLE>

效果:

添加文字

 BORDER=1 这参数是设定此表格的框线粗细为 1;更改数字可以改变表格线条粗细;<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位;

b、分列效果

<TABLE BORDER=1>

<TR><TD>文字</TD><TD>文字</TD><TD>文字</TD></TR>

</TABLE>

效果:

文字 文字 文字

 

注意看:<TR></TR>没有增加,<TD></TD>却增加了二组

c、分裂在分行:

<TABLE BORDER=1>

<TR>    <TD>文字</TD><TD>文字</TD><TD>文字</TD>     </TR>

<TR>    <TD>文字</TD><TD>文字</TD><TD>文字</TD>     </TR>

</TABLE>

结果:

文字 文字 文字
文字 文字 文字

 

注意看多了什么

 

 

2、合并表格的操作

  ( 1 )、左右栏位合并:如何将 1、2、3 格通通合并变成一大格

代码:

<TABLE BORDER=1>

<TR>  <TD COLSPAN=3>添加文字</TD>  </TR>

<TR>  <TD>添加文字</TD>   <TD>添加文字</TD>   <TD>添加文字</TD>  </TR>

</TABLE>

效果:

添加文字
添加文字 添加文字 添加文字

 

该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3",这就是“左右栏位合并”的属性,COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”,本来的两个<TD>都可以省掉了,因为都被并掉了嘛!

代码绘制表格就是这样的;一个一个接着画;不象word里的操作;建议大家在word里做好;再传到这边;相关资料入门篇里有;

( 2 )、合并行的操作;文字添加处用数字代替了哈!

代码:

 <TABLE BORDER=1>

<TR>  <TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD>  </TR>

<TR>   <TD>5</TD><TD>6</TD>   </TR>

</TABLE>

效果:

1 2 3
5 6

 

将1与4合并成一个栏位,那么被牺牲的是哪一个栏位呢?没错就是下面那一个倒楣的4,我们看看上图,果然4已经删掉了,而在1的<TD>标签中则多了个生面孔ROWSPAN,这就是“上下栏位合并”的属性,ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”。

 

 

 

(3)、表格属性的设置

 1)、高和宽

       基本设置代码:

<TABLE  WIDTH="100" BORDER="1" HEIGHT="60" >

<TR><TD>文字</TD></TR>

</TABLE>

效果:

 

文字

 

 2)、文字的位置设置;

代码:

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR>   <TD ALIGN=CENTER>文字</TD>     </TR>

</TABLE>

效果:

文字

 

align表示对齐,可以是:left 左边,right右边;效果自己试哈!

 3)、表格靠上靠下居中设置:

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR>   <TD  ALIGN=CENTER VALIGN=TOP>添加文字</TD>   </TR>

</TABLE>

效果:

添加文字

 

注意:利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。VALIGN=MIDDLE可以让表格中物件垂直置中(预设值),VALIGN=BOTTOM可以H让表格中物件靠下方。

 

 

 

(4)、表格的背景设置

代码:

<TABLE BORDER="1" BGCOLOR=yellow>

<TR>  <TD>文字</TD><TD>文字</TD>   </TR>

<TR>  <TD>文字</TD><TD>文字</TD>  </TR>

</TABLE>

效果:

文字 文字
文字 文字

 

将BGCOLOR="颜色码"加在<TR>中,可以指定“一列”的背景颜色

代码:

<TABLE BORDER="1" >

<TR BGCOLOR=purple> <TD>添加文字</TD> <TD>添加文字</TD>  </TR>

<TR> <TD>添加文字</TD> <TD> 添加文字</TD>   </TR>

</TABLE>

 效果:

添加文字 添加文字
添加文字 添加文字

 

大家记得一条;把各种属性往里面套就是了;但要注意位置和规则;

将BGCOLOR="颜色码"加在<TD>中,可以指定“一栏”的背景颜色:

如果制定某格加背景的话;

代码:

<TABLE BORDER="1" >

<TR><TD BGCOLOR=purple> 添加文字</TD> <TD>添加文字</TD>  </TR>

<TR> <TD>添加文字</TD> <TD> 添加文字</TD>   </TR>

</TABLE>

  效果:

 

添加文字 添加文字
添加文字 添加文字

 

 博导有个疑问,就是可以不可以以图片作为表格背景;

(5)、表格颜色设置:

代码:

<TABLE BORDER="5" BORDERCOLOR="red">

<TR><TD>文字</TD></TR>

</TABLE>

效果:

文字

 

利用BORDERCOLOR="颜色码"就行了

 

 

(6)、另外,我们也可以设定表格的阴影、亮面颜色,让表格看起来更有立体感喔!只要利用 BORDERCOLORLIGHT="#颜色码"(亮面设定) BORDERCOLORDARK="颜色码"(暗面设定)就行了。

 代码:

<TABLE BORDER="5" BORDERCOLOR="pink" BORDERCOLORLIGHT="red" BORDERCOLORDARK="yellow">

<TR><TD>输入你要加入的文字</TD></TR>

</TABLE>

 效果:

 

输入你要加入的文字

 

 6、设置距离

利用CELLPADDING属性自由设定表格内文距离格线的距离,一般而言内定值为2,不过我建议设定为4比较漂亮。

代码:

<TABLE BORDER="1" CELLPADDING="10">

<TR><TD>添加文字</TD><TD>添加文字</TD></TR>

</TABLE>

效果:

添加文字 添加文字

 

利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2,不过我通常习惯设为 0 。

代码:

<TABLE BORDER="1" CELLSPACING="5">

<TR><TD>文字添加处</TD><TD>文字添加处</TD></TR>

</TABLE>

 效果:

 

文字添加处 文字添加处

 

把以上的代码做一次大规模的联合兵团大战;博导认为是可以做一个自己满意的表格的;资料来源以各个前辈的

教材;博导进行了一点整理完善;希望对大家有用;以上所使用代码是博导验证的;没有任何错误;大家注意了解基本代码哈;

博导并不懂这些代码;让我写的话;说实话;写不出来;但我知道;这个代码可以做什么;就好比用人一;

只要知道他能做没;就好安排工作了;

我们提出:做博客做学习从不懂开始;就是这个道理。

 

 以上引用:

 

 

 

 

 

 

  

 

 

 

 

 

 

  评论这张
 
阅读(267)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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