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

.

.

 
 
 

日志

 
 
关于我

用宽容的心对待世界,对待生活,用快乐的心创造世界,改变生活,用感恩的心感受世界,感受生活! 热爱生活,珍惜生命,宽容他人,善待自己。

网易考拉推荐

【转载】【制作高级表格】  

2014-01-22 21:49:20|  分类: 表格制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自金钥匙《【制作高级表格】》

 

 

【制作高级表格】

 
 
 
 
 

 

表格式样

代 码 复 制 如 下:

<TABLE borderColor=green width="90%" bgColor=#fff000 border=5>
<TBODY>
<TR>
<TH bgColor=blue rowSpan=9>单元格1</TH>
<TD bgColor=red colSpan=5>“滚动图”</TD>
<TD bgColor=blue rowSpan=9>单元格3</TD></TR>
<TR>
<TD>单元格4</TD>
<TD>单元格5</TD>
<TD>单元格6</TD>
<TD>单元格7</TD>
<TD>单元格8</TD></TR>
<TR>
<TD>单元格9</TD>
<TD bgColor=blue rowSpan=2>单元格10</TD>
<TD>单元格11</TD>
<TD bgColor=blue rowSpan=2>单元格12</TD>
<TD>单元格13</TD></TR>
<TR>
<TD>单元格14</TD>
<TD>单元格15</TD>
<TD>单元格16</TD></TR>
<TR>
<TD bgColor=red colSpan=5>“旋转字”</TD></TR>
<TR>
<TD>单元格18</TD>
<TD bgColor=blue rowSpan=2>单元格19</TD>
<TD>单元格20</TD>
<TD bgColor=blue rowSpan=2>单元格21</TD>
<TD>单元格22</TD></TR>
<TR>
<TD>单元格23</TD>
<TD>单元格24</TD>
<TD>单元格25</TD></TR>
<TR>
<TD>单元格26</TD>
<TD>单元格27</TD>
<TD>单元格28</TD>
<TD>单元格29</TD>
<TD bgColor=blue rowSpan=12>单元格30</TD></TR>
<TR>
<TD>单元格31</TD>
<TD>单元格32</TD>
<TD>单元格33</TD>
<TD>单元格34</TD></TR></TBODY></TABLE>

显示:

“滚动图” 单元格3
单元格4 单元格5 单元格6 单元格7 单元格8
单元格9 单元格10 单元格11 单元格12 单元格13
单元格14 单元格15 单元格16
“旋转字”
单元格18 单元格19 单元格20 单元格21 单元格22
单元格23 单元格24 单元格25
单元格26 单元格27 单元格28 单元格29 单元格30
单元格31 单元格32 单元格33 单元格34

 
【语法解析】
【1】<TABLE></TABLE>分别作起始标识符 这是定义表格的元素,是表格的“身份证”。网页中有几张表格 那就有几对此元素。
【2】<TR></TR> 这是用来定义表格中“行”的元素。即:表格中 行的“身份证”。在表格中有几对此元素就表示当前表格中有几行。尾标签 </TR>在后面仍有衔接的 <TR>时可以省略
【3】 <TD> </TD>是表示一行中单元格的元素。一行中有几对此元素,就有几个单元格。
【4】<TD ROWSPAN="x"> 插入对象 </TD>表示在纵向上合并x行;
【5】<TD COLSPAN="x"> 插入对象</TD>表示在水平方向上合并x列
【6】bgcolor=red  表格的背景颜色;borderColor=green 表格的边框颜色
【7】<TH>表头</TH> 定义表头 表头内容置于 <TH>和</TH> 之间,显示时呈粗体字形式
【8】 <CAPTION> </CAPTION>建立表格的标题,通过ALIGN属性定义标题的位置,其属性有四:即top(在表格上方)、bottom(在表格下方)、left(在表格的左上方)、right(在表格的右上方)。

  

 
 
 
 
 

 

表格的分解制作要领

1  表格某行各列单元格通跨 

<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red colSpan=3>单元格1</TD></TR>
<TR>
<TD>单元格2</TD>
<TD>单元格3</TD>
<TD>单元格4</TD></TR></TBODY></TABLE>

单元格1
单元格2 单元格3 单元格4

 
 
 
 

 

2:只横跨其中两列单元格

<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red colSpan=2>单元格1</TD>
<TD>单元格2</TD></TR>
<TR>
<TD>单元格3</TD>
<TD>单元格4</TD>
<TD>单元格5</TD></TR></TBODY></TABLE>

单元格1 单元格2
单元格3 单元格4 单元格5

 
 
 
 

 

3  纵向跨越三行单元格

<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red rowSpan=3>单元格1</TD>
<TD>单元格2</TD>
<TD>单元格3</TD></TR>
<TR>
<TD>单元格4</TD>
<TD>单元格5</TD></TR>
<TR>
<TD>单元格6</TD>
<TD>单元格7</TD></TR></TBODY></TABLE>

单元格1 单元格2 单元格3
单元格4 单元格5
单元格6 单元格7

 
 
 
 

 

4 纵向跨越两行单元格

<TABLE borderColor=green width="60%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD bgColor=red rowSpan=2>单元格1</TD>
<TD>单元格2</TD>
<TD>单元格3</TD></TR>
<TR>
<TD>单元格4</TD>
<TD>单元格5</TD></TR>
<TR>
<TD>单元格6</TD>
<TD>单元格7</TD>
<TD>单元格8</TD></TR></TBODY></TABLE>

单元格1 单元格2 单元格3
单元格4 单元格5
单元格6 单元格7 单元格8

 
 
 
 

 

5 横跨两列单元格、纵跨两行单元格

<TABLE borderColor=green width="80%" bgColor=#fff000 border=2>
<TBODY>
<TR>
<TD>单元格1</TD>
<TD>单元格2</TD>
<TD bgColor=red colSpan=2>单元格3</TD></TR>
<TR>
<TD bgColor=blue rowSpan=2>单元格4</TD>
<TD>单元格5</TD>
<TD>单元格6</TD>
<TD>单元格7</TD></TR>
<TR>
<TD>单元格8</TD>
<TD>单元格9</TD>
<TD>单元格10</TD></TR></TBODY></TABLE>

单元格1 单元格2 单元格3
单元格4 单元格5 单元格6 单元格7
单元格8 单元格9 单元格10

 
 
 
 

 

6 两行两边相对应带背景图的表格

<TABLE borderColor=#ffff00 cellSpacing=0 cellPadding=0 width=600 align=center border=1>
<TBODY>
<TR align=middle>
<TD colSpan=3>占一行三列1</TD></TR>
<TR align=middle>
<TD width=60 rowSpan=4>占二行一列(左)2</TD>
<TD width=480>文字3</TD>
<TD width=60 rowSpan=4>占二行一列(右)4</TD>
<TR align=middle>
<TD>文字5</TD></TD></TR></TD></TR></TBODY></TABLE>

占一行三列1
占二行一列(左)2 文字3 占二行一列(右)4
文字5

 

 

 

<TABLE borderColor=#ffff00 cellSpacing=0 cellPadding=0 width=600 align=center border=1>
<TBODY>
<TR align=middle>
<TD colSpan=3>占一行三列1</TD></TR>
<TR align=middle>
<TD width="33%" rowSpan=4>占四行一列(左)2</TD>
<TD width="33%">文字3</TD>
<TD rowSpan=4>占四行一列(右)7</TD></TR>
<TR align=middle>
<TD>文字4</TD>
<TR align=middle>
<TD>文字5</TD>
<TR align=middle>
<TD>文字6</TD></TD></TR></TR></TR></TBODY></TABLE>

占一行三列1
占四行一列(左)2 文字3 占四行一列(右)7
文字4
文字5
文字6

 

↓ 请大家参考以下的资料  ↓
 
表格标签属性      边框表格解析      边框代码的详解     表格的基本制作  
 

边框代码解剖分析  

 

 

 

 

 

 

金钥匙欢迎朋友们光临!

金钥匙博客特此声明:
如果你喜欢此日志,请点击日志右下方的(推送或引用),或者左下方的(分享)。
让大家分享或引用,也算是对我的支持,谢谢!
※尊重他人劳动,崇尚网络公德。
本博作品欢迎收藏!支持转载!抵制抄袭!严禁剽窃!
引用日志及代码请保留原创字样!
※请朋友尊重朋友的劳动所成果,此筐架请你不要删,希望互相尊重!
如果你想得到别人的尊重,
那么你首先要学会怎样去尊重别人, 别人同样也会尊重你!

金钥匙再次声明:
不欢迎“复制者”--请文明上网。
您可以在网络找教程,素材,请别复制制作好的博文内容!
请别复制博文,复制专辑,修改专辑链接地址!
您复制--粘贴--也许需要几分钟,
可您知道编辑一篇教程需要多长时间吗?
可您知道编辑一篇图片“文章’需要多长时间吗?
您又知道制作“代码效果”一篇教程需要多长时间吗?
还是一句话:尊重他人劳动,崇尚网络公德。
严禁抄袭他人作品、严禁剽窃他人成果!
光看不留意见的,我将不视为博友!请文明上网!
金钥匙谢谢您的光临,并请留下宝贵意见!
感谢朋友 钥匙小语 博客禁忌 金钥匙的博客 博客现象 自我介绍 建博语感
开博心感 钥匙咀嚼 博友概念 钥匙玉言 关于版权 设计事项
关于钥匙 钥匙建议 金钥匙为你服务--问题专区 公告宣言 告知心语
坦荡的心 加友看法 人品有多美,空间就有多美 我的搏客 网聊必须
空间邀请 遇上网友 缘聚屏前 感谢朋友 逛博有感 博客随感
博友之歌 不宜交往 查看关于本博的更多信息 博客空间 致我网友

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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