Работа с таблицами

Таблицы в HTML-документах являются основным инструментом верстки. Они позволяют размещать в своих ячейках текст и почти любой объект, от картинки до другой таблицы или даже ролика QuickTime. Как и большинство других объектов Adobe GoLive, таблица может быть расположена прямо в окне документа или в сетке раскладки для наибольшего контроля над ее позицией на странице.
Чтобы вставить таблицу, выполните команду меню Window | Objects (Окно | Объекты). В Objects Palette (Палитра объектов), щелкните по ярлыку Basic (Основные) —.
Перетащите пиктограмму Table (Таблица) из Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на эту пиктограмму. Теперь таблица уже появилась на разрабатываемой странице, осталось лишь задать ее свойства.
Чтобы изменить количество строк или колонок в таблице, вы можете произвести одно из следующих действий:

введите нужное число строк в поле Row (Строки) или колонок в поле Columns (Колонки) палитры Inspector (Инспектор);
удерживая <Shift>, щелкните мышью на ячейку, чтобы выделить ее, потом щелкните мышью на одну из следующих кнопок на панели Cell (Ячейка) палитры Inspector (Инспектор):
- кнопкаAdd Row (Добавить строку)— вставляет пустую строку над выделенной ячейкой;
- кнопка Add Columns (Добавить колонку)— добавляет пустую колонку слева от выделенной ячейки;
- кнопка Delete Row (Удалить строку) — — удаляет строку, которая содержит выделенную ячейку;
- кнопка Delete Column (Удалить колонку) — — удаляет колонку., которая содержит выделенную ячейку.

Чтобы изменить размер таблицы, воспользуйтесь одним из перечисленных ниже вариантов действий:

Щелкните мышью вверху или на левой границе таблицы, чтобы выделить ее. В палитре Inspector (Инспектор) выберите единицы измерения из выпадающих списков для ширины и высоты, воспользовавшись полями Width (Ширина) и Height (Высота), соответственно, и введите необходимые размеры. Выберите команду Auto (Автоматически)» чтобы автоматически подкорректировать ширину и высоту к их оптимальному размеру.
Щелкните мышью, удерживая одновременно клавишу <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю таблицы. Затем можно будет изменить размеры таблицы просто перетаскивая мышью границы таблицы.

Для изменения размера строки или колонки в таблице, вы можете пойти одним из следующих путей.

Щелкните мышью, удерживая одновременно кнопку <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю ячейки в строке или колонке, размеры которой вы хотите изменить: Потом тяните в нужном направлении.
Выделите ячейку в строке или колонке, размеры которой вы хотите изменить, двойным щелчком мышки, одновременно удерживая <Shift>.
На вкладке Cell (Ячейка) палитры Inspector (Инспектор) выберите единицы измерения из выпадающего списка для ширины (поле Width (Ширина)) и высоты (поле Height (Высота)) и введите необходимый размер.

Для большей наглядности описанные действия проиллюстрированы на рис. 3.4

Рис. 3.4. Установка свойств ячеек в таблице

После того как вы определились с размерами таблицы, самое время настроить параметры отображения. Щелкните мышью на верхнем или левом краю таблицы, тем самым выделив ее. Затем введите нужную ширину в поле ввода Border (Граница) в палитре Inspector (Инспектор). Если вы устанавливаете ширину границы 0, то границы затемнены в режиме макета и не видны в браузере. Чтобы скрыть затемненные границы, которые появляются в режиме Layout (Макет), выполните команду меню Edit Hide Invisible Items (Правка | Скрыть невидимые элементы).
Чтобы изменить вертикальные и горизонтальные отступы содержимого ячеек таблицы от их границ, введите величину отступа в поле Cell Pad (Отступ ячейки).
Поле Сеll Space (Расстояние между ячейками) служит для определения расстояниея между ячейками таблицы.
На рис. 3.5 показаны различные примеры границ таблицы, пространства внутри ячеек и расстояние между ячейками.

Рис. 3.5. Установка размеров границ и отступов в таблице:
А — граница шириной в 10 пикселов;
В — отступ внутри ячеек в 2 пиксела;
С — расстояние между ячейками в 5 пикселов

Чтобы задать фоновый цвет для вcей таблицы, взведите флажок в независимом переключателе Color (Цвет), затем щелкните мышью внутри цветового поля, чтобы его выделить. При этом будет активирована палитра Colors (Цвета). Обратите внимание на то, что когда вы применяете фоновый цвет к таблице и просматриваете таблицу в режиме предварительного просмотра Adobe GoLive или в Netscape Navigator, то цвет появляется только в тех ячейках таблицы, которые содержат какие-либо данные. Для решения этой проблем» необходимо в каждую пустую ячейку таблицы вставить неразрывный пробел. Воспользуйтесь следующим приемом — щелкните мышью внутри ячейки и нажмите <Shift>+<Пробел> (в Windows) или <Орtions>+<Пробел> (в Mac OS).
Заголовок — важный элемент таблицы. Взведите флажок в независимом переключателе Caption (Заголовок) и в соответствующем поле ввода выберите место расположения заголовка относительно самой таблицы.
Применив графическое изображение в качестве фона таблицы, вы можете заметно улучшить ее внешний вид. Взведите флажок в независимом переключателе Bglmage (Фоновое изображение), потом выберите файл изображения, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр).
Чтобы выровнять по горизонтали текст во всех ячейках строки, выделите сначала строку, а затем выберите необходимый пункт из выпадающего списка Horizontal Alignment (Горизонтальное выравнивание), расположенного: на вкладке Row (Строка). Выберите пункт Default (По умолчанию), чтобы выровнять по горизонтали текст в соответствии с настройками браузера. В Adobe GoLive выбор этой опции приводит к выравниванию текста по левой границе ячейки. Выравнивание содержимого ячеек и строк по вертикали осуществляется при помощи выпадающего списка Vertical Alignment (Вертикальное выравнивание). '
Для установки высоты строк» выберите единицу измерения высоты из выпадающего списка Height (Высота). Потом в поле ввода укажите предполагаемую высоту строки в пикселах или процентах. Выберите строку Avto (Автоматически) списка Height (Высота), чтобы браузер сам рассчитывал высоту строки таблицы в зависимостщот содержимого ее ячеек.
Чтобы установить фоновый цвет для всей строки, взведите флажок в независимом переключателе Colors (Цвета),затем щелкните мышью внутри цветового поля, чтобы его выделить можно будет выбрать необходимый фоновый цвет из палитры Colors (Цвета) .
Перейдем к свойствам отдельной ячейки: щелкните дважды мышью, удерживая <Shift> на ячейке, тем самым выделив ее.

Совет
Чтобы изменить параметры нескольких ячеек одновременно, выделите нужные ячейки, а затем перейдите на вкладку Ceil (Ячейка) Inspector Objects (Инспектор объектов). Чтобы выделить дополнительные ячейки, вы можете, удерживая <Shift>, щелкнуть мышью внутри каждой дополнительной ячейки.

Чтобы ячейки могли объединять в себе несколько соседних строк по вертикали, следует ввести нужное .число строк в поле Row Span (Объединение строк), как это показано на рис. 3.6.
Аналогично полю Row Span (Объединение строк) поле Column Span (Объединение колонок) служит для объединения в одной ячейке нескольких соседних колонок.
Чтобы явно задать высоту и ширину ячейки, выберите необходимую единицу измерения из выпадающего списка Height (Высота) и Width (Ширина), соответственно, и введите размеры в связанные с этими списками поля ввода. Выберите строку Avto (Автоматически), чтобы браузер пользователя сам устанавливал высоту и ширину.

Внимание
Когда вы корректируете высоту Или ширину ячейки, Adobe GoLive автоматически корректирует высоту и ширину строки и колонки, которые содержат ячейку.

Рис. 3.6. Ячейка, объединяющая три строки

Обычно ячейки верхней строки содержат заголовки столбцов, поэтому было бы неплохо использовать для них отдельное форматирование. Чтобы отформатировать ячейку как подзаголовок взведите флажок в независимом переключателе Header Style (Стиль заголовка).
По умолчанию, в случае когда текст в ячейке не умещается в одну строку, он разбивается на несколько строк. Но иногда возникает необходимость размещать текст в ячейке в его первозданном виде. Если такая необходимость возникла, следует взвести флажок в независимом переключателе No Text Wrap (He переносить текст).
Мы уже умеем устанавливать фоновое изображение для всей таблицы, но HTML позволяет задавать фон отдельно для каждой ячейки. Чтобы использовать фоновое изображение в ячейке, взведите флажок в независимом переключателе Bglmage (Фоновое изображение) вкладки Сеll (Ячейка). Выбор графического файла производится точно так же, как и в случае с установкой фонового изображения для всей таблицы.
Adobe GoLive позволяет вставлять текст в таблицы разными способами. Вы можете вставить текст путем прямого ввода в ячейку таблицы, копированием текста из другого документа, перемещением текста между ячейками путем перетаскивания и импортированием текста из текстовых файлов в таблицу.

Чтобы ввести текст внутрь ячейки, щелкните мышью внутри ячейки, устанавливая курсор, и введите содержимое ячейки.
Чтобы скопировать текст из другого документа и вставить в ячейку, выделите текст в документе я скопируйте его. Установите курсор внутри ячейки, а затем выполните команду меню Edit | Paste (Правка | Вставить).
Чтобы переместить текст между ячейками, удерживая правую кнопку мыши, выделите текст. Потом, удерживая кнопку мыши, перетащите его туда, куда необходимо.
Чтобы импортировать данные их текстовых файлов в таблицу, создайте текстовый файл, содержащий данные, которые вы хотите поместить в таблицу Adobe GoUve. Вставьте таблицу в окно документа Adobe GoLive. Вам не нужно добавлять строки или колонки в таблицу, чтобы разместить перемещаемые данные. Когда Adobe GoLive перемещает данные в таблицу, он сам вставляет дополнительные строки и колонки в таблицу, как необходимо для расположения данных. Нажмите кнопку Browse (Просмотр) рядом с командой Import Tab-Text (Перемещение таблица-текст). Выберите текстовый файл, данные из которого будут пересылаться в таблицу, из выпадающего списка Column Separator (Разделитель колонок) выберите символ, который будет использоваться в качестве разделителя, и нажмите кнопку Open (Открыть).

Внимание
Перед импортом данных в таблицу, вы должны отформатировать текст в файле в таком виде, который будет принят Adobe GoLive. Для таблиц, состоящих из одной ячейки, текст можно просто отформатировать так, как вы хотите, чтобы текст отображался в таблице. Для таблиц с большим количеством ячеек вы должны так отформатировать данные, чтобы каждая строка представляла собой содержимое одной строки, а содержимое ячеек отделялось друг от друга символами-разделителями (табуляции, запятые, пробелы или точки с запятой).

Вы можете вложить таблицу путем помещения ее внутрь ячейки другой таблицы. Потом вы можете поместить еще одну таблицу в ячейку только что вложенной и так далее.
Чтобы создать выделенную область внутри вложенной таблицы, щелкните мышью внутри ячейки в пределах самой внутренней таблицы. Нажмите <Ctrl>+<Enter>, чтобы выделить ячейку. Повторите этот шаг, чтобы выделить всю самую внутреннюю таблицу. Продолжая нажимать ту же пару кнопок одновременно, вы добьетесь последовательного выделения ячеек, а затем целых таблиц содержащих в себе уже выделенные вами до этого ячейки и таблицы.
Пока ваше выделение в таблице состоит из одной ячейки или блока смежных ячеек, Adobe GoLive позволяет вырезать, копировать и вставлять их с помощью команд меню Edit (Правка). Вырезание помогает вам удалить одну или более ячеек из таблицы. Копирование и вставка выделенных вами фрагментов позволяет вам .перемещать содержимое подобных блоков ячеек в таблице, помещать выбранный вами фрагмент внутрь ячейки как вложенную таблицу и помещать выбранный, фрагмент как новую таблицу внутрь текстового поля.
Если вы копируете и вставляете дай того, чтобы переместить содержания сходных блоков, ваш выбор цеди при выделении должен соответствовать исходному выделению. Например, если вы копируете четыре ячейки в строке в качестве исходного фрагмента выделения, то вы можете переместить их только в такие же четыре ячейки.

Чтобы вырезать выделенную в таблице область, выделите отдельную ячейку или блок соседних ячеек и выполните команду меню Edit | Cut (Правка) Вырезать). Чтобы скопировать и вставить выделенную область таблицы, выделите отдельную ячейку или блок соседних ячеек, выполните команду меню Edit | Сору (Правка | Копировать) и выберите один из описанных ниже способов действия.
Чтобы переместить содержимое блока ячеек в таблице, выделите этот блок и выполните команду меню Edit | Paste (Правка (Вставить).
Чтобы поместить выделенную область в ячейку в качестве вложенной таблицы, щелкните мышью внутри ячейки, в которую вы хотите поместить выделенный фрагмент, и выполните команду меню Edit |Paste (Правка | Вставить).

Внимание
Вы можете вставлять выбранный фрагмент в качестве вложенной таблицы, только если он содержит более одной ячейки. Иначе, если вы выделили только одну ячейку, Adobe GoLive просто перенесет содержимое этой ячейки в ту ячейку, по которой вы щелкнете мышью.

Используя вкладку Select (Выделить) в палитре Table (Таблица), можно отсортировать содержимое таблицы. Сортировка применима как ко всей таблице, так и к отдельным строкам или к отдельным колонкам. Например, если вы сортируете порядок строк в таблице, и верхняя строка содержит заголовки колонок, вы можете применить сортировку всех строк в таблице кроме верхней строки.
Adobe GoLive сортирует данные прежде всего в числовом порядке и только потом уже — в алфавитном. По умолчанию происходит сортировка по возрастанию. Но если вы хотите, то можно задать, чтобы сортировка была сделана в порядке убывания.
Чтобы сортировать содержимое таблицы, щелкните мышью по верхней или левой границам таблицы, тем самым выделяя ее. Выполните команду меню Window | Table (Окно | Таблица) и в палитре Table (Таблица) выберите вкладку Select (Выбор).
Пометьте область таблицы, которую хотите сортировать, создайте выделенную область в таблице в пределах окна документа или панели Select В палитре Table (Таблица) выберите из выпадающего списка Sort (Сортировка) предполагаемый порядок сортировки. Выберите Rows (Строки), если вы хотите, чтобы содержимое одной или более колонок было отсортировано. Выберите Cols (Колонки), если вы хотите, чтобы сортировалось содержимое строк.
По умолчанию, первая колонка имя строка, которую вы выбираете, сортируется в восходящем порядке, как отмечено кнопкой возрастающего порядка — — рядом с самым левым выпадающим списком. Чтобы указать для первой колонки или строки необходимость сортировки в нисходящем порядке, нажмите кнопку восходящего порядка, чтобы она превратилась в кнопку нисходящего порядка — .
После проведения всех этих довольно однообразных, но, несомненно, необходимых операций по сортировке, нажмите кнопку Sort (Сортировать), чтобы отсортировать таблицу, исполцуя те критерии, которые вы указали.
Adobe GoLive также включает в себя набор предопределенных стилей таблиц, которые вы можете применять дл| быстрого форматирования своей таблицы. Вы можете предварительно просмотреть варианты стилей на вкладке Styles (Стили) палитры Table (Таблица). Если палитра Table (Таблица) не отображена в текущий момент на экране, следует выполнить команду меню Window | ТаЫе (Окно | Таблица).
Чтобы применить предопределенные стили к таблице выделите всю таблицу, как обьгано щелкнув мышью на ее верхнюю или левую границу, а затем перейдите на, вкладку Style (Стиль) в палитре Table (Таблица) — рис. 3.7.
Выберите предопределенный стиль из выпадающего списка в верхнем левом углу панели Style (Стиль). Предварительный просмотр выбранного стиля отображается на рабочей панели. Синие скобки показывают, какие строки и колонки содержат стили, которые будут повторены по всей таблице. Например, если синие скобки отмечают вторую и третью строки, стиль первой строки Применим только к первой строке, в то время как стили второй и третьей строк повторяются для всех других строк в таблице.
Чтобы отменить выделенный фрагмент стилей таблицы, щелкните мышью на треугольник в верхнем правом углу меню палитры Table (Таблица) и выберите команду Undo Select TabteStyle (Отменить выделенный стиль таблицы).

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

После того, как необходимый стиль выбран, нажмите кнопку Apply (Применить), чтобы применить стиль к своей таблице.

Рис. 3.7. Установка стиля таблицы

Чтобы удалить существующий стиль из таблицы, выделите всю таблицу целиком и на вкладке Style (Стиль) нажмите кнопку Remove (Удалить). Впрочем, имеется возможность к коллекции предустановленных стилей добавить и свои варианты стилевого оформления. Для этого нажмите кнопку New (Новый), чтобы создать новый стиль таблицы. В текстовом поле над кнопкой New (Новый) введите имя для нового стиля таблицы. Нажмите кнопку Capture (Зафиксировать), чтобы захватить стиль выделенной таблицы в окне документа и сохранить его как новый стиль таблицы. Теперь этот стиль добавится к списку предопределенных стилей, и вы сможете применять его к другим таблицам.
Конечно, стили можно не только добавлять, но и удалять. Для этого необходимый стиль надо просто выбрать из выпадающего списка-в левом верхнем углу вкладки Style (Стиль), а затем нажать кнопку Delete (Удалить).