表格使用的常见问题及解决方法

《表格使用的常见问题及解决方法》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、表格使用的常见问题及解决方法、表格使用的常见问题及解决方法　　初学者在使用表格时，可能会遇到各种问题，由于对标记还不是很熟悉，所以往往对这些问题感到莫名其妙，一筹莫展。有时侯甚至因为在这些问题上纠缠不清而最终心烦意乱丧失了继续学习的兴趣。所以在这里，我们列出了表格使用过程中最常见的问题来加以分析，希望能给大家带来帮助　　1.表格的变形问题(原作者：秋实)　　网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢?秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。　　A、因为表格排列设置而在不同分辨率

2、下所出现的错位　　这种变形情况是：　　1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却左排列或右排列，很难看，这是什么原因呢？　　在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或左或右。　　2、同样是这种分辨率切换，表格的上下排列不一致。　　上边的所说的是水平错位，而这种则

3、是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。　　B、采用百分比而出现的变形　　这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的，常出现在IE浏览器中，随便

4、改动主页窗口的大小时，表格的内容也随之错位、变形，这是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。　　当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分比，这样就不会出现变形了。C、表格单元格之间互相干扰引起的变形　　这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，而又不知原因在哪，很是令人讨厌。　　本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如

5、没有，可能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。　　我们知道，同一行的表格单元在诸如DreamWeaver或FrontPage中经常频繁地被拆分，所以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：colspan、rowspan。colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和，如下图。　　　　　　这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值)，即co

6、lspan=3；而竖向的高度是三个表格单元高度的总和，即rowspan=3。　　那么我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的，我本人提倡，如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。　　出现变形有情况还很多，我们就不一一陈述，我建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。　　2、图片显示的问题2、图片显示的

7、问题　　有时候我们明明在单元格中插入了背景图片，而且在Dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格：   表格代码：＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞＜trbackground="hzz01_050213.gif"＞＜tdheight="19"＞ ＜/td＞＜tdheight="19"＞ ＜/td＞＜/tr＞＜/table＞　　不错，上面

8、的背景图确实有(background="hzz01_050213.