走刀口

使用表格来布局图片的确很方便，首先划分好几行几列，然后在每个单元格中添加图片，表格默认属性是有表格边框的，所以要让图片看来连在一起可以设置以下属性，去掉边框。

<table border="0" cellpadding="0" cellspacing="0" >
	<tr>
		<td><img src="a.jpg" height="50" width="100"/></td>
		<td><img src="b.jpg" height="50" width="100"/></td>
		<td><img src="c.jpg" height="50" width="100"/></td>
	</tr>
</table>

若表格下一行的三张图片的宽度跟上一行的宽度不一致，那么添加第二行图片的时候会让第一行的图片产生间隙。

<table border="0" cellpadding="0" cellspacing="0" >
	<tr>
		<td><img src="a.jpg" height="50" width="100"/></td>
		<td><img src="b.jpg" height="50" width="100"/></td>
		<td><img src="c.jpg" height="50" width="100"/></td>
	</tr>
	<tr>
		<td><img src="d.jpg" height="50" width="50"/></td>
		<td><img src="e.jpg" height="50" width="120"/></td>
		<td><img src="f.jpg" height="50" width="130"/></td>
	</tr>
</table>

要解决这种问题，可以将第二行的图片排列方式改变，合并单元格，然后紧密排列图片。

<table border="0" cellpadding="0" cellspacing="0" >
	<tr>
		<td><img src="a.jpg" height="50" width="100"/></td>
		<td><img src="b.jpg" height="50" width="100"/></td>
		<td><img src="c.jpg" height="50" width="100"/></td>
	</tr>
	<tr>
		<td colspan="3">
		<img src="d.jpg" height="50" width="50"/>
		<img src="e.jpg" height="50" width="120"/>
		<img src="f.jpg" height="50" width="130"/>
		</td>
	</tr>
</table>

但是这样仍然会出现间隙，这个时候只要给图片设置统一的部局就行了，加上

vertical-align: bottom;

或者

vertical-align: top;

代码如下：

<table border="0" cellpadding="0" cellspacing="0" >
	<tr>
		<td><img src="a.jpg" height="50" width="100"/></td>
		<td><img src="b.jpg" height="50" width="100"/></td>
		<td><img src="c.jpg" height="50" width="100"/></td>
	</tr>
	<tr>
		<td colspan="3">
		<img src="d.jpg" height="50" width="50" style="vertical-align:bottom;"/>
		<img src="e.jpg" height="50" width="120" style="vertical-align:bottom;"/>
		<img src="f.jpg" height="50" width="130" style="vertical-align:bottom;"/>
		</td>
	</tr>
</table>

这样写在IE6下可能也会出现间隙，解决办法是将这些图片标签紧密连接在一起

<img src="" /><img src="" /><img src="" />

最终代码如下：

<table border="0" cellpadding="0" cellspacing="0" >
	<tr>
		<td><img src="a.jpg" height="50" width="100"/></td>
		<td><img src="b.jpg" height="50" width="100"/></td>
		<td><img src="c.jpg" height="50" width="100"/></td>
	</tr>
	<tr>
		<td colspan="3"><img src="d.jpg" height="50" width="50" style="vertical-align:bottom;"/><img src="e.jpg" height="50" width="120" style="vertical-align:bottom;"/><img src="f.jpg" height="50" width="130" style="vertical-align:bottom;"/>
		</td>
	</tr>
</table>