Таблицы
<<Назад | На главную | Вперед >>
6. Таблицы
Таблицы позволяют расположить множество данных на небольшой Web-странице. Собранные в таблицу данные выглядят очень наглядно, найти в них нужные сведения ничего не стоит. Кроме того, таблицы — это красиво!
Начнем мы с самых простых таблиц — обычные наборы строк, столбцов и ячеек без всяких премудростей.
Учиться создавать таблицы мы будем на списке увлечений учащегося Всезнайки, за которого мы делаем сайт.
Откроем в Dreamweaver страницу passions.htm (она должна быть пуста) и приступим к созданию нашей первой таблицы.
6.1. Создание таблиц.
Создать таблицу проще всего, нажав кнопку Table
на вкладки Common инструментария объектов. Также можно выбрать пункт Table меню Insert или нажать комбинацию клавиш <CtrI>+<AIt>+<T>. В любом случае на экране появится диалоговое окно Table, показанное на рис. 6.1.
Рис. 6.1. Диалоговое окно Table
В полях ввода Rows и Columns вводится соответственно количество строк и столбцов создаваемой таблицы. Если мы ошибемся и введем большее или меньшее количество строк или столбцов, не беда— недостающие (лишние) строки и столбцы можно будет добавить (удалить) потом.В поле ввода Table width задается ширина таблицы в пикселях или процентах от ширины Web-страницы. В раскрывающемся списке, расположенном справа от этого поля ввода, нужно будет выбрать соответственно пункт pixels или percent.
В поле ввода Border thickness задается толщина рамок в пикселях. Каждая таблица HTML может содержать видимую рамку. По умолчанию, если в это поле ничего не введено, рамки имеют толщину в один пиксель; вы также можете ввести 0, чтобы сделать рамку невидимой.
В поле ввода Cell padding задается отступ между границей ячейки таблицы и ее содержимым в пикселях. По умолчанию он равен одному пикселю.
Аналогично, поле ввода Cell spacing служит для задания отступа между границами отдельных ячеек. По умолчанию он равен 2 пикселам.
Набор переключателей Header позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели None (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), Тор ("шапка") и Both (и "шапка", и выделенный первый столбец). При том ячейки, составляющие "шапку" и выделенный столбец, будут оформлены как ячейки заголовка, а текст, который мы введем в них, будет автоматически выровнен по центру и выделен полужирным шрифтом.
В поле ввода Caption вводится название таблицы. Это название будет находиться над создаваемой таблицей.
Раскрывающийся список Align caption позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты:
- default (по умолчанию) — выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру;
- top — название находится над таблицей и выравнивается по центру;
- bottom — название находится под таблицей и выравнивается по центру;
- left — название находится над таблицей и выравнивается по левому краю;
- right — название находится над таблицей и выравнивается по правому краю.
В области редактирования Summary вводится примечание таблицы. Это примечание не выводится Web-обозревателями на экран, но может быть использовано для каких-то других целей (например, его могут обрабатывать программы, читающие экранный текст). Задавать его не обязательно.
Итак, введем в диалоговом окне Table значения, представленные на рис. 6.1, и нажмем кнопку ОК. У нас должно получиться то, что изображено на рис. 6.2.
Рис. 6.2. Наша первая таблицаТеперь поставим текстовый курсор в любую ячейку таблицы и наберем какой-нибудь текст. Повторим то же самое с остальными ячейками таблицы. У нас получится нечто, похожее на рис. 6.3.
Рис. 6.3. Таблица с заполненными ячейкамиСодержимое ячейки таблицы совсем не обязано быть текстовым. Мы можем поместить в ячейку графическое изображение, как показано на рис. 6.4.
Рис. 6.4. Таблица, в одну из ячеек которой помещено графическое изображениеМы даже можем вставить в ячейку одной таблицы другую! В этом случае ширина таблицы, задаваемая в поле ввода Table width диалогового окна Table (см. рис. 6.1), считается относительно ширины ячейки, в которой находится таблица (т. е. родительского тега).
Ячейка таблицы обязательно должна иметь хоть какое-то содержимое, иначе Web-обозреватель может отобразить ее некорректно. Если же ячейка все-таки должна быть пустой, вставьте в нее неразрывный пробел (его код HTML — ), как это делает в подобных случаях сам Dreamweaver.
(С) Янактаев Евгений Владимирович, 2009
E-mail:teacher.g6@mail.ru