Раздел 5.1.6. Создание и редактирование таблиц, макетные таблицы.
Таблица – мощное средство структурирования web-страниц. HTML-таблицы используются не только для представления табличных данных, но и являются широко используемым инструментом дизайна, представляя собой каркас, определяющий место каждого графического и текстового фрагмента на web-странице. Можно встраивать одну таблицу в другую и использовать различные средства форматирования для изменения размеров и прочих визуальных аспектов таблицы.

Смотреть видеоролик swf - 3,38 Мб.
Смотреть видеоролик swf - 3,82 Мб.

Различают обычные таблицы и макетные таблицы.

Для вставки обычной таблицы на web-страницу, необходимо установит курсор в нужное место, а затем воспользоваться одним из способов ее создания.
Рисунок 5.14

Рисунок 5.14 – Создание таблицы с помощью команды Добавить таблицу

1) Создание таблицы с помощью команды Добавить таблицу (1 рис.5.14) на Стандартной панели инструментов. В этом случае необходимо выбрать данную команду, в результате появится сетка таблицы (2). Далее возможно два варианта:

  • Перемещая указатель мыши, выделить нужное число строк и столбцов таблицы, а затем щелкнуть левой кнопки мыши на соответствующей ячейки;
  • Нажатой левой кнопкой мыши выделить нужное число строк и столбцов и отпустить кнопку мыши. В этом случае размеры предлагаемой сетки таблицы могут быть увеличены.
Параметры полученной таблицы будут установлены по умолчанию.
Рисунок 5.15

Рисунок 5.15 – Создание таблицы с помощью команды Нарисовать таблицу
Создание таблицы с помощью команды Нарисовать таблицу. Данная команда доступна из меню Таблица (1 рис.5.15) или с панели инструментов Таблицы. После выполнения этой команды указатель мыши примет форму карандаша. Далее нажатой левой кнопкой мыши рисуется общая прямоугольная форма (2) таблицы, а затем рисуются линии столбцов и строк (3).
Рисунок 5.16

Рисунок 5.16 – Создание таблицы с помощью команды Таблица→Вставить→Таблица
3) Создание таблицы с помощью команды Таблица→Вставить→Таблица. В результате выполнения этой команды открывается диалоговое окно Вставка таблицы (рис. 5.16), в котором можно установить различные опции настройки таблицы. Рассмотрим некоторые из них.
  • Секция Параметры макета – установить переключатель Выключить параметры макета.
  • Секция Размер – в полях Строк:, Столбцов: задается количество строк и столбцов таблицы.
  • Секция Положение – позволяет задать следующие опции: Выравнивание: - задается выравнивание таблицы относительно web-страницы; Обтекание: - задается возможность обтекания таблицы другими объектами; Поля ячеек: - задается отступ от границ ячеек до их содержимого; Интервал ячеек: - определяет отступы между ячейками. Опция Задать ширину позволяет задать ширину таблицы тремя способами: первый – ширина не задана (ширина таблицы определяется шириной ячеек с содержимым наибольшей ширины); второй – ширина задана в точках (ширина таблицы задается в пикселях и не меняется при изменении размеров окна браузера, в том случае если ширина таблицы больше размеров окна браузера появляется горизонтальная полоса прокрутки); третий – в процентах (ширина таблицы определяется как процент от доступного пространства, под которым понимается либо размер окна обозревателя, либо размер ячейки, в которую вложена таблица). Аналогична устанавливается опция Задать высоту.
  • Секция Границы – устанавливает размер и цветовое оформление рамки таблицы.
  • Секция Фон – позволяет установить фон таблицы либо как однотонный (вкладка Цвет:), либо с использованием графического файла (кнопка Обзор). Если заданны оба варианта фона, то приоритет имеет графический фон и только в том случае если в настройках браузера отменен показ рисунков будет виден однотонный фон.
  • Секция По умолчанию - позволяет запомнить заданные опции для новых таблиц.
  • Кнопка ОК применяет выбранные параметры.

4) Создание таблицы с помощью команды Таблица→Преобразовать→Текст в таблицу… (рис.5.17). Выполнение этой команды преобразует выделенный текст (1) в таблицу (3) согласно выбранному разделителю (2) в окне Текст в таблицу.

Рисунок 5.17

Рисунок 5.17 – Преобразование выделенного текста в таблицу

Для форматирования свойств уже созданной таблицы используются диалоговые окна Свойства таблицы, Свойства ячейки, которые можно открыть, установив курсор в любом месте таблицы (ячейки) и выполнив команду или из контекстного меню Свойства таблицы… (Свойства ячейки…) или Таблица→Свойства таблицы→Таблица (Ячейка).

Диалоговое окно Свойства таблицы полностью совпадает с диалоговым окном Вставка таблицы.
Рисунок 5.18

Рисунок 5.18 – Диалоговое окно Свойства ячейки

Диалоговое окно Свойства ячейки (рис.5.18) позволяет установить следующие опции.

  • Выровнять по горизонтали:, Выровнять по вертикали: - определяет выравнивание содержимого ячейки.
  • Объединение строк:, Объединение столбцов: – определяет число объединенных строк, столбцов.
  • Задать ширину:, Задать высоту: - устанавливают размеры ячейки аналогично размерам таблицы.
  • Ячейка заголовка – включение флажка преобразует ячейку в ячейку заголовка.
  • Не переносить слова – включение флажка запрещает перенос текста по строкам.
  • Секции Границы и Фон – позволяют задать визуальные параметры границ ячейки и фона.
Для задания одинаковых параметров нескольким ячейкам их нужно выделить. Выделение таблицы или ее части осуществляется нажатой левой кнопкой мыши или с помощью команды Таблица→Выделить.

Преобразование таблицы может быть осуществлено с помощью команд меню Таблица и панели инструментов Таблицы, которые частично дублируют друг друга.

  • Вставить→Сроки или столбцы, Ячейка, Подпись - вставка элементов таблицы.
  • Удалить столбцы – удаление столбцов таблицы.
  • Объединить ячейки – объединение выделенных ячеек в одну.
  • Разбить ячейки – деление ячейки на столбцы и строки.
  • Автоформат… - выбор оформления таблицы из предложенных вариантов.
  • Выровнять высоту строк, Выровнять ширину столбцов – выделенные строки, столбцы будут одной высоты, ширины.
  • Автободбор по содержимому – ширина ячеек определяется их содержимым.
  • Преобразовать→Таблицу в текст – табличные данные преобразуются в обычный текст.
Изменение размеров таблицы и ее ячеек может быть выполнено путем перетаскивания их границ нажатой левой кнопкой мыши.

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

FrontPage 2003 предоставляет новую возможность при работе с таблицами – макетные таблицы. Они используются при проектировании web-страниц со сложной структурой оформления.

Макетная таблица - особый вид HTML-таблиц, у которых наверху и внизу каждого столбца и по сторонам таблицы имеются ярлыки с информацией о ширине и высоте в пикселях.
Рисунок 5.19

Рисунок 5.19 – Проектирование макетной таблицы

    Макетная таблица (рис.5.19) состоит из следующих компонентов.
  • Макетная таблица (1), которая представляет основу для разработки макета. Будучи выделена в режиме конструктора, она выделяется зеленой рамкой.
  • Макетные ячейки (2), которые представляют собой области макетной таблицы, в которых размещается содержимое страницы, включая текст, рисунки и другие элементы и при выборе выделяются синей рамкой.
  • Ячейки-заполнители (например, 3), которые не содержат данных и существуют для того, чтобы дополнять сумму ширин столбцов таблицы до общей ширины таблицы и выделяются однотонным фоном (только в режиме Конструктор).
Обычно перед созданием макета страницы с помощью макетных таблиц, web-страницу подготавливают следующим образом (рис.5.19).
  • Устанавливают 0 (нулевые) поля web-страницы. Команда Файл→Свойства→диалоговое окно Свойства страницы вкладка Дополнительно.
  • Отображают линейку (4), с помощью которой можно измерять в пикселях ширину и высоту макета. Команда Вид→Линейка и сетка→Показать линейку.
  • Отображают сетку (5). Команда Вид→Линейка и сетка→Показать сетку.
  • При необходимости вставляют изображение-образец (6), представляющий собой графическую модель web-страницы с большим процентом прозрачности, который вставляется как фон и может использоваться как визуальный ориентир для разработки макета web-страницы. Команда Вид→Изображение образец→Настроить…. В открывшемся диалоговом окне Изображение-образец с помощью кнопки Обзор выбирается графический файл, определяется его смещение относительно верхнего левого угла окна и прозрачность.
Вставка и редактирование макетных таблиц осуществляется с помощью панели Макетные таблицы и ячейки области задач (рис.5.19), которою можно открыть командой Таблица→Макетные таблицы и ячейки. Работая с этой панелью можно выполнять следующие действия.

1) Создать макетную таблицу.

  • Команда Вставить макетную таблицу (7) – вставляет на web-страницу макетную таблицу фиксированного размера.
  • Команда Нарисовать макетную таблицу (8) – позволяет нарисовать макетную таблицу нажатой левой кнопкой мыши.
  • Выбор в окне Макет таблицы (10) – вставляет на web-страницу макетную таблицу выбранного типа.
  • Команда Вставить макетную ячейку… (11) - открывает диалоговое окно, в котором задаются параметры ячейки. В результате создается таблица, содержащая макетную ячейку.
Макетная таблица имеет информационные ярлыки на сторонах (9), щелчок левой кнопкой мыши на ярлыке открывает диалоговое окно с командами позволяющими изменить размер, установить авторастягивание (ширина или высота задаются в процентах от размера окна), установить изображение-распорку столбца, для того, что бы ширина столбца была не меньше определенной ширины. Размеры таблицы можно менять нажатой левой кнопкой мыши на метки выделения.

2) Изменить свойства макетной таблицы.

  • Поля (12) Ширина:, Высота: служат для изменения размеров.
  • Кнопки (13) Выравнивание: определяют размещение макетной таблицы на странице.
3) Создать макетные ячейки внутри выделенной макетной таблицы.
  • Команда Нарисовать макетную ячейку (14) позволяет нарисовать ячейку в нужном месте.
Выделенная ячейка имеет один ярлык (15) с указанием ее размеров. Изменение размеров ячейки осуществляется нажатой левой кнопкой мыши за метки выбора. Перемещение выделенной ячейки осуществляется либо клавишами направления (одно нажатие – 1 пиксель) либо нажатой левой кнопкой мыши (для отмены скачкообразного перемещения в 10 пикселей необходимо держать нажатой клавишу ALT).

При выделение макетной таблицы с нарисованными ячейками появляются информационные ярлыки для каждой ячейки.
Рисунок 5.20

Рисунок 5.20 – Панель Формат ячейки

4) Форматировать выделенную макетную ячейку.

Команда Формат ячейки (16) открывает панель Формат ячейки в области задач, состоящей из трех разделов (рис.5.20).
Рисунок 5.21 а Рисунок 5.21 б Рисунок 5.21 в
а) б) в)
Рисунок 5.21 – Разделы форматирования макетной ячейки

Свойства и границы ячейки (рис.5.21 a) – позволяет определить: ширину и высоту ячейки; отступ содержимого от границ (Поля:); выравнивание содержимого по вертикали; фоновый цвет; толщину, цвет и формат границ; отступы сверху, снизу, справа, слева от других ячеек.

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

Углы и заливка ячейки (рис.5.21 в) – позволяет задать вид углов ячейки (стандартный или рисунок, размеры, цвета фона и границ) и параметры тени отбрасываемой от нее (размер, размытие, направление).

Заполнение отредактированной макетной таблице ни чем не отличается от заполнения обычной таблицы. При этом могут быть использованы диалоговые окна Свойства таблицы, Свойства ячейки. Кнопка Показать параметры макета (17 рис.5.19) на панели Макетные таблицы позволяет перевести макетную таблицу в обычный режим и наоборот простую таблицу сделать макетной.