Прижатость элементов друг к другу

Одна из распространенных ошибок начинающих — “удушение” информационных элементов на экране путем слишком тесного их расположения.

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

Таблица

Пример из конкурсной работы:

Это мы! Рассказ о нашей команде.
Cоветы Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки Их немного, но они нам помогают.
Афоризмы Личная страничка Скляровой Насти.
Фразмочки Работа Горошковой Елены.

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

Промежуток легко образуется, если задать нужные значения атрибутам cellspacing и cellpadding в теге TABLE. (Атрибут cellspacing задаёт расстояние между ячейками таблицы, атрибут cellpadding — расстояние между содержимым ячейки и рамкой ячейки.)

Для образования полей вокруг элемента, помещенного в ячейку, таблицу можно кодировать, например, так:

<TABLE cellspacing=0 cellpadding=10 другие атрибуты>

Это мы! Рассказ о нашей команде.
Cоветы Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки Их немного, но они нам помогают.
Афоризмы Личная страничка Скляровой Насти.
Фразмочки Работа Горошковой Елены.
Замечание
Всегда явно задавайте в таблице значения атрибутов cellspacing и cellpadding. Если они будут опущены, браузер установит значения по умолчанию, причем умолчания у разных браузеров свои. Не следует доверять браузеру делать такие вещи по своему усмотрению.

Картинки

Второй способ “удушения” информационного элемента, который пользуется успехом на роботландском конкурсе Проба пера — это перекрытие кислорода тексту при помощи прижатия его к картинке.

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

Этот фрагмент задается следующим кодом:


          <P>
<IMG src="/pic/title1.gif"
     width=93 height=64
     align=left
     border=0 alt=Сидоров>
Иван пошел в лес за грибами. Стоял чудесный день
сентября. Иван пошел в лес не один, он взял с собой
собаку, которая любила лесные прогулки. Под высокой
стройной березой Иван нашел сразу три молодых гриба.
Собака от радости носилась вокруг хозяина, и хвост ее
совершал колебательные движения, что означало высшую
степень собачьего восторга.<BR clear=left>
Вы видите, как текст “душит” Сидорова, прижимаясь к нему вплотную.

Напишите теперь:

<IMG src="pic/title1.gif"
     width=93 height=64
     align=left
     hspace=10
     border=0 alt=Сидоров>

Вы увидите, как Сидоров дышит полной грудью.

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

Атрибуты hspace и vspace определяют свободное пространство:

По умолчанию значения этих атрибутов не определены, но обычно это небольшие ненулевые значения.

Ещё лучше указывать отступы при помощи CSS. Вот как, например, выглядит тот же текст с картинкой, для которой задано padding: 0 10px 10px 0. Заметим, что отступ в 10 пикселов назначен только справа и снизу, а слева и сверху картинка осталась выровненной по тексту (что очень правильно).

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