Шаг IV. Работа с отдельными ячейками

До сих пор мы говорили лишь о параметрах всей таблицы. Изменяемые нами свойства добавляли и меняли различные атрибуты тэга <table> в HTML-коде. Теперь же речь пойдет об отдельных ячейках, т.е. об изменении атрибутов тэгов <td>.

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


Как видите, внешний вид панели вроде бы такой же, как при редактировании абзаца текста. И действительно, все "текстовые" свойства относятся именно к содержимому ячейки, а не к ней самой. Но есть здесь и инструментарий для работы именно с тэгом <td>. Его-то мы и рассмотрим поближе.

В левом нижнем уголке, под надписью "Cell", располагаются кнопочки для грамотного, с использованием атрибутов colspan и rowspan, объединения и деления ячеек. Если курсор просто находится внутри ячейки, мы можем воспользоваться только правой кнопкой - для деления ячейки на нужное количество строк или столбцов. При нажатии на эту кнопку вылезает диалоговое окошко, предлагающее нам выбрать нужный способ деления.

Чтобы объединить несколько ячеек (как по горизонтали, так и по вертикали), нужно сначала выделить их при помощи мышки. Объединение происходит сразу же после нажатия соответствующей кнопочки (слева, под надписью "cell"), никаких диалоговых окон при этом не появляется.

Дальше следуют инструменты для вертикального и горизонтального выравнивания содержимого ячейки (Horz и Vert, соответственно) - установка определенных значений с помощью этих инструментов добавляет в код страницы атрибуты align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тэга <td>.

W и H - ширина и высота текущей ячейки в пикселах. Обратите внимание - Навигатор может проигнорировать эти параметры, если они не подкреплены содержимым соответствующей ширины и высоты. А может и не проигнорировать - в зависимости от версии, операционной системы и погоды за окном. Обращение Навигатора с таблицами до сих пор остается загадкой даже для опытных вебмастеров.

Если поставить галочку в поле No Wrap, ячейка таблицы станет "несжимаемой" при сворачивании окна браузера. Это может быть полезно, если вы не хотите, чтобы текст в ячейке занимал меньшую, чем вами задумано, ширину. Навигатору на этот параметр наплевать, как и на многие другие.

Если поставить галочку в поле Header, Dreamweaver автоматически заменит для текущей ячейки тэг <td> на <th>. Th обозначает "заголовочную" ячейку. Этот тэг был введен в употребление сравнительно недавно, Навигатор его не понимает, в связи с чем может образоваться сильная путаница. Лучше отложить использование этой возможности до лучших времен.

Дальше, как и в свойствах таблицы, идут поля для задания цвета границ ячейки, фонового цвета и фонового изображения. Здесь тоже не все гладко с разными браузерами, убедитесь сами:

Примечание:
При использовании рисунка в качестве фона Навигатор чудит еще сильнее. Он уверен, что если мы задали фоновый рисунок для всей таблицы, то мы просто обязаны в ячейках использовать его же. Таблица с фоновым рисунком и ячейками, залитыми цветом, не укладывается у него в голове. Чтобы обойти эту причуду, следует использовать в качестве фона ячеек однопиксельный прозрачный GIF. Тогда таблица с фоновым изображением и цветными ячейками будет отображена приблизительно одинаково и в IE, и в NN.

Добавление новых ячеек в таблицу

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

Установите курсор внутрь таблицы. Выберите в верхнем меню Modify пункт Table, а из предложенного списка - Insert Rows or Columns. Откроется диалоговое окошко, в котором вам останется лишь установить нужные параметры: что добавлять - строку или столбец, и где - до или после (выше или ниже) того места, где находится курсор.

Обратите внимание - в меню имеются также пункты Insert Row и Insert Column. Если вы вставляете строку таким способом, то она всегда вставится выше курсора. Если вы этим способом вставляете столбец, он вставится перед курсором. Выбирайте сами, какой способ вам удобнее.

Лирическое отступление (вместо заключения)

После выхода первых двух "шагов" меня просто-таки забросали письмами с просьбой о продолжении. Продолжение обязательно будет. Мы разберем с вами весь Dreamweaver по косточкам - поговорим и о слоях, и о скриптах, и о многом другом. Я читаю ваши письма и отвечаю на них с удовольствием. Но те, кто уже получил от меня ответ, знают, что:

  1. торопить меня бесполезно - я пишу для вас это руководство в свободное время, которого очень мало;
  2. всем я даю один и тот же совет - пока ждете продолжения, осваивайте программу потихонечку самостоятельно. Метод научного тыка - самый эффективный метод для обучения вебмастеров. И мне, опять же, гораздо интереснее отвечать на конкретные вопросы, а не на абстрактные просьбы прислать продолжение;
  3. в свободное от работы время я преподаю HTML, DHTML и Dreamweaver на курсах Web-дизайна в московском бизнес-колледже. Обучение платное. Все желающие могут записаться. Чтобы узнать, как это сделать - свяжитесь со мной.

Удачи вам в web-конструировании!