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

XUE HAI BLOG

鸟瞰家乡 美丽独特 多骄如画 家乡明天更美好

 
 
 

日志

 
 

☆高级表格的制作及语法解析  

2009-09-22 22:08:22|  分类: 【表格制作大全】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

高级表格的制作及语法解析

显示表格式样:

单元格1 “滚动图” 单元格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

代 码 如 下:

<TABLE borderColor=green width="90%" bgColor=#fff000 border=5>
<CAPTION align=bottom><STRONG>高级表格制作</STRONG></CAPTION>
<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>

 

【语法解析】

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  表格某行各列单元格通跨

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

代 码 如 下:

<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>

 

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

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

代 码 如 下:

<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>

 

3  纵向跨越三行单元格

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

代 码 如 下:

<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>

 

4 纵向跨越两行单元格

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

代 码 如 下:

<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>

 

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

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

代 码 如 下:

<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>

掌握此复杂表格的制作步骤和相关属性,触类旁通,则一切表格制作迎刃而解矣!
表格制作相关链接☆ 【表格制作导航】


☆

学海博客-欢迎您光临浏览选用!
学海博客-欢迎您光临浏览选用!
☆

金钥匙【高级表格的制作及语法解析】
  评论这张
 
阅读(696)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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