CODE:
(Также см. рис. 1)<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px">
<img src="image2.gif" height="50px" width="50px">
</td></tr>
<tr><td>
<img src="image3.gif" height="20px" width="100px">
</td></tr>
</table>
<tr><td>
<img src="image.gif" height="50px" width="50px">
<img src="image2.gif" height="50px" width="50px">
</td></tr>
<tr><td>
<img src="image3.gif" height="20px" width="100px">
</td></tr>
</table>
Отсавим в стороне разговоры о целесообразности такой конструкции и табличной вёрстки сайта вообще. Речь о том, что эти три картинки не будут чётко совмещены. Между ними будет промежуток примерно в 4 пикселя - достаточно, чтобы испортить внешний вид сайта. В чём дело? Ведь кроме картинок в ячейках таблицы ничего нет! На самом деле есть. Это перевод строки. Да-да, тот безобидный символ (или пара символов), который добавляется клавишей Enter! Теоретически, браузер должен обращать на него не больше внимания, чем на стоящий на мониторе кактус, но увы...
Можете скопировать приведённый код в хтмл-файл и посмотреть (отсутствие у вас файлов image-раз-два-три.gif ничего не меняет). Можете заодно поcтавить таблице свойство border="1", дабы увидеть "игнорируемые браузером" переводы строки во всей "красе". Ещё в их поиске очень помогает команда "выделить всё".
Наверняка многие сталкивались с подобной проблемой. Кто-то догадывался, в чём дело и делал естественный вывод: не использовать переводы строки или размещать их иначе, например так:
CODE:
(Рис. 2)<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px"><img src="image3.gif" height="50px" width="50px"></td>
</tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"></td>
</tr>
</table>
<tr><td>
<img src="image.gif" height="50px" width="50px"><img src="image3.gif" height="50px" width="50px"></td>
</tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"></td>
</tr>
</table>
Это, разумеется, работало правильно (переводы строки между слжебными тегами table, tr и td действительно игнорируются, как и пробелы и символы табуляции). Но очень страдает читабельность кода. Тем более, что картинок в ячейке может быть и пять и десять. Такую длинную строку довольно сложно прочесть и тем более править. Есть другой путь! Он основывается на том, что внутри тегов может быть сколько угодно мусора, т.е.
CODE:
вполне работоспособен. Таким образом, приведённый выше пример можно записать так:<img src="1.jpg"
alt=":-)"
>
alt=":-)"
>
CODE:
(См. рис. 3)<table border="1" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"
></td></tr>
</table>
<tr><td>
<img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"
></td></tr>
</table>
Т.е. перевод строки без ущерба для дела мы смещаем внутрь тега. Приноровившись, можно так писать всегда, даже там, где это не необходимо, т.е. получать примерно такой
CODE:
(рис. 4)<table border="0" cellpadding="0" cellspacing="0"
><tr><td
><img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr
><tr><td
><img src="image2.gif" height="20px" width="100px"
></td></tr
></table>
><tr><td
><img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr
><tr><td
><img src="image2.gif" height="20px" width="100px"
></td></tr
></table>
Это совсем не сложно.
Фактически, это статья, впоследствии я размещу её на сайте. Жду критики, замечаний, отзывов
=> 
Я сначала не понял даже => 
=> !! 