Статья: Язык разметки гипертекста
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>
<td align="right" valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td>
<td align="left" valign="top"><a href="http://aport.ru"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0"></a></td>
</tr>
</table>
</body>
</html>
Обратите внимание, что параметр border для всех кусков картинки взят нулевой - иначе каждая будет окружена противным голубым венчиком.
Высота первой ячейки (а, следовательно, и первой строки) указанная как 65% указана для того, чтобы картинка действительно собралась в центре окна. Если этот параметр убрать, то из-за разного размера картинок результирующее изображение окажется ниже центра. Значение 65% подобрано методом тыка.
Всё бы ничего, но при просмотре примера видим, что куски картинки разделены, не сливаются в единое изображение. Это можно преодолеть, используя два не описанных ранее параметра тэга table, описывающих расстояния между ячейками таблицы - cellspacing и cellpadding (точнее, между ячейками в строке и между строками). Естественно, параметр border тоже надо приравнять нулю.
Пример:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>