技巧,在细节之处体现
HTML表格由于它的易用性和丰富的表达效果而备受网页编写人员的青睐。但美中不足的是浏览器必须将整个表格的内容全都下载下来才能正确显示,较大的表格可能会造成浏览者较长时间的等待。值得庆幸的是,CSS有一种属性即TABLE-LAYOUT能够设置浏览器在绘制表格时的工作方式,若将值设为FIXED的话(默认值为AUTO),浏览器会以fix table layout的算法来绘制表格,不必等整个表格的数据装入就能把表格画出,这就能避免等待。应该注意的是,使用这种样式时应该尽量为第一个<tr></tr>中所有单元格(<td></td>)指定大小,否则浏览器可能会平分各个单元格。另外,这种样式不适合单元格分布复杂的表格。
例:
<table style=″table-layout:fixed″ width=″100%″ border=″0″ cellspacing=″0″ cellpadding=″0″ title=″快速显示的表格″>
<tr>
<td width=″50%″>第一格</td>
<td width=″50%″>第二格</td>
</tr>
</table>
#1 2.HTML标签(tags)之间可以随意换行吗?
无论是哪个版本的HTML标准都明确地告诉我们浏览器将忽略两个标签之间的“换行”——即另起一行(MS Windows对它的定义是“换行加回车”),但实际上可能不是这样——而且有可能还会造成麻烦,请见以下例子。
例:下面的代码在IE5中显示的情况(^41040203a^1)。可以看到,这个被设置边框为1、单元格边距和间距皆为0的表格与包围在表格中的图像紧密结合在一起。
<table border=″1″ cellspacing=″0″ cellpadding=″0″>
<tr>
<td><img border=″0″ src=″samPic051301.gif″ width=″100″ height=″125″></td>
</tr>
</table>
但如果在</td>标签之前加一个“换行”(即如下代码)显示的效果就出来了(^41040203b^2)。可以很明显地看出图片与表格之间有了一个空白区,在Netscape 4.61中这种现象会更加严重。
<table border=″1″ cellspacing=″0″ cellpadding=″0″>
<tr>
<td><img border=″0″ src=″samPic051301.gif″ width=″100″ height=″125″>
</td>
</tr>
</table>
再看一个例子,是下面的代码在Netscape 4.61中的显示效果(^41040203c^3)。可以看到,第二个超链接仅仅多了一个换行就多了一条“尾巴”。
<a href=″http://www.pcwclub.com″>欢迎访问电脑报读者俱乐部</a>
<a href=″http://www.pcwclub.com″>欢迎访问电脑报读者俱乐部
</a>
我想谁都不想因为这种不知道为什么的原因(可能正是那个MS系统该死的“换行”定义吧)而使原来应该美观的页面大煞风景吧,所以建议大家在编写代码时尽量注意将容器标签写在同一行。(Contion)