ГЛАВА 5.
Таблицы
Если вам нужно
поместить на ограниченном пространстве Web-страницы множество
цифровых (и не только цифровых) данных, нет лучшего средства,
чем таблица. Если вам необходимо создать красивый список,
снова на помощь приходит таблица. Если вам требуется точно
позиционировать текст и графику относительно друг друга,
опять же незаменима таблица. Таблицы заполонили Web-документы.
И немудрено: при нескольких не слишком значительных недостатках
они обладают массой достоинств.
Без таблиц
в Web-дизайне никуда. Таблицы с разноцветными ячейками,
с границами и без границ, таблицы, вложенные друг в друга,
таблицы с невидимыми границами приходят на помощь, когда
Web-дизайнеру нужно сделать что-либо отличное от простого
"потока" текста, "разбавленного" рисунками.
Но — странная ирония судьбы и высоколобых разработчиков
языка HTML — стандартизированы они были совсем недавно.
А это значит, что раньше, если Web-дизайнеру требовалось
поместить на страницу табличные данные, он прибегал к
тексту фиксированного формата. Помните старинные текстовые
редакторы для MS-DOS: Лексикон, "Слово и дело",
MiltiEdit? Помните, как там делались таблицы? Вот это
и есть текст с фиксированным форматированием.
Но эти времена
давно в прошлом. Сейчас же стандарт HTML предлагает Web-дизайнерам
мощнейшие средства создания таблиц любой сложности. Главное
— не запутаться в нагромождении строк и ячеек, но это
уже проблема не HTML.
Создавать таблицы,
вводя HTML-код вручную, очень трудоемко. Dreamweaver значительно
облегчает труд Web-дизайнера, позволяя вставить в текст
таблицу несколькими щелчками мыши. Точно так же просто
изменить свойства как самой таблицы, так и любой ее строки
или ячейки. И уж совсем просто размещать в ячейках таблицы
нужное содержимое: текст, графику, другие таблицы и все,
чем богат HTML и что придет в голову Web-дизайнеру.
В этой главе
мы рассмотрим основные моменты работы с таблицами. Мы
научимся их создавать, форматировать, размещать в них
полезное содержимое, работать с ячейками и рассмотрим
все их достоинства и недостатки. Но сначала давайте познакомимся
с доисторическим, т. е. "дотабличным" периодом
в истории HTML. А именно, выясним (или вспомним), что
такое текст фиксированного формата и чем он может быть
нам полезен.
Текст
фиксированного формата
Как Web-обозреватель выводит
на Web-страницу текст? На самом деле, здесь нет ничего
сложного. Он придерживается нескольких простых правил,
которые вам стоит узнать:
- символы возврата каретки
преобразуются в пробелы. Строка обрывается только тогда,
когда встречается тег конца абзаца </р> или разрыва
<br>;
- любое количество последовательно
стоящих пробелов преобразуется в один пробел;
- текст заполняет по ширине
все доступное пространство родительского элемента (страницы,
абзаца и т. п.). Внутри одного абзаца строки будут иметь
примерно одинаковую длину с учетом переносов.
Эти правила,
которым следует каждый Web-обозреватель и которые закреплены
в стандартах HTML, помогают устранить последствия некоторых
ошибок Web-дизайнера. Например, следуя им, Web-обозреватель
игнорирует дублирующиеся пробелы — настоящий бич современной
полиграфии. Однако, если вам нужно поместить на странице
текст фигурной формы, отформатированный с помощью пробелов
и возвратов каретки, лучше сразу откажитесь от этой идеи.
Или прибегните
к тексту фиксированного формата. Рассмотрим такой HTML-код:
<HTML>
<HEAD>
<ТITLE>Фигурный
текст</ТITLЕ>
</HEAD>
<BODY>
<Р>
\хххххх\ \хххххх\
\хххххх\ \хххххх\ \хххххх\ \xxxxxx\
</BODY>
</HTML>
Наберите этот
текст в любом текстовом редакторе (можно и в Dreamweaver
в режиме отображения кода), сохраните его в файле под
именем 5.1.htm и откройте в Web-обозревателе. То, что
вы увидите, показано на рис. 5.1.
Рис. 5.1.
Фигурный текст неправильно отображается Web-обозревателем
Да уж, мягко
говоря, не то... Но не надо ругать Web-обозреватель: он
всего лишь программа, следующая заложенному в ней алгоритму.
Давайте сделаем лучше. Заменим теги <р> и </р>
на <PRE> и </PRE>, соответственно. Полученный
файл сохраним под именем 5.2.htm и откроем в Web-обозревателе.
Посмотрите на рис. 5.2 — совсем другое дело!
Рис. 5.2.
Текст фиксированного формата отображается правильно
Web-обозреватель
прекрасно знает свое дело. Ему нужно только правильно
поставить задачу — и он ее решит.
Так вы поняли,
что такое текст фиксированного формата? Все, что находится
внутри парного тега <PRE>, Web-обозревателем переносится
на страницу
без всяких
изменений. Кроме того, такой текст выводится моноширинным
шрифтом (шрифтом, символы которого имеют одинаковую
ширину), а не пропорциональным, как обычно (символы
пропорционального шрифта имеют разную ширину). Поэтому
он выглядит, как в старые добрые времена MS-DOS. (Если
вы, конечно, помните эти времена...)
А можно ли
сделать такое в Dreamweaver? Конечно! Для этого просто
наберите первую строку текста, который вы хотите превратить
в текст фиксированного формата, и:
- либо выберите пункт Preformatted
в раскрывающемся списке Format редактора
свойств;
- либо выберите пункт
Preformatted Text в подменю Paragraph Format
меню Text;
- либо выберите пункт Preformatted
Text в подменю Paragraph Format контекстного
меню.
Вот и все.
В тексте с
фиксированным форматированием действуют все теги HTML.
Например, вы можете раскрасить такой текст в разные цвета,
поместить в нем изображение или гиперссылку, как и в обычном
тексте.
Выше мы говорили
о таблицах. С помощью текста фиксированного формата они
создаются очень просто, хотя и трудоемко. Взгляните, например,
на такой код:
<PRE>
+----+---------------------------------!------!------+
! №№ ! Проект
! Закончен? ! +
+----+--------------------------------+------------+
! 1 ! Свой
домашний сайт ! Да !
+----+-------------------------------+-----------+
! 2 ! Сайт
своей любимой кошки !
Нет, кошка
! ! ! ! убежала !
+----+-------------------------------+---
--------+
</PRE>
Вы можете сохранить
его в HTML-файле и загрузить в Web-обозревателе. Даже
несмотря на отсутствие тегов <HTML>, <HEAD>
и <BODY>, он будет нормально отображаться. Да, это
таблица, хотя и корявая. Именно такие таблицы были в ходу,
когда HTML еще не имел инструментов для построения настоящих
таблиц, и Web-дизайнерам приходилось ломать голову, как
сделать "таблицу без таблицы".
Зачем мы все
это рассматриваем? Ведь это, фактически, устаревший подход.
Может быть и устаревший, но в некоторых случаях весьма
актуальный. В частности, если вы имеете много текстовых
файлов и хотите опубликовать их в Интернете, но не желаете
заниматься трудоемким HTML-форматированием, то самый лучший
вариант — заключить их содержимое в теги <PRE>.
Так поступает Максим Мошков, когда выкладывает в свою
интернет-библиотеку новые книги.
Простые
таблицы
Ну все, пора
переходить к настоящим таблицам. Хватит с нас корявого
текста фиксированного формата!
Создание
таблиц
Сначала, как
обычно, создадим новую Web-страницу.
Пустую таблицу
создать проще всего, нажав кнопку Insert Table (рис.
5.3) вкладки Common панели объектов (см. рис. 4.3).
Также вы можете выбрать пункт Table меню Insert
или нажать комбинацию клавиш <Ctrl>+<Alt>+<T>.
В любом случае на экране появится диалоговое окно Insert
Table, показанное на рис. 5.4.
Рис. 5.3.
Кнопка Insert Table панели объектов
Рис. 5.4.
Диалоговое окно Insert Table
В полях ввода
Rows и Columns вводится, соответственно, количество
строк и столбцов создаваемой таблицы. Если вы ошибетесь
и введете большее или меньшее количество строк или столбцов,
не беда — вы всегда сможете добавить их или удалить.
В поле ввода
Width задается ширина таблицы. Возможно задание
ширины как в пикселах, так и в процентах от ширины родителя.
В раскрывающемся списке, расположенном справа от этого
поля ввода, вы должны будете выбрать пункт Percent
(проценты) или Pixels (пикселы).
В поле ввода
Border задается толщина границ таблицы в пикселах.
По умолчанию она равна 1; вы можете ввести 0, чтобы убрать
границы совсем.
В поле ввода
Cell Padding задается расстояние между границей
ячейки таблицы и ее содержимым в пикселах. По умолчанию
оно равно 1.
Аналогично,
поле ввода Cell Spacing служит для задания расстояния
между границами отдельных ячеек. По умолчанию оно равно
2.
Изменяя значения
полей ввода Cell Padding и Cell Spacing, можно
получить интересные эффекты, например огромные промежутки
между границами ячеек или полупустые ячейки, в самом центре
которых съежился небольшой текст. Обычно такие эффекты
используют в декоративных таблицах.
Задав значения
в полях ввода, нажмите кнопку ОК. Мы не будем говорить,
что именно вам нужно вводить — поэкспериментируйте сами.
Так или иначе, наша первая таблица будет чисто учебной.
Во всяком случае, у вас должно получиться что-то похожее
на рис. 5.5. Сохраните эту таблицу в файле 5.3.htm.
Рис. 5.5.
Наша первая таблица
Рис. 5.6.
Таблица с заполненными ячейками
Теперь поставьте
текстовый курсор в любую ячейку таблицы и наберите какой-нибудь
текст. Повторите то же самое с любыми другими ячейками.
В одну из ячеек
можете вставить графическое изображение из тех, что мы
использовали в предыдущих занятиях. У вас получится нечто,
похожее на рис. 5.6.
Вы даже можете
вставить в ячейку таблицы другую таблицу. Попробуйте -и
это получится!
Кстати, даже
если вы задали толщину границ таблицы равной нулю, Dreamweaver
все равно будет отображать тонкую штриховую линию, чтобы
помочь вам не потерять таблицу. Если эта граница вам мешает,
и вы уверены, что справитесь без нее, отключите пункт-выключатель
Table Borders подменю Visual Aids меню Views.
Чтобы вернуть границы назад, просто включите этот
пункт.
Работа
с таблицами
Измените размер
окна документа Dreamweaver, в котором находится наша таблица.
Заметьте, как изменяется ширина таблицы, а все потому,
что она задана относительно ширины родителя, в нашем случае
окна. Если бы мы задали фиксированную ширину таблицы в
пикселах, она бы не изменилась. Также вы, наверное, уже
заметили, что при вводе текста в ячейки их ширина и высота
изменяются, чтобы вместить текст полностью. Такие действия
выполняют и Dreamweaver при создании страниц, и программы
Web-обозревателей при их отображении; если размер ячейки
не был жестко задан, он всегда устанавливается самой программой.
Поместите курсор
на вертикальной границе между двумя ячейками. Вы увидите,
что он примет форму двунаправленной стрелки, и вы сможете
захватить мышью границу и переместить ее по горизонтали.
Одна из ячеек станет шире, а другая — уже. При этом им
будет присвоено фиксированное значение ширины; Web-обозреватель
будет изменять ширину таких ячеек только в крайнем случае,
когда ему не будет хватать места для содержимого этих
ячеек.
То же самое
вы можете сделать и с горизонтальной границей между ячейками.
В этом случае строкам, границу между которыми вы двигаете,
будет присвоено фиксированное значение высоты.
Точно таким
же образом вы можете изменить общую ширину таблицы. Для
этого вам будет достаточно перетащить D нужную сторону
крайнюю правую границу таблицы. Ну и, разумеется, Dreamweaver
позволит вам изменить высоту таблицы, просто перетащив
ее крайнюю нижнюю границу.
Имейте, однако,
в виду, что во всех этих случаях Dreamweaver присвоит
размерам таблицы, строк и ячеек (смотря, чьи размеры вы
изменяли) фиксированные значения. Но, опять же, если Web-обозревателю
не будет хватать места в этих ячейках, он их увеличит.
Вообще, заданные
вами размеры строк и столбцов, да и размеры самой таблицы,
— не более чем рекомендация Web-обозревателю. Вы говорите
ему: "Если получится, сделай размер такой-то ячейки
таким-то, а если не получится — задавай его на свое усмотрение".
Это стандартное поведение Web-обозревателя.
Итак, с размерами
разобрались. Теперь поговорим, как можно добавить новые
или удалить лишние строки или столбцы.
Предположим,
вам необходимо добавить новую строку или новый столбец.
Для этого поместите текстовый курсор в ячейку строки,
над которой будет добавлена новая, и выберите пункт Insert
Row в подменю Table меню Modify или
контекстного меню. Также вы можете нажать комбинацию клавиш
<Ctrl>+<M>. Для добавления столбца поставьте
текстовый курсор в ячейку, справа от которой будет добавлен
новый столбец, и выберите пункт Insert Column в
подменю Table меню Modify или контекстного
меню. Если вы привыкли работать с клавиатурой, нажмите
комбинацию клавиш <Ctrl>+ +<Shift>+<M>.
Это простейшие и наиболее быстрые команды вставки строки
или столбца.
Также вы можете
воспользоваться пунктом Insert Rows or Columns подменю
Table меню Modify или контекстного меню.
После его выбора на экране появится диалоговое окно Insert
Rows or Columns, показанное на рис. 5.7.
Рис. 5.7.
Диалоговое окно Insert Rows or Columns (включен
переключатель Rows)
С помощью переключателей
группы Insert вы задаете тип объекта, который хотите
вставить в таблицу. Переключатель Rows задает вставку
строк, а переключатель Columns — столбцов.
В случае если
выбран переключатель Rows, в поле счетчика Number
of Rows задается количество вставляемых строк, а с
помощью группы переключателей Where выбирается,
где они будут вставляться. Переключатель Above
the Selection вставит новые строки над текущей
строкой (той, где стоит текстовый курсор), а переключатель
Below the Selection — под текущей строкой.
В случае если
выбран переключатель Columns, диалоговое окно принимает
вид, показанный на рис. 5.8. При этом в поле счетчика
Number of Columns задается количество вставляемых
столбцов, а с помощью двух переключателей Where выбирается,
где они будут вставляться. Переключатель Before
current Column вставит новые столбцы перед текущим
столбцом (тем, где стоит текстовый курсор), а переключатель
After current Column — за текущим столбцом.
Рис. 5.8.
Диалоговое окно Insert Rows or Columns (включен
переключатель Columns)
Строки или
столбцы будут вставлены сразу после нажатия кнопки ОК.
У вас есть
еще одна возможность вставить в таблицу новую строку или
столбец — разделить текущую ячейку по горизонтали или
по вертикали. В первом случае текущая строка делится на
две или несколько строк, а во втором текущий столбец делится
на два или несколько столбцов. Для того чтобы разделить
ячейку таблицы, нажмите кнопку разделения ячейки, находящуюся
в нижнем левом углу редактора свойств (рис. 5.9). Вы также
можете выбрать пункт Split Cell в подменю Table
меню Modify или контекстного меню либо нажать
комбинацию клавиш <Ctrl>+<Alt>+<S>.
В любом из этих случаев на экране появится диалоговое
окно Split Cell, показанное на рис. 5.10.
Рис. 5.9.
Кнопка разделения ячейки редактора свойств
Рис. 5.10.
Диалоговое окно Split Cell
Группа переключателей
Split Cell Into задает, как будет делиться ячейка.
Переключатель Rows задает разделение текущей строки
на несколько строк, количество которых устанавливается
в поле счетчика Number of Rows. Если же выбран
переключатель Columns, текущий столбец будет делиться
на несколько столбцов, количество которых задается в поле
счетчика Number of Columns. После нажатия кнопки
ОК текущая ячейка будет разделена.
Ненужные строки
и столбцы удаляются еще проще. Для удаления текущей строки
либо выберите пункт Delete Row в подменю Table
меню Modify или контекстного меню, либо нажмите
комбинацию клавиш <Ctrl>+<Shift>+<M>.
Для удаления текущего столбца либо выберите пункт Delete
Column в подменю Table меню Modify или
контекстного меню, либо нажмите комбинацию клавиш <Ctrl>+<Shift>+<->.
Формирование
таблиц
Обычно после
рассмотрения создания какого-либо элемента страницы мы
рассказываем о тегах HTML, с помощью которых он создается.
Теперь пришла пора выяснить, с помощью каких тегов формируется
таблица HTML. Итак, она формируется в четыре этапа. Сейчас
мы их рассмотрим.
На первом этапе
создается сама таблица и задаются ее параметры (ширина,
толщина границы и т. п.). Это уже нам знакомо — посмотрите
на рис. 5.4, где изображено диалоговое окно Insert
Table. Все задаваемые в нем параметры и есть параметры
таблицы.
Примечание
Таблица
создается с помощью парного тега <TABLE>, имеющего
множество атрибутов, из которых мы выделим WIDTH, задающий
ширину таблицы, и HEIGHT, задающий ее высоту.
На втором этапе
внутри таблицы создается набор описаний строк таблицы.
Собственно, таблица состоит из множества строк. Каждая
строка может иметь свои параметры, в частности высоту.
Примечание
Строка таблицы
создается с помощью парного тега <тr>. Высота строки
задается атрибутом HEIGHT. Тег <тr> может появляться
только внутри тега <TABLE>.
На третьем
этапе внутри каждой строки создаются описания ячеек. Каждая
ячейка также может иметь параметры, например ширину. Каждая
строка таблицы, таким образом, .состоит из набора ячеек.
Примечание
Ячейка таблицы
создается с помощью парного тега <тd>. Ширина ячейки
задается атрибутом WIDTH. Тег <тd> может появляться
только внутри тега <тr>.
Последний,
четвертый, этап — это помещение в ячейки полезного содержимого.
Запомните, что это содержимое может находиться только
в ячейках таблицы (тег <TD>), но никак не в строках
(<tr>) или самой таблице (<TABLE>). Если вы
нарушите это правило, HTML-код может отобразиться Web-обозревателем
неверно.
Вам все это
может показаться очень сложным и громоздким. Но на самом
деле ничего сложного в этом нет — наоборот, все очень
просто, если понять принцип. Более того, подобный способ
формирования таблиц исключительно гибок, и именно в жертву
гибкости была принесена компактность HTML-кода таблицы.
Давайте приведем
HTML-код таблицы. Он послужит нам хорошей иллюстрацией
к вышесказанному.
<TABLE>
<TR> <TD>
Содержимое
ячейки </TD> <TD>
Содержимое
ячейки </TD> </TR> <TR> <TD>
Содержимое
ячейки </TD> <TD>
Содержимое
ячейки </TD> </TR>
</TABLE>
Форматирование
таблиц
Ну вот, как
работать с таблицами, мы разобрались. Теперь пора изучить
средства, предлагаемые HTML для форматирования таблиц.
Но сначала нужно выяснить, как выделить в окне документа
Dreamweaver нужный элемент нашей таблицы.
|
