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

正本清源

寻找 备份 传承

 
 
 

日志

 
 

【转载】表 格 制 作 全 攻 略  

2014-10-11 10:17:18|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 表 格 制 作 全 攻 略

编辑:天使

1.代码属性:

 (1)起始

      <TABLE>表示属性是表格

      <TR>表示列或者是另一行

      <TD>表示一栏(行或者一个单元格)

  (2)终结【起始和终结控制代码是成对的】

      </TD></TR></TABLE>,共三对代码:

   (3)<border=1>表示框线的粗细,值越大框线越粗

一个单元格的制作代码:

<TABLE border=1><TR><TD>内容</TD></TR></TABLE>

内容

<TR>和</TR>,这一组表示设定一行表格的开始,<TD>和</TD>,这一组表示

是一个格子,

如果在<TR>和</TR>中间加几组<TD>和</TD>,就表示设置了结果单元格。

如设置三个,效果代码:

<TABLE border=1><TR><TD>内容</TD><TD>内容</TD><TD>内容

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

内容 内容 内容

增加一组<TR>和</TR>,表示增加一排表格

如要设置两行表格的效果代码:

<TABLE border=1><TR><TD>内容</TD><TD>内容</TD><TD>内容

</TD></TR><TR><TD>内容</TD><TD>内容</TD><TD>内容

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

内容 内容 内容
内容 内容 内容


 

二、大小对齐:

    1.表格大小控制代码:

宽度:WIDTH   高度:HEIGHT   值越大则表格越大

如设置宽300,高80的表格效果代码:

<TABLE WIDTH="300" BORDER="1" HEIGHT="80">

<TR><TD align=center>

内容</TD></TR></TABLE>


内容


 

     2.表格内容位置控制代码:

        内容居左:align=left    内容居右:align=right

        内容居中:align=center  内容居上:VALIGN=TOP 

        内容居下:VALIGN=BOTTOM

    如设置内容居中同时居上的效果代码:

<TABLE WIDTH="300" BORDER="1" HEIGHT="80"><TR>

<TD ALIGN=CENTER VALIGN=TOP>内容</TD></TR></TABLE>


内容


 

三、框线控制代码:

    1.框线颜色:BORDERCOLOR="颜色码"

      如设置框线是红色的效果代码:

<TABLE BORDER="5" BORDERCOLOR="#ff0000"><TR><TD>内容

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


内容


 

    2.框线粗细:BORDER="粗细值","粗细值"越大,框线越粗

     如设置框线为10个单位的效果代码:

<TABLE BORDER=10><TR><TD>内容</TD></TR></TABLE>


内容


 

 

     3.表格栏位格线距:CELLSPACING=10  即相邻两个单元格之间的距离

如设置相邻单元格距离为10的效果代码:

<TABLE cellSpacing=10 align=center border=1><TBODY><TR><TD>内容

</TD><TD>内容</TD></TR></TBODY></TABLE>


内容 内容


 

    四、单元格合并控制代码:

     1.左右单元格合并【同一行单元格合并】:

        colspan 就是“左右栏位合并”

      如将第一行三个单元格合并为一个单元格的效果代码:

<TABLE border=1><TBODY><TR><TD colSpan=3>1</TD></TR>

<TR><TD>4</TD><TD>5</TD>
<TD>6</TD></TR></TBODY></TABLE>


1
4 5 6


 

       2.同一列单元格合并:

       rowspan 就是“上下栏位合并”

如将第一列上下两个单元格合并的效果代码:

<TABLE border=1><TBODY><TR><TD rowSpan=2>1</TD><TD>2</TD><TD>3</TD>

</TR><TR><TD>5</TD><TD>6</TD></TR></TBODY></TABLE>


1 2 3
5 6

 

五、表格背景设置:

   1.设定全部表格背景底色控制代码:

   bgcolor="颜色码",代码:

如设置表格背景为红色的效果代码:

<TABLE align=center bgColor=#ff0000 border=1>

<TBODY><TR><TD>内容</TD><TD>内容</TD></TR>

<TR><TD>内容</TD><TD>内容</TD></TR></TBODY></TABLE>


内容 内容
内容 内容


 

2.设定一列表格背景色的控制代码:

bgcolor="颜色码"

注:此代码必须加在列的控制代码<TR>中,即为

<TR bgcolor="颜色码">,

如设置第一行的表格为红色的效果代码:

<TABLE align=center border=1><TBODY><TR bgColor=#ff0000>

<TD>内容</TD><TD>内容</TD></TR><TR><TD>内容</TD><TD>内容

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


内容 内容
内容 内容


 

  3.设定其中一个单元格背景色的控制代码:

    将颜色控制代码【bgColor="颜色码"】加在指定的单元格控制代码中<TD>中。

如设置第一行第一列的单元格为红色的效果代码:

<TABLE align=center border=1>

<TBODY><TR><TD bgColor=#ff0000>内容</TD><TD>内容

</TD></TR><TR><TD>内容</TD><TD>内容</TD></TR></TBODY></TABLE>


内容 内容
内容 内容


 

4.用图片作表格背景的控制代码:

    将图片地址控制代码<BACKGROUND="图片地址">加到表格代码中,

     如设置表格背景颜色一样,可以任意设定表格全部或者某一行、

某一列、某个单元格背景图片

   (1)图片设置为整个表格背景:把<BACKGROUND="图址">(加在<TABLE>中),

   (2)图片设置为指定一行背景,把<BACKGROUND="图址">(加在<TD>中)

   (3)图片设置为指定一列背景:把<BACKGROUND="图址">(加在<TR>中)

如设置整个表格的背景图片效果代码:

<TABLE align=center background="图片地址"  WIDTH =“宽度”:

HEIGHT="高度"  border=1>

<TBODY><TR><TD>内容</TD><TD>内容</TD></TR>

<TR><TD>内容</TD><TD>内容</TD></TR></TBODY></TABLE>

 

 天使制作

 天使制作

 天使制作

 天使制作

 天使制作

 天使制作

 天使制作

 天使制作

 天使制作

  

如设置两列表格的背景图片不同的效果代码:

<TABLE align=center  border=1>

<TBODY>

<TR  background="图片地址1" ><TD>内容</TD><TD>内容</TD></TR>

<TR  background="图片地址"2 ><TD>内容</TD><TD>内容</TD></TR>

 

</TBODY></TABLE>

 

内容 内容
内容 内容


华丽边框 - 天使 - Heaven的博客


 

  


  评论这张
 
阅读(49)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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