Учебник Macromedia Dreamweaver (стр. 32 из 135)

Примечание

Теги <THEAD> и <TFOOT> объединяют строки (теги <tr>), которые должны находиться в нужной секции. Для создания секции "тела"таблицы, объединяющей строки, содержащие полезную информацию, служит аналогичный тег <TBODY>.

Выше мы рассмотрели предопределенные форматы, позволяющие быстро форматировать таблицы. Практически во всех этих форматах нечетные группы строк окрашиваются в один цвет, четные — в другой. Это достигается заданием соответствующих параметров для строк таблицы (соответствующих атрибутов тега <tr>). При сортировке таких таблиц параметры форматирования строк (в частности, цвет фона и текста) не будут переноситься вместе с данными строк, т. е. вся их расцветка останется на месте. Это очень удобно, т. к. пользователю не нужно будет переформатировать таблицу после каждой сортировки.

Однако может случиться так, что пользователь захочет переместить вместе с данными строк их параметры форматирования. Это может быть полезно,

например, если пользователь выделяет какие-то данные в таблице отдельным цветом. Для такого случая предусмотрен флажок Keep TR Attributes With Sorted Row. Достаточно его включить, чтобы Dreamweaver начал переносить данные строк вместе с их форматированием.

Чтобы выполнить сортировку, нажмите кнопку ОК. Также вы можете нажать кнопку Apply, чтобы выполнить сортировку, не закрывая окно Sort Table.

Вставка табличных данных

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

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

Текстовые форматы записи табличных данных — это довольно старая идея. Заключается она в том, что данные записываются в виде строк, а значения отделяются друг от друга каким-либо разделителем: запятой, знаком табуляции и т. п. Скажем, если мы переведем небольшую табличку, приведенную в начале этой главы, в текстовый формат, она -будет иметь такой вид:

№№,Проект,Закончен?

1,Свой домашний сайт, Да

2,Сайт своей любимой кошки,"Нет, кошка убежала"

Здесь мы выбрали в качестве разделителя запятую. Но т. к. последнее значение в последней строке имеет внутри себя запятую, нам пришлось взять это значение в кавычки.

Файлы такого формата используются довольно часто и даже имеют свое название — CSV (Comma Separated Values — значения, разделенные запятыми). Они сохраняются с расширением csv и могут порождаться многими программами процессоров электронных таблиц и СУБД (систем управления базами данных), в частности Microsoft Excel и Microsoft Access.

Сохраним и мы нашу маленькую табличку в таком формате. Файл назовем 5.1.csv. Теперь создадим новую Web-страницу и попытаемся поместить сюда данные, только что сохраненные в CSV-файле.

Нажмите кнопку Tabular Data (рис. 5.20), находящуюся на закладке Common панели объектов. Вы также можете выбрать пункт Import Tabular Data подменю Table Objects меню Insert. При этом на экране появится диалоговое окно Import Tabular Data, показанное на рис. 5.21.

Рис. 5.20. Кнопка Tabular Data панели объектов

Рис. 5.21. ДиалоговоеокноImport Tabular Data

В поле ввода Data File вводится имя файла данных. Вы также можете нажать кнопку Browse, расположенную справа от этого поля ввода, и выбрать нужный файл в стандартном диалоговом окне открытия файла Windows.

Раскрывающийся список Delimiter позволит вам выбрать разделитель значений. В нем доступны следующие пункты: Tab — знак табуляции, Comma -запятая, Semicolon — точка с запятой, Colon — двоеточие и Other — другой знак. Если вы выберете последний пункт, справа от списка появится небольшое поле ввода, где вы сможете ввести символ — разделитель значений.

Группа переключателей Table Width позволит вам задать ширину результирующей таблицы. Установив переключатель Fit to Data, вы предоставляете Web-обозревателю право самому задать ширину таблицы. Переключатель Set позволяет вам жестко задать ширину таблицы. При этом в поле ввода, расположенном справа от этого переключателя, вы сможете ввести значение ширины. А в раскрывающемся списке, находящемся правее, задается единица измерения ширины: пикселы (пункт Pixels) или проценты (Percent).

Назначение полей ввода Cell Padding, Cell Spacing и Border уже вам известно. Мы рассматривали их ранее.

Раскрывающийся список Format Top Row позволяет вам задать, как будет форматироваться первая строка результирующей таблицы (обычно там находится заголовок таблицы). Здесь доступны четыре пункта: [No Formatting] — никак не форматируется, Bold — выводится жирным шрифтом, Italic — курсивом, Bold Italic — жирным курсивом.

Закончив установку параметров, нажмите кнопку ОК. И посмотрите, что получится. Как видите, Dreamweaver вполне сносно справился со своей задачей. Правда, как говорилось ранее, он изуродовал русский текст и вдобавок некорректно обработал значение в кавычках - воспринял запятую внутри него как разделитель и создал еще один столбец в таблице. Но все-таки, это лучше, чем ничего. И если вам нужно быстренько "перегнать" множество таблиц с числами в формат HTML, воспользуйтесь данной функцией.

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

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

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

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

1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20

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

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

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

1+6	2+3		4+5
	7	8	9	10
11	12+13+14+15
16	17	18	19	20

Рис. 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 также максимально облегчает вам эту задачу. Достаточно поместить текстовый курсор в ячейку, в которую были слиты несколько ячеек таблицы, и сделать следующее: