Форматирование таблиц
Ну вот, как работать с таблицами, мы разобрались. Теперь пора изучить средства, предлагаемые HTML для форматирования таблиц. Но сначала нужно выяснить, как выделить в окне документа Dreamweaver нужный элемент нашей таблицы.
Обратимся к Dreamweaver, а именно к нашей учебной страничке 5-3.htm. Откроем ее, поместим текстовый курсор в одну из ячеек и посмотрим на секцию тегов. Мы увидим там что-то, похожее на
<BODY><TABLEXTR><TDXP>
Тега <р> может и не быть (это содержимое ячейки), а на тег <body> мы отвлекаться не будем. Обратим внимание на уже знакомые нам теги, задающие отдельные части таблицы.
Щелкнем мышью по тегу <td>. Ячейка, где стоит текстовый курсор, будет выделена толстой черной рамкой. Теперь вы можете производить какие - либо манипуляции с этой ячейкой, в частности задать значения ее параметров. Теперь щелкните по тегу <tr> в секции тегов. В этом случае будет выделена вся строка, в которой находится текущая ячейка. Ну и нажатие на тег <table> выделяет всю таблицу.
Есть и другие способы выделить таблицу, строку или целый столбец сразу.
Чтобы выделить строку, поместите курсор мыши точно на левую границу самой левой ячейки этой строки. Курсор при этом примет вид небольшой черной стрелки, направленной вправо. Если вы щелкнете в этот момент левой кнопкой мыши, строка, напротив которой стоит курсор, будет выделена. А если вы нажмете левую кнопку мыши и, не отпуская ее, протащите мышь по вертикали, то сможете выделить сразу несколько строк.
Столбец или несколько столбцов можно выделить точно так же, только для этого курсор мыши помещается на верхнюю границу самой верхней строки таблицы. И принимает он вид черной стрелки, направленной вниз.
Вы можете также выделить одновременно несколько ячеек. Для этого щелкните мышью на ячейке, где начнется ваше выделение, и, не отпуская левой кнопки мыши, протащите ее, пока все нужные ячейки не будут выделены.
Таблицу выделить несколько сложнее. Поместите курсор на внешнюю границу таблицы и немного сдвиньте его "вовне". При этом курсор примет вид четырехконечной стрелки. Если после этого вы щелкнете мышью, таблица будет выделена целиком.
Также разработчики Dreamweaver предусмотрели еще один, самый быстрый способ выделить всю таблицу. Поставьте текстовый курсор в любую ячейку таблицы и выберите пункт Select Table подменю Table меню Modify или контекстного меню или просто нажмите комбинацию клавиш <Ctrl>+<A>.
После выделения таблицы на ее границе вы увидите уже знакомые вам маркеры изменения размеров. С их помощью вы можете изменить размеры таблицы.
Таким образом вы можете добраться до любой из составных частей вашей таблицы.
А теперь поговорим, что нам предлагает редактор свойств Dreamweaver.
Чтобы добраться до параметров ячейки, совсем не обязательно ее выделять. Просто поставьте в нее текстовый курсор, и редактор свойств тотчас предложит вам задать ее параметры (рис. 5.11).
|
Рис. 5.11. Вид редактора свойств при выделенной ячейке таблицы |
Как видите, уже знакомые нам элементы управления, находящиеся в верхней части редактора свойств, позволяют задать параметры текста. Обратимся к нижней части редактора свойств.
Раскрывающийся список Horz позволяет задать горизонтальное выравнивание содержимого ячейки. Здесь доступны четыре пункта:
□ Default — выравнивание по умолчанию, обычно по левому краю, в некоторых случаях — по центру;
□ Left — выравнивание по левому краю;
□ Center — по центру;
□ Right — по правому краю.
Аналогично раскрывающийся список Vert задает вертикальное выравнивание содержимого ячейки. Здесь доступно пять пунктов:
□ Default — выравнивание по умолчанию, обычно посередине;
□ Тор — выравнивание по верху;
□ Middle — посередине;
□ Bottom — по низу;
□ BaseLinE — по базовой линии.
В полях ввода W и Н вводятся, соответственно, величины ширины ячейки и высоты строки, в которой она находится. Вы можете задать их в пикселах или процентах от ширины таблицы. Во втором случае просто добавьте после цифр знак процента. Если вы ничего не введете в это поле ввода, то ячейка займет все свободное пространство.
Флажок No Wrap запрещает перенос строк внутри ячейки. В этом случае ячейка растягивается по ширине, чтобы вместить весь имеющийся в ней текст, который в этом случае будет "вытянут" в одну строку. Обычно Web - обозреватель растягивает ячейку по ширине только в самом крайнем случае, если в тексте встретится очень длинное слово, а вместо этого растягивает ее по вертикали и переносит текст по строкам. Используйте этот параметр только для декоративных целей и с большой осторожностью, иначе ваша таблица может оказаться столь широкой, что пользователю придется прокручивать ее по горизонтали. А слишком широкие таблицы, не помещающиеся в окне ¥еЬ-обозревателя, — очень плохой стиль в ¥еЬ-дизайне (рис. 5.12).
|
Рис. 5.12. Вид таблицы при включенном флажке No Wrap |
Флажок Header позволит отформатировать ячейку, в которой находится текстовый курсор, как ячейку заголовка таблицы. Ячейка заголовка отличается от обычной ячейки тем, что ее содержимое выравнивается по центру и отображается жирным шрифтом. Используйте этот параметр только для ячеек первой строки таблицы, содержащей ее "шапку"; в этом случае лучше всего отформатировать таким образом все ячейки строки (например, как показано нарис. 5.13).
( Примечание )
Ячейка заголовка таблицы создается с помощью тега <тн>, аналогичного <то>.
Поле ввода В8 служит для задания имени файла фонового изображения ячейки. Селектор цвета (не путать с одноименным полем ввода!) позволяет задать цвет фона ячейки таблицы. Если ни то, ни другое не заданы, будет использован фон страницы.
Как видите, ячейка таблицы может иметь свое фоновое изображение и свой цвет фона, отличные от фонового изображения страницы. Это позволяет ¥еЬ-дизайнерам создавать очень красивые графические эффекты: текстовые плашки, линейки и т. п. Однако, если вы собираетесь задать фоновое изо
бражение и цвет фона для ячейки таблицы, следуйте рекомендациям, изложенным в главе 3.
Селектор цвета Вгс1г позволяет задать цвет границы ячейки.
5 Untitled Document (Примеры/5.3.Ыпп*)
|
Это ячейка № 1.1 |
1 |
Ячейка № 4.1 |
|
|
А это ячейка № 3.2 |
|||
|
Ну, а это, как вы уже догадались, ячейка № 2.3 |
@ |
|
<Ьоф> <table> <lr> <th> |
429 к 25Э Т 2К /1 sec ^
Рис. 5.13. Таблица со строкой заголовка
Для строк предлагается такой же набор параметров, как и для ячеек (см. рис. 5.11). Естественно, все эти свойства применяются не к отдельной ячейке, а ко всей строке. Мы с вами не будем их подробно рассматривать, обратим внимание только на следующие замечания.
□ Если ввести в поле ввода W какое-либо значение и нажать клавишу <Enter>, данное значение будет применено ко всем ячейкам таблицы. Используйте эту особенность, если хотите создать таблицу с ячейками одинаковой ширины. Но если вы зададите некорректное значение (например, 50% для таблицы из десяти столбцов), Web-обозреватель сам решит, какой ширины будет та или иная ячейка.
□ Если включить флажок No Wrap, ваша таблица может расшириться до невообразимых пределов. Хорошо подумайте, прежде чем включить этот флажок.
□ Если вы задали фоновое изображение (поле ввода Bg), цвет фона (селектор цвета Bg) или цвет границы (селектор цвета Brdr), значения этих параметров будут применены ко всем ячейкам выделенной строки. Естественно, вы можете изменить любой из названных параметров у любой ячейки. Посмотрите на рис. 5.14 — там для всей нижней строки был задан темно-серый фон, а для ячейки № 2.3 — белый.
Д Untitled Document (npHriepbi/5.3.htm*)
|
Это ячейка № 1.1 |
Ячейка № АЛ |
||
|
А это Ячейка №3.2 |
|||
|
Ну, а это, как вы уже догадались, ячейка № 2.3 |
@ |
|
Rml |
|
429 к 25Э т 2K 7 1 sec |
<Ьоф> <table> <tr> <td>
Рис. 5.14. Результат установки разных цветов фона для всей нижней строки и ячейки № 2.3. Видно, как параметры ячейки перекрывают параметры строки
Однако разные Web-обозреватели поддерживают не все параметры, предлагаемые Dreamweaver для строк и ячеек. И ваша красивая таблица может отобразиться в них совсем не так, как вы планировали. Поэтому чем чаще вы будете справляться в электронном руководстве по HTML, какой атрибут каким тегом поддерживается, и чем чаще будете просматривать вашу страницу в разных Web-обозревателях, тем меньше у вас будет возникать проблем с совместимостью.
Вид редактора свойств при выделенной таблице показан на рис. 5.15. Как видите, набор параметров здесь сильно отличается от набора параметров ячеек и строк. И это не удивительно.
|
Рис. 5.15. Вид редактора свойств при выделенной таблице |
Сначала поговорим о знакомом.
Поля ввода Rows и Cols служат для быстрого изменения количества, соответственно, строк и столбцов таблицы.
Если вы задали количество строк или столбцов меньше существующего, лишние строки или столбцы будут удалены без предупреждения.
Поля ввода W и Н служат для задания, соответственно, ширины и высоты таблицы. Эти значения могут быть заданы как в пикселах, так и в процентах относительно ширины или высоты родительского элемента страницы (элемента, в котором находится наша таблица; это может быть сама Web - страница или ячейка другой таблицы). Вам нужно просто выбрать в раскрывающихся списках, находящихся справа от соответствующего поля ввода, значение pixels (пикселы) или %.
Поле ввода Bg Image служит для задания имени файла фонового изображения для всей таблицы. Селектор цветов Bg Color задает цвет фона таблицы, а селектор цветов Brdr Color — цвет границ таблицы. Все эти установки перекрываются аналогичными установками для ячейки (см. пример на рис. 5.16).
|
Untitled Document (Примеры/5.3.Ь(т*)
Рис. 5.16. Перекрытие параметров таблицы параметрами ячеек. Для ячейки № 3.2 задан светло-серый фон, для ячейки № 4.1 — белая граница, для всей таблицы — белый фон и черная граница |
Поле ввода CellPad служит для задания расстояния между границей ячейки и ее содержимым в пикселах. Поле ввода CellSpace задает расстояние между границами находящихся рядом ячеек в пикселах. Поле ввода Border служит для задания толщины границы ячейки в пикселах. Все эти параметры мы задавали в диалоговом окне Insert Table (см. рис. 5.4).
Теперь рассмотрим параметры, с которыми мы еще не встречались, а если и встречались, то в приложении к другим элементам страницы.
Раскрывающийся список Align, как вы поняли, служит для задания горизонтального выравнивания таблицы.
Доступны четыре значения:
□ Default — выравнивание по умолчанию, обычно влево;
□ Left — выравнивание влево;
□ Center — по центру;
□ Right — вправо.
Заметьте, что с помощью этого списка задается не выравнивание содержимого таблицы, а выравнивание самой таблицы, т. е. будет ли таблица прижата к левому краю окна или центрирована в нем.
В левом нижнем углу редактора свойств есть группа из шести кнопок, управляющих значениями ширины и высоты ячеек и строк таблицы. Эта кнопки так важны, что мы приведем их на рис. 5.17 отдельно.
|
|
Рис. 5.17. Кнопки управления значениями ширины и высоты ячеек и строк таблицы
Часто бывает так, что после многочисленных экспериментов с установкой размеров ячеек таблицы нужно вернуться к значениям по умолчанию. В самом деле, жестко задавать размеры ячеек стоит лишь в том случае, если вы точно знаете, какого эффекта хотите достичь. В основном, это нужно лишь для дизайнерских изысков, но не для простой публикации таблично организованных данных. В последнем случае лучше все оставить как было — пусть сам ¥еЬ-обозреватель разбирается, какой ширины сделать каждую ячейку, чтобы таблица поместилась в его окно.
Итак, мы уже порядком намучались, задавая фиксированные размеры ячеек, и теперь хотим стереть их, вернувшись к значениям по умолчанию. Для этого предназначены левая верхняя и левая нижняя кнопки группы. Верхняя удаляет значения ширины ячеек, а нижняя — значения высоты строк. Попробуйте выделить нашу учебную таблицу и нажать эти кнопки.
|
|
При этом будут сброшены также значения ширины и высоты самой таблицы.
Если вы закрыли редактор свойств или предпочитаете пользоваться меню, вы можете достичь того же эффекта, выбрав пункты Clear Cell Heights (стереть высоты строк) или Clear Cell Widths (стереть значения ширины ячеек) подменю Table меню Modify.
Теперь представим такой случай. Вы после долгих мучений выставили значения ширины ячеек и теперь довольны результатом. Но — все эти величины заданы в процентах! И теперь, если размеры таблицы изменятся, все значения ширины ячеек "поплывут", ведь они относительны, а не абсолютны. Как быть в этом случае?
Для этого служит средняя верхняя и средняя нижняя кнопки (рис. 5.17). Верхняя из них позволяет преобразовать относительные значения ширины ячеек в абсолютные, фиксированные. А нижняя то же самое выполняет с высотами строк. Аналогичного эффекта вы можете достичь, выбрав пункты Convert Widths to Pixels (преобразовать ширину ячеек в пикселы) или Convert Heights to Percents (преобразовать высоты в пикселы) подменю Table меню Modify.
Правая верхняя и правая нижняя кнопки (рис. 5.17) выполняют обратное преобразование — абсолютных значений (пикселы) в относительные (проценты). Опять же, верхняя кнопка проделывает это с шириной ячеек, а нижняя — с высотами строк. Также вы можете воспользоваться пунктами Convert Widths to Percent (преобразовать ширину ячеек в проценты) или Convert Heights to Percent (преобразовать высоты в проценты) подменю Table меню Modify.
Предопределенные форматы таблиц
Ко всему вышесказанному можно добавить, что Dreamweaver предлагает на выбор множество предопределенных форматов таблиц и возможность быстро "подогнать" ту или иную схему под свои нужды. Концепция форматов таблиц схожа с концепцией предопределенных цветовых схем, рассмотренных нами в главе 3 — они тоже созданы профессиональными дизайнерами с целью помочь начинающим пользователям.
Формат таблиц выбирается с помощью диалогового окна Format Table, показанного на рис. 5.18. Вызвать его можно, выбрав пункт Format Table в меню Command. Этот пункт меню доступен только тогда, когда вы выделите таблицу или хотя бы поставите текстовый курсор в ее ячейку.
В левом верхнем углу находится список, в котором представлены все доступные предопределенные форматы таблиц. Вы просто выбираете нужную строку и просматриваете получившийся результат в панели предварительного просмотра, находящемся правее списка. Расположенные ниже группы элементов управления помогут вам немного изменить предопределенный формат, если он вас не вполне устраивает.
Группа Row Colors позволяет задать цвета строк. Dreamweaver в этом случае предлагает вам задать цвета групп строк с чередованием (нечетная группа строк — одного цвета, четная — другого и т. п.) для лучшей читаемости больших таблиц с множеством строк. Селектор цвета First задает цвет нечетных групп строк, a Second — четных. Раскрывающийся список Alternate задает, сколько строк будет содержаться в каждой группе. Здесь доступно пять пунктов:
□ <do not altemate> — все строки имеют один цвет, заданный селектором цвета First;
□ Every Other Row — группы по одной строке;
□ Every Two Rows — по две строки;
□ Every Three Rows — по три строки;
□ Every Four Rows — по четыре строки.
|
Рис. 5.18. Диалоговое окно Format Table |
Группа Top Row позволяет установить параметры первой строки таблицы, ее "шапки". Раскрывающийся список Align задает выравнивание текста: по левому краю (пункт Left), по центру (Center), по правому краю (Right) или по умолчанию (None). Раскрывающийся список Text Style задает стиль текста заголовка: обычный (пункт Regular), жирный (Bold), курсив (Italic) или жирный курсив (Bold Italic). Селекторы цвета Bg Color и Text Color служат для задания цветов, соответственно, фона и текста первой строки.
С помощью группы Left Col устанавливаются параметры левого столбца таблицы. Раскрывающиеся списки Align и Text Style вам уже знакомы.
Поле ввода Border задает толщину границы таблицы в пикселах.
Обычно Dreamweaver применяет все заданные здесь настройки к строкам и ячейкам таблицы. Но если вы включите флажок Apply All Attributes to TD Tags Instead of TR Tags, он будет применять их только к ячейкам.
Закончив подбор формата таблицы, нажмите кнопку ОК, чтобы закрыть окно и применить заданные параметры. Если вы нажмете кнопку Apply, то заданные вами параметры будут применены к таблице без закрытия окна.
