Знакомство с Dreamweaver

Настройка Dreamweaver

Работа с текстом

Гиперссылки

Ссылки на изображения

Таблицы

Каскадные таблицы стилей

Творческое задание

Источники

<<Назад | На главную | Вперед >>

---

6.4.5 Объединение ячеек таблицы.

А теперь, научившись работать с таблицами и их составными частями, поговорим об одной особенности языка HTML. Это так называемое объединение ячеек таблиц. Что это такое, проще всего объяснить на примере.

Предположим, мы создали Web-страницу с простой таблицей (рис. 6.13). Обычная таблица, какие мы уже умеем создавать в Dreamweaver— простейший набор строк и ячеек, без названия и даже без форматирования. Ячейки этой таблицы содержат их порядковые номера— так нам будет проще с ней работать.

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

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

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

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

Но как это сделать на Web-странице? Сейчас мы это выясним. И для начала объединим ячейки с номерами 2 и 3. Прежде чем объединять ячейки таблицы, их нужно выделить. Как это делается, мы уже знаем. После этого обратим внимание на редактор свойств. В его левом нижнем углу находится кнопка , с помощью которой и производится объединение ячеек. Нажмем ее. На рис. 6.15 показано, что получится в этом случае. Вместо того чтобы нажимать эту кнопку, мы можем выбрать пункт Merge Cells подменю Table меню Modify или контекстного меню либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.

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

Это еще один способ объединения ячеек по горизонтали, самый быстрый, но позволяющий объединить за один раз только две ячейки.

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

Итак, мы узнали, как выполняется объединение ячеек по горизонтали. Осталось рассмотреть, как ячейки таблицы объединяются по вертикали.

В частности, нам нужно объединить ячейки 1 и 6. Опять же, мы можем выделить их и нажать кнопку объединения.

Также мы можем поставить текстовый курсор в ячейку 1 и выбрать пункт Increase Row Span подменю Table меню Modify или контекстного меню. Так и сделаем.

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

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

Объединение ячеек задается с помощью атрибутов colspan и rowspan тега <td>. Атрибут colspan задает объединение ячеек по горизонтали, а атрибут rowspan — по вертикали. Количество объединяемых ячеек задается в качестве значения этих атрибутов.

---

<<Назад | На главную | Вперед >>