Пропорционально растягивающийся табличный grid

Последнее время просто завален работой, по этому очень мало остается времени для этого моего самого любимого сайта.

По моей работе, мне понадобится в ближайшее время, такая табличка, в которой бы высота ячеек растягивались бы пропорционально их ширине.

Где такое может пригодиться? Ну скажем на резиновых сайтах например, где нужно разместить н-ное количество различных иконок или пиктограмм в таблице и эта таблица должна тянуться. Пиктограммы при этом изменять свои размер не должны, но отступы вокруг иконок должны быть плавающими со всех сторон. Чтобы голову не ломать, проще посмотреть пример.

Проверил в последнем FF 3.5, Опере, IE 8, жаль под рукой нет IE 6 и IE7. Я думаю справился с поставленной задачей, может и не очень красиво, но если есть более красивый способ, прошу в комменты, мне будет очень интересно.

Ну а теперь исходники данного примера.
CSS

body {
	margin:2px;
}
table.scgrid{
	width: 100%;
	min-width:500px;
	border: solid 1px;
	width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 500 ? '500px' : (document.documentElement.clientWidth || document.body.clientWidth) > 1400 ? '1000px' : '100%' );
}
	table.scgrid td div {
		position: relative
	}
	table.scgrid td div img.pic {
		width:100px;
		height:100px;
		position: absolute;
		top: 50%;
		left:50%;
		margin-left:-50px;
		margin-top:-50px;
	}
	table.scgrid td div img.scaler {
		width:100%;
		border: solid 1px #d0d0d0;
	}

HTML

<table class="scgrid" cellspacing="0" cellpadding="0">
<tr>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
</tr>
<tr>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
</tr>
<tr>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
</tr>
<tr>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
	<td><div><img src="1.png" class="pic"><img src="0.gif" class="scaler"></div></td>
</tr>
</table>

Похожие записи:

1. Реализация min-width и max-width для IE6
2. Узнаем ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части
3. Редактируем любой сайт в интернете
4. JavaScript: обработка нажатий клавиш