Шаг 29 - Склеивание рисунков в таблице

Хочу обратить твое внимание на такую вещь (по поводу уроков 12-14): ты в целях экономии призываешь не ставить закрывающие тэги в элементах таблицы (урок 12). Я разрезал рисунок из урока 14 и попытался "склеить" его, используя таблицу. В результате между строками таблицы образовывались промежутки, из-за которых картинка не была единым целым. И только после того, как я расставил закрывающие тэги, картинка "сложилась". Подобных писем я получал несколько, и даже в одной рассылке для веб-мастеров этой теме было уделено внимание. Но они почему-то отнесли это к "багам", которые существуют в эксплорере, но дело совершенно не в этом. Такая проблема существует и в Netscape и вероятно в других браузерах. Стоило видимо написать об этой проблеме раньше, но лучше поздно, чем никогда.

Я одно время занимался написанием оптимизатора HTML документов и пока за неимением времени бросил это дело. Так вобщем подойдем к этой проблеме с точки зрения программирования, так как именно разбором исходников html я занимался целыми ночами %) Вот код html, с которым будем эксперементировать:

<html>
<table border=1>
<tr><td><img src=1.gif></td></tr>
</table>
</html>
Как Вы видите это таблица с одной ячейкой, в которой находится изображение. Для начала напишем сразу после изображения несколько букв, чтобы кое что понять... Код такой:
<html>
<table border=1>
<tr><td><img src=1.gif>123456</td></tr>
</table>
</html>
Изображение можно взять любое, я взял из шага про Микки Мауса. Теперь смотрим на то, что получилось. А получилось то, что по правилам хорошего тона браузер совместил нижнюю границу изображения с нижней границей букв:

29_1.gif (866 b)

Но если Вы помните у каждой буквы есть часть, которая находится ниже основной линии, например в этой части изображаются хвостики букв y или p, поэтому если Вы выделите все что находится на странице клавишами Ctrl-A, то получите следующее:

29_2.gif (730 b)

Как видите именно эта область букв и отодвигает границу ячейки ниже уровня изображения, иначе бы получалось, что некоторые буквы затрагивали бы рамку таблицы. Теперь мы понимаем откуда возникает этот отступ.

В случае когда Вы пишете из экономии тег не закрытым, Вы получаете следующий вариант кода:

<html>
<table border=1>
<tr><td><img src=1.gif>
</table>
</html>
Как я уже писал раньше, да и Вы должны знать, браузер игнорирует любые переносы (если они не в <pre>) и заменяет их на пробелы. Он также "штука" не обладающая совершенно никаким уровнем интелекта и эвристичности. Поэтому он делает совершенно тривиальную в данном случае операцию - он резервирует место под тот текст, который по его предположению может оказаться на следующей строке документа. Но в итоге, после того как он считывает очередную строку, он понимает, что на самом деле текста то и не будет и закрывает таблицу. При этом естественно отступ в ячейке он сохранет и отнимать что-либо не будет просто по здравому смыслу. А смысл в том, что может там и должен быть этот самый отступ, может быть Вы не стали явно указывать пробел, а заменили его переносом строки. Ему же не известно, что Вы хотите склеить рисунок в таблице. Таким образом мы получаем следующую ситуацию:

29_3.gif (610 b)

Как Вы видите отступ тут присутствует и должен присутствовать. Кстати на счет этого эффекта "мнимого" текста, всем известный браузер от еще более известной фирмы все лишние последние пробелы в ячейках удаляет, это выяснить Вы можете поэксперементировав. Netscape же не удаляет лишние пробелы и поэтому там этот отступ растет не только вниз, но и вправо.

Вобщем хватит воды и приступим к решению... Как же можно не нарушать хорошей традиции экономить пространство, и при этом получать правильно отображенный документ ? А совсем просто, вот пример:

<html>
<table border=1>
<tr><td><img src=1.gif></table>
</html>
Видите разницу ? Наверняка видите... Закрывающего тега тут нет и в тоже время ячейка полностью закрыта, т.е. не имеет непонятных пробелов и отступов. Правило тут как и везде простое: "Используй следующий тег в качестве закрывающего". Понятное дело, что многие теги так нельзя закрывать, но тут идет речь о ненужных закрывающих тегах, которые при этом очень сильно могут влиять на отображение (к ним как раз и можно отнести таблицу). Вот что получается в итоге, причем в обоих браузерах:

29_4.gif (394 b)

Как видите никаких отступов, никаких дырок и прочего. Браузер не ломает голову и Вы тоже... Кстати по одной только этой причине Вы можете понять всю прелесть кода "в одну строку". Вы экономите сотни байт на переносах строк, на ненужных оступах, тегах и т.д. При этом получаете код, который наиболее приятен браузеру и при этом сломает голову любому Васе Пупкину, стремящемуся заполучить секрет Вашего оформления. Это очень хорошо, осталось только приучить народ к этому... Я думаю после этого шага хоть парочка новых веб-мастеров прекратит наконец-то извращаться с отступами "для красоты кода" и переносами строк. Я не заставляю писать Вас такой код сразу, потому как это иногда достаточно сложно, но Вы же вполне способны написать его "чисто" и потом просто склеить все в одну строку перед помещением страницы на сервер. Код в одну строку ФАРЕВА !!! Долой лишние теги !!! Сделаем мир чище %))) Ну ведь классно же выглядит !!! Или я не прав ???

<html><table border=1><tr><td><img src=1.gif></table></html>

Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.