Слияние ячеек таблиц

Мы научились работать с таблицами и их составными частями. Вы можете подумать, что это все. Отнюдь! Мы еще не рассмотрели такое мощное средство, как слияние ячеек.

Что это такое, проще всего объяснить на примере.

Предположим, у нас есть следующая таблица (рис. 5.22). Ничего особенного, обычная таблица, какие вы уже умеете создавать в Dreamweaver, Простейший набор строк и ячеек, даже без форматирования. Мы пронумеровали ячейки таблицы, чтобы они не пустовали и чтобы нам самим в дальнейшем было легче.

Рис. 5.22. Простая таблица

Все это очень просто и прекрасно вам знакомо. Теперь давайте рассмотрим более сложную таблицу (рис. 5.23).

Здесь вы видите, что некоторые ячейки объединены, слиты в одну (об этом говорит знак "плюс" между их номерами). Такой прием называется слиянием ячеек. Как видите, ячейки могут быть слиты по горизонтали и по вертикали. И количество ячеек, соединяемых в одну, не ограничено.

Рис. 5.23. Более сложная таблица

Но как это сделать на Web-странице? Поддерживает ли HTML слияние ячеек? Конечно, поддерживает, иначе мы не стали бы вам об этом рассказывать.

Давайте откроем новое окно Dreamweaver и поместим в него простую таблицу в пять столбцов и четыре строки, аналогичную рис. 5.22. Не будем мудрить с форматированием и просто пронумеруем ячейки таблицы, чтобы было легче в ней ориентироваться (как в вышеприведенном примере). Сохраним полученную таблицу под именем 5.4.htm (рис. 5.24).

Рис. 5.24. Изначальная таблица, готовая к слиянию ячеек

Теперь давайте скажем Dreamweaver, какие ячейки мы хотим соединить. Пусть, например, это будут ячейки 2 и 3, как на рис. 5.23. Выделите их. И обратите внимание на редактор свойств. В его левом нижнем углу находится кнопка, изображенная на рис. 5.25.

Рис.5.25. Кнопка слияния ячеек редактора свойств

С помощью данной кнопки и производится слияние ячеек. Нажмите ее. На рис. 5.26 показано, что получится в этом случае.

Рис. 5.26. Таблица, получившаяся после слияния ячеек 2 и 3

Вместо того чтобы нажимать эту кнопку, вы можете выбрать пункт Merge Cells подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.

Теперь поместите текстовый курсор в ячейку 4. Мы сольем ее с ячейкой 5. Для этого выберите пункт Increase Column Span подменю Table меню Modify или контекстного меню либо нажмите комбинацию клавиш <Ctrl>+ +<Shift>+<]>. Ячейки 4 и 5 сольются в одну. Это еще один способ слияния ячеек по горизонтали, самый быстрый, но позволяющий слить за один раз только две ячейки.

Остается соединить четыре ячейки — 12, 13, 14 и 15 — в одну. Выполните это одним из только что рассмотренных способов.

Как видите, все очень просто. И это заслуга Dreamweaver.

Итак, мы узнали, как выполняется слияние ячеек по горизонтали. Осталось рассмотреть, как ячейки таблицы сливаются по вертикали. В частности, нам нужно слить ячейки 1 и 6. Опять же вы можете выделить их и нажать кнопку слияния, показанную на рис. 5.25. Либо вы можете поставить текстовый курсор в ячейку 1 и выбрать пункт Increase Row Span подменю Table меню Modify или контекстного меню. Здесь тоже все просто.

Но что делать, если вы хотите разъединить слитые ячейки? Dreamweaver также максимально облегчает вам эту задачу. Достаточно поместить текстовый курсор в ячейку, в которую были слиты несколько ячеек таблицы, и сделать следующее:

· если выполнялось слияние по горизонтали, выбрать пункт Decrease Column Span подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Shift>+<[>;

· если выполнялось слияние по вертикали, выбрать пункт Decrease Row Span подменю Table меню Modify или контекстного меню.

Поиск по сайту: