ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА ЧастьI1. Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц. - презентация

1 ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА ЧастьI1. Работа с таблицами: создание, обрамление, слияние ячеек, построение вложенных таблиц. Оформление таблиц.

2 Создание таблицы Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. … – добавление таблицы на веб-страницу … – добавление строки таблицы … – добавление ячейки таблицы

3 Параметры таблицы Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге TABLE Свойство ЗначениеОписание Пример align=left right center Выравнивание таблицы align=center background=URLФоновый рисунокbackground=pic.gif bgcolor=#rrggbb Цвет фона таблицы bgcolor=#FF9900 border=n Толщина рамки в пикселах border=2 bordercolor=#rrggbb Цвет рамкиbordercolor=#333333

4 Параметры таблицы Свойство ЗначениеОписание Пример bordercolordark=#rrggbb Тень рамкиbordercolordark= #f0f0f0 cellpadding=n Расстояние между ячейкой и ее содержимым cellpadding=7 cellspacing=n Дистанция между ячейками cellspacing=3 frame=void above below lhs rhs hsides vsides box Задание типа рамки таблицы frame=hsides

5 Параметры таблицы Свойство ЗначениеОписание Пример nowrap Запрещает переносы строк в тексте valign=top bottom Выравнивание по высоте valign=top width=n n% Минимальная ширина таблицы, можно задавать в пикселах или процентах width=90% heightn n% Минимальная высота таблицы, можно задавать в пикселах или процентах height=18

6 Слияние ячеек таблицы Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку. Последние модели Наименование товара Цена 1 шт. Количество на складе Бумага Атрибут COLSPAN тегов и позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца.

7 Слияние ячеек таблицы Выходные Суббота Воскресенье 13.00

8 Заголовки таблицы Head1 Head2 A B D E Head1 Head2 A B D E

9 Примеры таблиц

10 Вложенные таблицы вложенная таблица

11 Отображение границ таблицы Значение Результат void Все линии внешней границы отсутствуют above Линия над таблицей below Линия под таблицей rhs Линия справа от таблицы lhs Линия слева от таблицы hsides Линия над и под таблицей vsides Линия справа и слева от таблицы border Все линии внешней границы присутствуют (значение по умолчанию) Атрибут FRAME тега позволяет указать тип внешнего обрамления таблицы.

12 Отображение границ таблицы Значение Результат none Все внутренние линии отсутствуют cols Линии между столбцами rows Линии между строками groups Линии между группами столбцов и группами строк all Все внутренние линии присутствуют (значение по умолчанию) Атрибут RULES тега позволяет указать тип внутренних разделительных линий таблицы.

13 Особенности таблиц Таблица, если не указано особо, всегда выравнивается по левому краю; Параметр background, отвечающий за рисунок фона, по-разному понимается в разных браузерах: IE вставляет картинку во всю таблицу (если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали), Netscape4 добавляет фоновое изображение в каждую ячейку таблицы; По умолчанию, таблица выводится без рамки. Однако, Netscape 4 добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0; Рамка таблицы, в случае добавления параметра border к тегу TABLE, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя эффект трехмерности. Если ширина таблицы не задана, она подгоняется под содержание ячеек. Пока таблица не загрузится полностью, ее содержимое не начнет отображаться.

14 Примеры использования таблиц Вертикальные линии – прекрасный декоративный элемент, который находит применение в множестве разных случаев. Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета:. Чтобы такая линия была видна в Netscape 4, в ячейку можно поместить прозрачный рисунок размером 1 на 1 пиксел.

15 Примеры использования таблиц Можно при помощи бордюра таблицы имитировать паспарту для какой-нибудь картинки.

16 Примеры использования таблиц Таким способом можно создать кнопки при помощи кода. Изменить текст на кнопке намного проще, чем на картинке.

17 Верстка с помощью таблиц Использование таблиц с невидимой границей для разделения страницы на блоки довольно мощный способ верстки веб-страниц, который нашел применение на большинстве сайтов. Верстка с помощью таблиц используется в следующих случаях: выравнивание элементов на странице по правой стороне, левой стороне и по центру; создание колонок; заливка областей однотонным цветом или фоновым рисунком; создание вертикальных линий; объединение разрезанных кусочков изображений в одно; отступы вокруг текста; создание различных рамок.

18 Верстка с помощью таблиц

19 Этот пример - очень популярная сетка на информационных сайтах: трехколоночный вариант по пятиколоночному делению. Позволяет получать огромное количество внешних вариантов без каких-то влияний на общий стиль. Визуальные особенности сайта достигаются за счет цвета, шрифта заголовков, цвета панелей.

20 Верстка с помощью таблиц Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений. Существуют законы, которые позволяют создать модульные сетки, приятные глазу человеку. Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине: a:b=b:(a+b).

21 При подготовке презентации использовались материалы статей Виктора Вязьминова, Владислава Мержевича с сайтов: