Студопедия — Таблиці у HTML-документах
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Таблиці у HTML-документах






Таблиці у WEB-документах застосовуються не тільки для розміщення табличних даних, а й для вставки зображень і посилань, для раціонального компонування WEB- сторінки.

Таблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом < TABLE> і закінчується тегом < /TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів < TABLE> …< /TABLE> можуть вставлятися такі елементи:

TR – елемент створення рядка;

TD – елемент, що визначає вміст комірки даних;

TH – елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3*2 використовується такий шаблон:

< TABLE>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< /TABLE>

де крапками позначений вміст кожної комірки.

Приклад таблиці:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Примітка: В даному прикладі створена таблиця з фіксованою шириною (WIDTH=" 200" пікселів), але краще використовувати проценти, т.я. в цьому випадку розмір таблиці буде змінюватися в залежності від розміру вікна.

Така таблиця реалізується наступним кодом: < TABLE BORDER=" 2" WIDTH=" 200" BGCOLOR=" #00FF00" > < TR> < TD> Ячейка 1< /TD> < TD> Ячейка 2< /TD> < /TR> < TR> < TD> Ячейка 3< /TD> < TD> Ячейка 4< /TD> < /TR> < /TABLE>

Таблиця починається тегом < TABLE> и завершується тегом < /TABLE>;.
Тег < TABLE> може включати такі атрибути:

WIDTH=" n" Визначає ширину таблиці в пікселях або процентах, за замовчуванням ширина таблиці визначається вмістом клітинок.
BORDER=" n" Встанаолює товщину рамки. За замовчуанням n=0 – таблиця відображається без рамки.
BORDERCOLOR=" #FFFFFF" Встановлює колір обрамлення, де #FFFFFF (білий) - шістнадцяткове значення кольору.
BGCOLOR=" #FFFFFF" Встановлює колір фону для всієї таблиці, де #FFFFFF - шістнадцяткове значення кольору.
BACKGROUND=" image.gif" Заповнює фон таблиці зображенням.
CELLSPACING=" n" Визначає відстань між рамками клітинок таблиці в пікселях.
ALIGN=LEFT Визначає положення таблиці в документі. За замовчуванням таблиця притиснута до лівого краю сторінки. Допустимі значення аттрибута: LEFT (зліва), CENTER (по центру сторінки), RIGHT (зправа).
FRAME=" значение" Управляє зовнішнім обрамленням таблиці і може приймати такі значення: VOID - обрамлення немає (значення за замовчуванням). ABOVE – межа тільки зверху. BELOW - межа тільки знизу. HSIDES - межа тільки зверху і знизу. VSIDES - межа тільки зліва і справа. LHS - тільки ліва межа. RHS - тільки права межа. BOX - малюються всі чотири сторони. BORDER - також всі чотири сторони.
RULES=" n" Управляє лініями, що розділяють клітинки таблиці. Можливі такі значення (n): NONE – немає ліній (значення за замовчуванням). GROUPS - лінії будуть тільки між групами рядів. ROWS - тільки між рядами. COLS - тільки між колонками. ALL - між всіма рядами і колонками.

Таблиця може включати заголовок, який розміщується між тегами < CAPTION> < /CAPTION>. Він має бути безпосередньо після тега < TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці:

TOP – значення за замовчуванням, заголовок над таблицею по центру.
LEFT - заголовок над таблицею зліва.
RIGHT - заголовок над таблицею справа.
BOTTOM - заголовок під таблицею по центру.

Рядки таблиці починаються тегом < TR> и завершаються тегом < /TR>, а кожна клітинка таблиці починається тегом < TD> и завершується < /TD>. Дані теги можуть мати такі атрибути:

Атрибути, що можуть застосовуватися до рядків і клітинок
ALIGN=LEFT Встановлює горизонтальне вирівнювання тексту в клітинках рядка. Може приймати значення LEFT (вирівнювання вліво), CENTER (вирівнювання по центру), RIGHT (вправо).
VALIGN=CENTER Встановлює вертикальне вирівнювання тексту в клітинках рядка. Допустимі значення: TOP (вирівнювання по верхньому краю), CENTER (вирівнювання по центру -це значення приймається за замовчуванням), BOTTOM (по нижньому краю).
BGCOLOR=" #FFFFFF" Встановлює колір фону рядка або клітинки.
BACKGROUND=" image.gif" Заповнює фон рядка або клітинки зображенням.
Атрибути, що можуть застосовуватися тільки до клітинок
WIDTH=" n" Визначає ширину клітинки в n пікселях.
HEIGHT=" n" Визначає висоту клітинки в n пікселях
COLSPAN=" n" Растягивание ячейки по горизонтали. Например, < TD COLSPAN=" 2" > означает, что ячейка будет растянута на 2 колонки.
ROWSPAN=" n" Розтягує клітинки по рядку. Наприклад, < TD ROWSPAN=" 2" означає, що клітинка буде розтягнута на два рядки таблиці.
NOWRAP Цей атрибут показує, що текст буде розміщено в один рядок
BACKGROUND=" image.gif" Заповнює фон клітинки зображенням

Крім цього, будь яка клітинка таблиці може бути визначена не тегами < TD> < /TD>;, а тегами < TH> < /TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.

Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт & nbsp; (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде (& nbsp; - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).

Теги, що встановлюють шрифт (< B>, < I>, < FONT SIZE=" n", FONT COLOR=" #FFFFFF"), необхідно повторювати для кожної клітинки.

Використання фреймів

Мова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна. Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації сторінками сервера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою мишки на гіперпосиланні – змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими.

Подібну структуру має сторінка, вигляд якої подано на рис. 33

Рис. 33

Код даної сторінки наведено нижче:

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE> < /HEAD>

< frameset cols=" 30%, 70%" >

< frame src=" a1.htm" >

< frame src=" a2.htm" >

< /frameset>

< /BODY>

< /HTML>

Файл a1.htm

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE>

< /HEAD>

< BODY bgcolor=" silver" text=" black" link=" #ff0000" >

< h3> На цій сторінці фреймової структури, як правило,

розміщують зміст Web-сайта< /h3>

< /BODY>

< /HTML>

Файл a2.htm

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE>

< /HEAD>

< BODY bgcolor=" silver" text=" black" link=" #ff0000" >

< h3> На цій сторінці фреймової структури, як правило, розміщують

вміст вибраного у змісті розділу< /h3>

< /BODY>

< /HTML>







Дата добавления: 2014-11-10; просмотров: 1678. Нарушение авторских прав; Мы поможем в написании вашей работы!



Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...

Логические цифровые микросхемы Более сложные элементы цифровой схемотехники (триггеры, мультиплексоры, декодеры и т.д.) не имеют...

Субъективные признаки контрабанды огнестрельного оружия или его основных частей   Переходя к рассмотрению субъективной стороны контрабанды, остановимся на теоретическом понятии субъективной стороны состава преступления...

ЛЕЧЕБНО-ПРОФИЛАКТИЧЕСКОЙ ПОМОЩИ НАСЕЛЕНИЮ В УСЛОВИЯХ ОМС 001. Основными путями развития поликлинической помощи взрослому населению в новых экономических условиях являются все...

МЕТОДИКА ИЗУЧЕНИЯ МОРФЕМНОГО СОСТАВА СЛОВА В НАЧАЛЬНЫХ КЛАССАХ В практике речевого общения широко известен следующий факт: как взрослые...

Характерные черты официально-делового стиля Наиболее характерными чертами официально-делового стиля являются: • лаконичность...

Этапы и алгоритм решения педагогической задачи Технология решения педагогической задачи, так же как и любая другая педагогическая технология должна соответствовать критериям концептуальности, системности, эффективности и воспроизводимости...

Понятие и структура педагогической техники Педагогическая техника представляет собой важнейший инструмент педагогической технологии, поскольку обеспечивает учителю и воспитателю возможность добиться гармонии между содержанием профессиональной деятельности и ее внешним проявлением...

Studopedia.info - Студопедия - 2014-2024 год . (0.008 сек.) русская версия | украинская версия