伸縮する画像をスマホで表示

画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。

		<div class="div_Wrap clearfix">
			<table id="photoAllWrap" cellpadding="0" cellspacing="0">
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
			</table>
		</div>

#mainWrap .div_Wrap {
	width:94%;
	max-width:600px;
	margin:auto auto 30px auto;
}

#mainWrap #photoAllWrap {
	width:94%;
	margin:auto auto auto;
}

#mainWrap #photoAllWrap tr td{
	width:25%;
	padding:2px;
	background-color:#ffffff;
}

#mainWrap #photoAllWrap img {
	width:100%;
	border:2px #999999 solid;
}