Глоток воздуха

Информационному элементу нужен воздух

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

Таблица

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

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

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

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

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

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

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

Замечание

Всегда явно задавайте в таблице значения атрибутов cellspacing и cellpadding. Если они будут опущены, браузер установит значения по умолчанию, причем умолчания у разных браузеров свои. Не следует доверять браузеру делать такие вещи по своему усмотрению.

Ниже представлен код резиновой страницы с двухколонным выводом текста на экран.

<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Тестирование таблицы</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black
        link=blue alink=red vlink=purple>

    <TABLE width=100% border=0
           cellspacing=0 cellpadding=10>
      <TR align=left valign=top>
        <TD colspan=2>
          <H2>Тестирование таблицы</H2>
          <HR>
        </TD>
      </TR>
      <TR align=left valign=top>
        <TD width=50%>
          <P>
Иван пошел в лес за грибами. Стоял чудесный день сентября.
          <P>
Иван пошел в лес не один, он взял с собой собаку, которая
любила лесные прогулки.
        </TD>
        <TD>
          <P>
Под высокой стройной березой Иван нашел сразу три молодых
гриба.
          <P>
Собака от радости носилась вокруг хозяина, и хвост ее
совершал колебательные движения, что означало высшую
степень собачьего восторга.
        </TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Посмотрите, как браузер отображает этот код.

Вариант 1
```
<TABLE width=100% border=0
       cellspacing=0 cellpadding=0>
```
Измените ширину окошка браузера. В некоторых случаях будет особенно видно, как тексты двух колонок близко жмутся друг к другу.
Вариант 2
```
<TABLE width=100% border=0
       cellspacing=0 cellpadding=10>
```
Здесь колонки отчетливо отделяются друг от друга вертикальным разделительным полем и не сливаются в один текстовый массив.

Замечание

Замените тег TABLE на следующий:

<TABLE width=100% border=0 bgcolor=#C0C0C0
       cellspacing=10 cellpadding=0>

Посмотрите на страницу в IE и NN. Вы увидите, что в NN фон таблицы не образует сплошной прямоугольник: поля, задаваемые cellspacing оказываются прозрачными.

Если написать так:

<TABLE width=100% border=0 bgcolor=#C0C0C0
       cellspacing=0 cellpadding=10>

и снова посмотреть страницу в NN, то теперь все хорошо: фон таблицы сплошной.

Картинки

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

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

<HTML>

  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Тестирование картинки</TITLE>
  </HEAD>

  <BODY text=black link=blue alink=red vlink=purple>

    <H2>Тестирование картинки</H2>
    <HR>

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

  </BODY>
</HTML>

Вы видите, как текст “душит” Сидорова, прижимаясь к нему вплотную.

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

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

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

Атрибуты vspace и hspace определяют свободное пространство слева и справа (hspace) и над и под (vspace) IMG. По умолчанию значения этих атрибутов не определены, но обычно это небольшие ненулевые значения.

Иван Сидоров kurs@robotland.pereslavl.ru