logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

代码学习群简易教程（15）

 春天没来 2014-05-24

“春天没来”欢迎您“春天没来”欢迎您
表格标签（3）

本节继续讲解表格标签。
一、认识表格结构
1、只有一个单元格的表格
代码：

<DIV><FONT style="LINE-HEIGHT: 1.5em; FONT-FAMILY: 黑体; COLOR: rgb(0,0,0); FONT-SIZE: 22px"><TABLE style="TEXT-ALIGN: left; WIDTH: 120px; HEIGHT: 28px" border=3 cellSpacing=8 borderColor=#00ff00 cellPadding=10 bgColor=#bbbab9 align=center><BR><TBODY><TR><TD><BR><P align=center><FONT color=#0000ff size=4><B>内容</B></FONT></P></TD></TR></TBODY></TABLE></FONT></DIV>

效果：

内容

上面的表格是只有一个单元格的表格，也就是一行一列的表格。代码中有一对行标签：<TR></TR>，有一对列标签：<TD></TD>。最外层草绿色的粗框线是“边框线”，往里层灰色的部分是“间距”，再往里层蓝色的细框线是“单元格边线”，再往里层与文字之间的灰色部分是“边距”。“内容”这两个字，是单元格中放置的“内容”，也就是表格中的“内容”。
综上所述，表格的结构，从外到里依次是：边框线、间距、单元格边线、边距与内容。
一行一列的表格常用于制作多重表格或者放入网页内容。
你可以简单地把单元格理解为：<TD></TD>。网页中的内容，要放置在这两个标签之间。
2、几行几列的表格
代码：

<TABLE style="TEXT-ALIGN: left; WIDTH: 500px; HEIGHT: 28px" border=3 cellSpacing=8 borderColor=#00ff00 cellPadding=10 bgColor=#bbbab9 align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格1</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格2</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格3</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格4</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格5</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格6</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格7</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格8</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格9</B></FONT></P></TD></TR></TBODY></TABLE>

上面的表格是三行三列的表格，共有九个单元格。代码中有三对行标签：<TR></TR>，有九对列标签：<TD></TD>。
 
效果：

单元格1

单元格2

单元格3

单元格4

单元格5

单元格6

单元格7

单元格8

单元格9

多行多列的表格，间距是指各个单元格之间的距离。边框线与其相邻的单元格之间的距离也是间距。请注意：如果表格标签中设置了属性：BORDER-COLLAPSE: collapse，间距将不会显示。
多行多列的表格常用于制作链接文章与首页模块。
用于制作链接文章：
用于制作首页模块：

二、制作多重表格
多重表格的制作，一般以3至4层为宜。
多重表格的制作，就是在表格的单元格中，再粘贴一套或者几套表格标签。
二层表格的制作，就是在一层表格的单元格中，再粘贴一套表格标签。
三层表格的制作，就是在第二层表格的单元格中，再粘贴一套表格标签。
四层表格的制作，就是在第三层表格的单元格中，再粘贴一套表格标签。
以此类推。
制作二层以上的表格，把表格标签粘贴完毕以后，要修改表格标签中的属性属值，使每一层表格略有变化，不要雷同。
多重表格的层数，是从外往里数的。最外面的表格为第一层，再往里面依次是第二层、第三层、第四层……
举例如下：
1、二层表格代码：

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE title=春天没来制作 border=2 cellSpacing=10 borderColor=#000000 cellPadding=0 width=600 bgColor=#00aa00 align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>内容处</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>

上面的代码中，黑色的代码是第一层表格的代码，红色的代码是第二层表格的代码。
二层表格代码，虽然简单。但是，只要你修改表格标签中的属性属值，替换背景颜色或者背景图片，就可以制作出无计其数的显示效果来。
当然了，你还可以给表格标签添加其它的属性属值，显示效果就更加丰富多彩了。
这里我要说明的是：
（1）无论制作几层的多重表格，只要在最里面的那一层表格标签中设置宽度与高度即可，其它层表格的宽度与高度都可以省略。其它层表格的宽度与高度都会根据表格中设置的间距等属性撑大的。
（2）当表格标签中设置了背景图片，又设置了背景颜色的时候，表格中显示的是背景图片。只有当背景图片失效以后才会显示出背景颜色。
（3）表格中设置的有些属性，有时候显示不出来，其原因可能是浏览器的原因，也可能是图书馆中的编辑器不支持，还可能是你设置得不正确原因。遇到这种情形，你试试用css样式设置一下这些属性。
2、三层表格代码

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>内容处</FONT></P></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

上面的代码中，黑色的代码是第一层表格的代码，红色的代码是第二层表格的代码，蓝色的代码是第三层表格的代码。
三层边框实例：
三层以上的多重边框，按照上面讲解的方法制作即可。

三、行标签中添加属性
在表格的“行标签”中，可以添加一些属性属值。“行标签”中添加的属性属值，在此行的各个单元格中都起作用。
代码：

<P align=center>
<TABLE style="TEXT-ALIGN: left; WIDTH: 500px; HEIGHT: 28px" border=3 cellSpacing=8 borderColor=#00ff00 cellPadding=10 bgColor=#bbbab9 align=center>
<TBODY>
<TR style="BACKGROUND-IMAGE: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg)">
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格1</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格2</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格3</B></FONT></P></TD></TR>
<TR title=春天没来制作  bgColor=#05e30c >
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格4</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格5</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格6</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格7</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格8</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单9</B></FONT></P></TD></TR>
</TBODY></TABLE></P>

上面的代码中，红色的代码是第一行的代码，蓝色的代码是第二行的代码，粉红色的代码是第三行的代码。
第一行的行标签中添加了背景图片；第二行的行标签中添加了背景颜色（绿色）与标题；第三行的行标签中没有添加任何属性，采用表格标签中的属性（背景颜色为灰色）。

四、列标签中添加属性
在表格的“列标签”中，可以添加一些属性属值。“列标签”中添加的属性属值，只在此单元格中起作用。
代码：

<P align=center>
<TABLE style="TEXT-ALIGN: left; WIDTH: 500px; HEIGHT: 28px" border=3 cellSpacing=8 borderColor=#00ff00 cellPadding=10 bgColor=#bbbab9 align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格1</B></FONT></P></TD>
<TD style="BACKGROUND-IMAGE: url(http://image4.360doc.com/DownloadImg/2009/3/12/92346_2786131_12.jpg)" title=春天没来制作>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格2</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格3</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格4</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格5</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格6</B></FONT></P></TD></TR>
<TR>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格7</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单元格8</B></FONT></P></TD>
<TD>
<P align=center><FONT color=#0000ff 24px FONT-SIZE:><B>单9</B></FONT></P></TD></TR></TBODY></TABLE></P>

五、表格的行合并与列合并
表格中的行与列都可以进行合并。“行合并”与“列合并”往往应用于制作小模块。
“行合并”的代码为：rowSpan=2 。等号后面的数字是几，表示把几行合并为一行。换句话来讲，“行合并”就是把“竖向”的几个单元格合并为一个单元格。合并时，是从此单元格向下合并的。
“列合并”的代码为：colSpan=2 。等号后面的数字是几，表示把几列合并为一列。换句话来讲，“列合并”就是把“横向”的两个单元格合并为一个单元格。合并时，是从此单元格向右合并的。
举例：
“行合并”的代码：

<TABLE style="BORDER-BOTTOM-COLOR: #00a360; TEXT-ALIGN: left; BACKGROUND-COLOR: #f2daef; BORDER-TOP-COLOR: #00a360; WIDTH: 500px; HEIGHT: 250px; BORDER-RIGHT-COLOR: #00a360; BORDER-LEFT-COLOR: #00a360" border=5 cellSpacing=5 cellPadding=3 width=500>
<TBODY>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD rowSpan=2></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR></TBODY></TABLE>

例如：
“列合并”的代码：

<TABLE style="BORDER-BOTTOM-COLOR: #00a360; TEXT-ALIGN: left; BACKGROUND-COLOR: #f2daef; BORDER-TOP-COLOR: #00a360; WIDTH: 500px; HEIGHT: 250px; BORDER-RIGHT-COLOR: #00a360; BORDER-LEFT-COLOR: #00a360" border=5 cellSpacing=5 cellPadding=3 width=500>
<TBODY>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD colSpan=2></TD>
<TD></TD></TR></TBODY></TABLE>

例如：我给朋友制作的这个模块就应用了列合并：
在模块中，第一行，第二行与最后一行都是合并了列的单元格。都应用了“列合并”的代码。

六、背景图片的设置
在表格标签中设置“背景图片”，往往有许多朋友弄不清楚。有几个朋友曾经问我：什么样的图片可以设置为背景图片啊？是不是网络中标明“标题”为“背景图片”的那些图片，才可以设置背景图片啊？
其实，任何一种格式的图片都可以设置为背景图片的。没有能不能设置的问题，只有效果好与差的区别。（当然了，要设置为背景图片，前提条件是，这个图片的标签名称应该是：IMG）。
后缀为：swf格式的动画图片，一般是不能设置为背景图片的。要想设置为背景图片，就得应用另一种制作方法了。
设置背景图片，要看图片属于哪种类型。
1、纯颜色的图片可以“任意”设置背景图片。这里的“任意”，是指背景图片的规格（也就是宽度与高度）可以任意设置。
例如：
2、这种类型的图片也可以“任意”设置背景图片。
例如：
例如：
3、完整的一幅画面（例如：风景图）要设置为背景图片，最好按照原图片的规格设置宽度与高度。
在设置了背景图片的表格标签中，宽度与高度，既是表格的宽度与高度，也是背景图片的宽度与高度。
用完整的一幅画面设置为表格的背景图片，一般是要在这个图片中添加一些内容的。如果不按照原图片的规格设置为背景图片，那么，这个图片要么被剪切掉一部分，要么就是向下面和右面重复平铺，制作出来的网页就不美观啦。
举例：
图片：
这个图片的规格为：宽度＝“750” 高度＝“562”
设置为表格中的背景图片：
代码：

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=750 background=http://image72.360doc.com/DownloadImg/2014/05/1407/41587415_1.jpg align=center height=562>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

你可“修改”一下表格标签中的宽度与高度，观察一下显示效果。
把宽度减小，图片的右部被剪切了一部分啦；把宽度加大，图片的左部，有一部分添加（即：平铺）在图片的右面啦。
把高度减小，图片的下部被剪切了一部分啦；把高度加大，图片的上部，有一部分添加（即：平铺）在图片的下面啦。
设置这种背景图片，一定要注意欧！当你替换了背景图片的时候，一定要按照你所换图片的规格，修改表格标签中的宽度值与高度值欧！
应用这种图片作为背景图片，我们可以在图片中添加许多内容。
（1）添加移动文字：
代码：

<TABLE style="POSITION: relative; WIDTH: 750px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=750 background=http://image72.360doc.com/DownloadImg/2014/05/1407/41587415_1.jpg align=center height=562>
<TBODY>
<TR>
<TD>
<MARQUEE style="POSITION: absolute; HEIGHT: 210px; TOP: 65px; LEFT: 150px" direction=up width=550 scrollAmount=2 scrollDelay=10>
<P align=center><FONT style="FONT-SIZE: 32px" color=#00ff00><B>学习代码<BR>制作网页<BR>用我们晚年的余热<BR>发射出暮年的光华<BR>与时俱进<BR>走在时代的前列</B> </FONT></P></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

（2）添加动画图片
代码：

<TABLE style="POSITION: relative; WIDTH: 750px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=750 background=http://image72.360doc.com/DownloadImg/2014/05/1407/41587415_1.jpg align=center height=562>
<TBODY>
<TR>
<TD><EMBED style="POSITION: absolute; HEIGHT: 500px; TOP: -80px; LEFT: 50px" height=500 type=application/x-shockwave-flash align=right width=700 src=http://www./2010yh/chuntian/f/燕子.swf quality="high" wmode="transparent"> <EMBED style="POSITION: absolute; HEIGHT: 600px; TOP: -20px; LEFT: 50px" height=500 type=application/x-shockwave-flash align=right width=750 src=http://www3./toumingflash/swf500/woso7_flash_20.swf quality="high" wmode="transparent"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

上面的两个例子中都应用了css的定位样式。css的定位样式，在以后的《教程》中我再讲解。

七、多行一列的表格
代码：

<DIV align=center>
<TABLE style="POSITION: relative; WIDTH: 740px; TOP: 0px; LEFT: 0px" border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG style="WIDTH: 650px; HEIGHT: 300px" title="" alt="" src="http://image63.360doc.com/DownloadImg/2013/08/0606/34299170_17.jpg" width=600 height=450><EMBED style="POSITION: absolute; WIDTH: 450px; TOP: 50px; LEFT: 50px" height=200 type=application/x-shockwave-flash src=http://xuanfei./20081115/1409.swf wmode="transparent" invokeurls="false" allowscriptaccess="never" allowfullscreen="true" allownetworking="internal"><EMBED style="POSITION: absolute; WIDTH: 450px; TOP: 50px; LEFT: 200px" height=200 type=application/x-shockwave-flash src=http://xuanfei./20081115/1409.swf wmode="transparent" invokeurls="false" allowscriptaccess="never" allowfullscreen="true" allownetworking="internal"></DIV></TD></TR>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>内容处</FONT></P></TD></TR>
<TR>
<TD>
<DIV align=center><EMBED style="Z-INDEX: 0" height=340 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=650 src=http://bbs8./UploadFile2008/2013-4/20134271951244020.swf wmode="transparent" invokeurls="false" quality="high" allowscriptaccess="never" allownetworking="internal"></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

上面的代码，是一个三行一列的表格，第一行与第三行的单元格中放置了图片与动画图片，第二行的单元格内放置网页内容。其效果挺不错的。

八、复杂表格：
制作复杂的表格，既有行的合并，也有列的合并。如果一个列标签中既有合并行的代码，也有合并列的代码，那么，行的合并，是从这个单元格向下合并的，列的合并，是从这个单元格向右合并的。
代码：

<P align=center><STRONG><FONT style="FONT-FAMILY: 宋体; FONT-SIZE: 30pt; mso-ascii-font-family: 'Times New Roman'">个人简历</FONT> </STRONG></P>
<DIV align=center>
<TABLE border=2 cellSpacing=0 cellPadding=0 width=750>
<TBODY>
<TR>
<TD width=81>
<P align=center>姓名 </P></TD>
<TD width=124>
<P align=center> </P></TD>
<TD width=76>
<P align=center>性别</P></TD>
<TD width=69>
<P align=center></P></TD>
<TD width=80>
<P align=center>出生年月 </P></TD>
<TD width=159>
<P align=center></P></TD>
<TD width=91>
<P align=center></P></TD>
<TD rowSpan=3 width=91>
<P align=center>相片</P></TD></TR>
<TR>
<TD width=81>
<P align=center>籍 贯 </P></TD>
<TD width=124>
<P align=center></P></TD>
<TD width=76>
<P align=center>民族</P></TD>
<TD width=69>
<P align=center></P></TD>
<TD width=80>
<P align=center>身体状况 </P></TD>
<TD width=159>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>政治面貌 </P></TD>
<TD width=124>
<P align=center></P></TD>
<TD width=76>
<P align=center>身高 </P></TD>
<TD width=69>
<P align=center></P></TD>
<TD width=80>
<P align=center>外语程度</P></TD>
<TD width=159>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>所在学院 </P></TD>
<TD width=124>
<P align=center></P></TD>
<TD width=76>
<P align=center>学 历 </P></TD>
<TD width=69>
<P align=center></P></TD>
<TD width=80>
<P align=center>曾任职务 </P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>所学专业 </P></TD>
<TD width=200 colSpan=2>
<P align=center></P></TD>
<TD width=149 colSpan=2>
<P align=center>特长 </P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>毕业时间 </P></TD>
<TD width=200 colSpan=2>
<P align=center></P></TD>
<TD width=149 colSpan=2>
<P align=center>联系电话 </P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD rowSpan=3 width=81>
<P align=center>家庭住址</P></TD>
<TD rowSpan=3 width=200 colSpan=2>
<P align=center>xx省xx县xx镇xx村</P></TD>
<TD width=149 colSpan=2>
<P align=center>邮政编码 </P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD width=149 colSpan=2>
<P align=center>个人网站</P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD width=149 colSpan=2>
<P align=center>其它</P></TD>
<TD width=249 colSpan=2>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>主修课程 </P></TD>
<TD width=598 colSpan=6>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center><STRONG>个人简历 </P></STRONG></TD>
<TD width=598 colSpan=6>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>熟悉软件 </P></TD>
<TD width=598 colSpan=6>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>个人特点 </P></TD>
<TD width=598 colSpan=6>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>应聘岗位及个人特长和能力 </P></TD>
<TD width=598 colSpan=6>
<P align=center></P></TD></TR>
<TR>
<TD width=81>
<P align=center>社会实践 </P>
<P align=center>经历</P></TD>
<TD width=598 colSpan=6>
<P align=left></P></TD></TR></TBODY></TABLE></DIV>

上面的表格中，“家庭住址”右面的那个单元格，就是既有行合并，也有列合并的单元格。它的代码是：<TD rowSpan=3 width=200 colSpan=2> 其意思为：这个单元格是合并了三行，合并了两列的单元格，也就是把六个小单元格合并为一个大单元格啦。

九、表格的弹性
前面我已经讲过了，表格是一种容器，而且是一种特殊的容器。如果把块区、段落比喻为坛坛罐罐，那么，表格就是有弹性的口袋，而且，这种口袋，只能够撑大，不能够缩回。
举例：
代码：

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 29px" color=#00ffff>内容处</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

上面是一个三层表格的代码。最里层的表格宽度为550px，高度为100px。
在这个表格中，我放入一个宽度为926px高度为1392px的图片，你看看其效果，表格撑大了多少啊！这么大的图片，竟然放进去啦！
代码：

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://userimage5.360doc.com/13/0914/23/9331441_201309142311300094.jpg"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

还是上面的那个三层表格，我放入一个宽度和高度都是20px的小图片，你看看其效果，表格能够缩回来吗？
代码：

<TABLE border=3 cellSpacing=31 borderColor=#05e3dc background=http://image67.360doc.com/DownloadImg/2013/11/1105/36600052_14 align=center>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-BOTTOM: rgb(255,255,255) 2px solid; BORDER-LEFT: rgb(255,255,255) 2px solid; BORDER-TOP: rgb(255,255,255) 2px solid; BORDER-RIGHT: rgb(255,255,255) 2px solid" title=春天没来制作 cellSpacing=10 cellPadding=0 bgColor=#05e30c align=center>
<TBODY>
<TR>
<TD>
<TABLE border=2 cellSpacing=5 borderColor=#05e3dc width=550 background=http://image35.360doc.com/DownloadImg/2011/09/0218/16921244_10.jpg align=center height=100>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://image17.360doc.com/DownloadImg/2010/09/0815/6577832_1.jpg"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

表格缩不回来啦。表格中有很大的空白区域了。所以说，表格是一种特殊的容器，是只能撑大，不能缩回的有弹性的“口袋”。
因此，我们在制作表格的时候，宁可把表格的规格设置得小一点，不要设置得太大了。

作业：
1、表格的结构可以分为哪几部分？
2、制作一个间距为10px ,边距为3px，宽度为500px,高度为100px，背景颜色为绿色的一行一列的表格。
3、制作一个间距为10px ,边距为8px，宽度为500px,高度为300px，背景颜色为粉红色的三行四列的表格。并说说这个表格中一共有几个单元格。
4、制作一个二行三列的表格，在行标签中添加一些属性。
5、制作一个一行五列的表格，在列标签中添加不同的背景颜色。
6、制作一个四层的多重表格，每层的表格标签中设置不同的背景图片。
7、制作一个三行五列的表格，把中间的一行合并为一个单元格。
8、制作一个三行五列的表格，把中间的一列合并为一个单元格。
9、设置一个多行二列的表格，把你图书馆中的优秀文章制作一个链接小模块。
10、说说制作多重表格的方法。

“春天没来”编撰
2014年5月24日于北京

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 春天没来 > 《代码学习群教程》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多