Создание и форматирование таблиц

Одним из наиболее широко используемых в HTML средств являются таблицы (рис. 1.6). Причем, очень часто они используются не только традиционно - как метод представления табличных данных, но и как средство форматирования web-страниц. Хотя следует заметить, что второй вариант использования противоречит идеологии языка HTML.

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

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

Рисунок 1.6 – Вставка таблицы

Добавить таблицу в редактируемый документ в Dreamweaver можно, как обычно, несколькими способами. Самый простой способ – это выбрать кнопку Insert Table на панели объектов (рис. 1.6). Также можно воспользоваться командой Insert=>Table.

После этого на экране появляется диалоговое окно Insert Table (рис. 1.7), в котором предлагается указать параметры будущей таблицы. В разделе Table size, в полях Rows и Columns задается количество строк и столбцов соответственно, в поле Table width – ширина таблицы (может быть относительной в процентах или абсолютной в пикселях). Параметр Border thickness задает толщину рамки вокруг всей таблицы в целом и каждой из ее ячеек. Если указано нулевое значение, то рамка не будет отображаться. Параметр Cell padding задает расстояние между содержимым ячейки и ее границами (по умолчанию 1 пиксел), а Cell spacing – расстояние между соседними ячейками таблицы (по умолчанию 2 пиксела). В разделе Header можно задать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны варианты None (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), Тор ("шапка") и Both (и "шапка", и выделенный первый столбец).

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

В разделе Accessibility в поле Caption задается название таблицы. Это название будет располагаться рядом с создаваемой таблицей. Раскрывающийся список Align caption позволяет задать местоположение и выравнивание названия. Здесь доступны следующие пункты:

· default (по умолчанию) - выравнивание выполняет сам Web-обозреватель,
обычно в этом случае название находится над таблицей и выравнивается по
центру;

· top - название находится над таблицей и выравнивается по центру;

· bottom - название находится под таблицей и выравнивается по центру;

· left - название находится над таблицей и выравнивается по левому краю;

· right - название находится над таблицей и выравнивается по правому краю.

Рисцнок 1.7 - Диалоговое окно параметров вставки таблицы

После того, как таблица создана, можно наполнять ее содержанием. Кроме того, можно изменять параметры таблицы: добавлять и удалять строки и столбцы, объединять и делить ячейки, менять размеры всей таблицы и отдельных строк и столбцов, цвет фона. Для того, чтобы изменить свойства всей таблицы в целом необходимо ее выделить, щелкнув мышкой в левом верхнем углу или по нижней или правой границе таблицы. Также можно выполнить команду Modify=>Table=>Select Table (в этом случае курсор должен находиться в любой ячейке таблицы). Вид панели свойств после

выделения всей таблицы показан на рисунке 1.8. Здесь можно изменить количество строк и столбцов (Rows и Cols), ширину таблицы (W), параметры отступов (CellPad и CellSpace) толщину рамки (Border). Кроме того, можно указать выравнивание таблицы относительно остальных элементов абзаца (Align), цвета фона и рамки таблицы (Bg color и Brdr color), а также задать фоновое изображение (Bg Image).

Рисунок 1.8 - Панель свойств таблицы

Полезными могут быть четыре инструмента, кнопки которых расположены на панели свойств слева внизу (рис. 1.9). Инструменты Clear Row Heights и Clear Column Widths предназначены для удаления значений высоты строк и ширины колонок таблицы соответственно. Инструменты Convert Table Widths to Pixels и Convert Table Widths to Percent предназначены для преобразования значений ширины в таблице из относительных единиц в абсолютные и обратно соответственно.

Для изменения свойств отдельной ячейки необходимо установить курсор в эту ячейку, а для группы ячеек - выделить их. При этом в нижней части панели свойств появятся параметры выделенной группы ячеек (рис. 5.10). Можно указать их ширину и высоту (поля W и H соответственно), цвета фона и рамки ячеек (Bg и Brdr соответственно), а также задать фоновое изображение в поле Bg. Кроме того, можно указать вертикальное и горизонтальное выравнивание в ячейках (поля Vert и Horz соответственно).

Рисунок 1.9 - Свойства ячейки таблицы

Следует обратить внимание на то, что указывать высоту отдельных ячеек, следует в самом крайнем случае. Предпочтительно оставлять эти поля пустыми, тогда высота будет определяться содержимым, заполняющим ячейки таблицы. При помощи кнопок Merge и Split можно соответственно объединить или разделить ячейки. Кроме того, это можно сделать, вызвав команды Split Cell или Merge Cells из пункта меню Modify=>Table или из раздела Table

контекстного меню. При делении ячеек открывается диалоговое окно Split Cell

(рис. 1.10), в котором предлагается строк (Rows) или столбцов (Columns) разбиения.

Рисунок 1.10 - Параметры деления ячейки таблицы

В таблице можно удалять и добавлять строки или столбцы. Команды, предназначенные для этого, собраны в пункте меню Modify=>Table и в разделе Table контекстного меню.

Для удаления строк или столбцов таблицы нужно их выделить и выполнить команды Delete Row или Delete Column соответственно. Если выделения нет, а курсор находится в ячейке таблице, то будет удалена строка или столбец, которым принадлежит текущая ячейка. Так же для удаления можно использовать клавишу Delete.

Для вставки строки или столбца предназначены команды Insert Row и Insert Column (добавляется одна строка или столбец перед выделенной текущей ячейкой). Когда требуется вставить сразу несколько строк или столбцов, удобнее всего использовать команду Insert Rows or Columns … В открывшемся диалоговом окне (рис. 1.11) необходимо указать, что требуется добавить - строки или столбцы (параметр Insert) и их количество (Number of …). Можно указать куда необходимо их добавить - до (Above the Selection) или после (Below the Selection) текущей.