最近在学html，发现在html中使用表格(table)时，如果想让表格按自已的想法显示，还挺不容易的，比如下面的效果:
于是把自已研究的心得整理一下，以便以后查看，同时发布到网上，和朋友们交流经验。
1、table表的大小可以用象素、百分比两种方式调整。象素方式比较简单，直接按象素大小设置即可，但百分比有点讲究，width:50%是以父控件宽度的50%象素来设置，如果父控件的宽高不确定，就不能使用百分比。
象素方式:百分比方式:
<table border="1"style="width:200px;height:100px">
</table>
<table border="1"style="width:50%;height:50%">
</table>
2、tr表示表格的行，注意在tr中只能设置高(height)，不能设置宽(width)，在设置高度时，也可以使用象素和百分比。tr中的height:100%表示这一行的高度和整个表格的高度一样，直接使用height:100px等价。
<table border="1"style="width:200px;height:100px">
<tr style="height:100%">
<td>名字</td>
<td>孔明</td>
</tr>
</table>
<table border="1"style="width:200px;height:100px">
<tr style="height:100px">
<td>名字</td>
<td>孔明</td>
</tr>
</table>
3 、tr的高度并不总是固定的，它会因这一行中内容的大小改变，就算设置了tr的高度，也会改变，如果tr的高度比表格的高度还高，则表格的高度会拉伸。左图没有为tr设置高度，右图将写入两行文字，tr高度被自动拉伸了。
<table border="1" style="width:200px;">
<tr>
<td>名字</td>
<td>孔明</td>
</tr>
</table>
<table border="1" style="width:200px;">
<tr style="height:15px">
<td>名字</td>
<td>孔明<br>孔明</td>
</tr>
</table>
4、td表示表格的列，如果不在tr中设置高度，在td中设置高度也行，效果和在tr中设置高度一样，但要注意这一行的高度是取这几列中高度最大的td。左图中没有为td设置高度，每一列都是一样高，右图中取高度最大的40px那一列高。
<table border="1" style="width:200px;">
<tr>
<td >名字</td>
<td >孔明</td>
</tr>
</table>
<table border="1" style="width:200px;">
<tr>
<td style="height:40px">名字</td>
<td style="height:15px">孔明</td>
</tr>
</table>
5、在td中也可以设置宽度，可以使用象素和百分比。左图中两列各占20%和80%，与直接设置两列分别为40px和160px等价(总的表格宽为200px)。
<table border="1" style="width:200px;">
<tr>
<td style="width:20%">名字</td>
<td style="width:80%">孔明</td>
</tr>
</table>
<table border="1" style="width:200px;">
<tr>
<td style="width:40px">名字</td>
<td style="width:160px">孔明</td>
</tr>
</table>
6、如果表格设置了宽度，则在td中设置宽度不起作用，每个td的宽度是平均分配总的表格宽度。如果表格没有设置宽度，则每个td设置的宽度才起作用。左图是表格没有设置宽度，每个td的宽度都是100px。右图是表格设置了宽度，每个td的宽度是平均分配表格宽度，都为20px。
<table border="1">
<tr>
<td style="width:100px">名字</td>
<td style="width:100px">孔明</td>
</tr>
</table>
<table border="1" style="width:40px">
<tr>
<td style="width:100px">名字</td>
<td style="width:100px">孔明</td>
</tr>
</table>
7、表格中一列的宽度是取这几行中宽度最大的td。左图中每一行的td都是一样宽，右图中第二行的第二列的td变宽了，整个表格中第二列的宽度就被拉伸了。
<table border="1">
<tr>
<td>名字</td>
<td>孔明</td>
</tr>
<tr>
<td>名字</td>
<td>孔明</td>
</tr>
</table>
<table border="1">
<tr>
<td>名字</td>
<td>孔明</td>
</tr>
<tr>
<td>名字</td>
<td>孔明孔明孔明孔明</td>
</tr>
</table>
8、在td中设置宽度可以对文字起到限定宽度功能，但是对图片无效。下面两种表格都设置了第二列的宽度为20px，但左图对文字的宽度起到了限定作用，右图对图象无法起到限定，td仍然被拉伸了。
<table border="1">
<tr>
<td style="width:20px">名字</td>
<td style="width:20px">孔明孔明孔明孔明</td>
</tr>
</table>
<table border="1">
<tr>
<td style="width:20px">名字</td>
<td style="width:20px"><img src="正常.jpg"></td>
</tr>
</table>
在了解了表格的一些基本效果后，我们来实现教程开头的那张表格的代码写法。我们先绘制一个3行2列的表格。第一列显示图片，第二列显示文字，图片的大小是64*64像素。
<table border="1" style="width:500px">
<tr style="height:64px">
<td style="width:64px"><img src="诸葛亮.jpg"></td>
<td style="width:436px">孔明，号卧龙，徐州琅琊阳都人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px"><img src="关羽.jpg"></td>
<td style="width:436px">关羽，字云长，河东郡解良人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px"><img src="张飞.jpg"></td>
<td style="width:436px">张飞，字益德，幽州涿郡人。</td>
</tr>
</table>
如果将关羽的图片改为(128*64)，张飞的图片改为(64*128)，孔明图为(64*64)，我们看上面那段代码会产生什么效果吧。
可以看到虽然表格中的每一列都限定了宽和高，但还是根据图片的大小被自动撑大了，这不是我想要的效果，这个时候我们应该限定图片，使图片保持和td一致，我们可以修改代码如下:
<table border="1" style="width:500px">
<tr style="height:64px">
<td style="width:64px"><img src="诸葛亮.jpg"style="width:64px;height:64px"></td>
<td style="width:436px">孔明，号卧龙，徐州琅琊阳都人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px"><img src="关羽.jpg"style="width:64px;height:64px"></td>
<td style="width:436px">关羽，字云长，河东郡解良人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px"><img src="张飞.jpg"style="width:64px;height:64px"></td>
<td style="width:436px">张飞，字益德，幽州涿郡人。</td>
</tr>
</table>
在上面的效果中，仍然看到了不对的地方，那就是关羽和张飞的图片都产生了不等比例的缩放，导致人物图变形了，我们需要继续修改代码，我在代码中的< img src>标签后增加了
“max-width:64px;max-height:64px”，这句话的意思就是图片最大的可能宽度为64像素以及图片最大的可能高度为64像素，这就保证了当图片的宽度超过64像素时，以最大的64像素限定宽度，高度也就按原图的比例缩放到64像素之内了，关羽的那张图就被限定在宽度为64像素，高度被等比例缩放到32像素了。同样，图片的高度超过64像素时，效果等同。另外我在td中增加了align="center"属性，以保证图片在表格中居中显示。
<table border="1" style="width:500px">
<tr style="height:64px">
<td style="width:64px" align="center"><img src="诸葛亮.jpg" style="max-width:64px;max-height:64px"></td>
<td style="width:436px">孔明，号卧龙，徐州琅琊阳都人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px" align="center"><img src="关羽.jpg" style="max-width:64px;max-height:64px"></td>
<td style="width:436px">关羽，字云长，河东郡解良人。</td>
</tr>
<tr style="height:64px">
<td style="width:64px" align="center"><img src="张飞.jpg" style="max-width:64px;max-height:64px"></td>
<td style="width:436px">张飞，字益德，幽州涿郡人。</td>
</tr>
</table>
现在添加比较多的文字，可以看到出现了不正常的显示效果，虽然限定了第二列表格的宽高，但是文字仍然将原先的表格撑大了，另外图片的显示也不正常了，我们现在需要将每一行的高度限定在原先的64像素，也就是诸葛亮图的高度。
我们需要修改代码如下，可以看到在td的style中增加了4个属性，将tr中的height属性改变到td中，然后使用”display:block”限定td的宽高，防止由于文字太多导致表格被撑大。另外我们使用”word-wrap:break-word”使超过td宽度的文字自动换行，再加上
” overflow-y:auto”属性为td增加滚动条。到此我们的例子的最终效果出来了(如图文章开头的那张效果图)可以看出要使表格按我们的意图显示，还是需要花费一些工夫的，希望这篇教程能帮到大家。
<table border="1" style="width:500px">
<tr>
<td style="width:64px" align="center"><img src="诸葛亮.jpg" style="max-width:64px;max-height:64px"></td>
<td style="width:436px;height:64px;display:block;word-wrap:break-word;overflow-y:auto">诸葛亮（181年－234年10月8日[1] ），字孔明，号卧龙（也作伏龙），汉族，徐州琅琊阳都（今山东临沂市
沂南县）人，三国时期蜀汉丞相，杰出的政治家、军事家、散文家、书法家、发明家。在世时被封为武乡侯，死后追谥忠武侯，东晋政权因其军事才能特追封他为武兴王。其散文代表作有《出师表》、《诫子书》等。曾发明木牛流马、孔明灯等，并改造连弩，叫做诸葛连弩，可一弩十矢俱发。于建兴十二年（234年）在五丈原（今宝鸡岐山境内）逝世。刘禅追谥其为忠武侯，故后世常以武侯、诸葛武侯尊称诸葛亮。诸葛亮一生“鞠躬尽瘁、死而后已”，是中国传统文化中忠臣与智者的代表人物。[2] </td>
</tr>
<tr>
<td style="width:64px" align="center"><img src="关羽.jpg" style="max-width:64px;max-height:64px"></td>
<td style="width:436px;height:64px;display:block;word-wrap:break-word;overflow-y:auto">关羽（？－220年），本字长生，后改字云长，河东郡解良（今山西运城）人，东汉末年名将，早期跟随刘备辗转各地，曾被曹操生擒，于白马坡斩杀袁绍大将颜良，与张飞一同被称为万人敌。赤壁之战后，刘备助东吴周瑜攻打南郡曹仁，别遣关羽绝北道，阻挡曹操援军，曹仁退走后，关羽被刘备任命为襄阳太守。刘备入益州，关羽留守荆州。建安二十四年，关羽围襄樊，曹操派于禁前来增援，关羽擒获于禁，斩杀庞德，威震华夏，曹操曾想迁都以避其锐。后曹操派徐晃前来增援，东吴吕蒙又偷袭荆州，关羽腹背受敌，兵败被杀。关羽去世后，逐渐被神化，被民间尊为“关公”，又称美髯公。历代朝廷多有褒封，清代奉为“忠义神武灵佑仁勇威显关圣大帝”，崇为“武圣”，与“文圣” 孔子齐名。《三国演义》尊其为蜀国“五虎上将”之首，毛宗岗称其为“《演义》三绝”之“义绝”。</td>
</tr>
<tr>
<td style="width:64px" align="center"><img src="张飞.jpg" style="max-width:64px;height:64px"></td>
<td style="width:436px;height:64px;display:block;word-wrap:break-word;overflow-y:auto">张飞（？－221年），字益德[1] ，幽州涿郡（今河北省保定市涿州市）人氏，三国时期蜀汉名将。刘备长坂坡败退，张飞仅率二十骑断后，据水断桥，曹军没人敢逼近；与诸葛亮、赵云扫荡西川时，于江州义释严
颜；汉中之战时又于宕渠击败张郃，对蜀汉贡献极大，官至车骑将军、领司隶校尉，封西乡侯，后被范强、张达刺杀。后主时代追谥为“桓侯”。在中国传统文化中，张飞以其勇猛、鲁莽、嫉恶如仇而著称，虽然此形象主要来源于小说和戏剧等民间艺术，但已深入人心。</td>
</tr>
</table>
