ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА Часть I 1 Работа с

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

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

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

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

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

Слияние ячеек таблицы Механизм слияния ячеек таблицы, предусмотренный в HTML, позволяет объединять несколько соседних ячеек строки или столбца в одну большую ячейку. <TABLE BORDER=1> <TR> <TH COLSPAN=3> Последние модели </TH> </TR> <TR> <TH>Наименование товара</TH> <TH>Цена 1 шт. </TH> <TH>Количество на складе</TH> </TR> <TR> <TH>Бумага</TH> <TH>100</TH> <TH>20</TH> </TR> </TABLE> Атрибут COLSPAN тегов <TH> и <TD> позволяет выполнить слияние ячеек из нескольких столбцов в пределах одной строки таблицы, а ROWSPAN, употребляемый с теми же тегами, – ячеек из нескольких строк в пределах одного столбца.

Слияние ячеек таблицы <TABLE BORDER=1> <TR> <TD ROWSPAN=2>Выходные</TD> <TD>Суббота</TD> <TD>17. 00</TD> </TR> <TD>Воскресенье</TD> <TD>13. 00</TD> </TR> </TABLE>

Заголовки таблицы <TABLE BORDER=1 ALIGN=CENTER> <TD>Head 1</TD> <TD>Head 2</TD> </TR> <TD>A</TD> <TD>B</TD> </TR> <TD>D</TD> <TD>E</TD> </TR> </TABLE> <TABLE BORDER=1 ALIGN=CENTER> <TH>Head 1</TH> <TH>Head 2</TH> </TR> <TD>A</TD> <TD>B</TD> </TR> <TD>D</TD> <TD>E</TD> </TR> </TABLE>

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

Вложенные таблицы <TABLE BORDER=1> <TR> <TD> <TABLE WIDTH=100%> <TR><TD>вложенная таблица</TD></TR> </TABLE> </TD> </TR> </TABLE>

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

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

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

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

Примеры использования таблиц Можно при помощи бордера таблицы имитировать паспарту для какой-нибудь картинки. <TABLE border=1 cell. Padding=0 cell. Spacing=0 width=200> <TR bg. Color=#f 7 f 7 f 7> <TD><IMG border=1 height=106 hspace=24 src="4. jpg" vspace=24 width=152> </TD> </TR> </TABLE>

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

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

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

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

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

При подготовке презентации использовались материалы статей Виктора Вязьминова, Владислава Мержевича с сайтов: http: //mrdesign. krasline. ru http: //htmlbook. ru