 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Створення списків, таблиць
Для створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:
| <OL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </OL> | 1. Один 2. Два 3. Три 4. Чотири 5. П’ять |
Тег <OL> може мати такі параметри:
TYPE - вид лічильника:
A - великі латинські букви
a - малі латинські букви
I - великі римські цифри
i - малі римські цифри
1 – звичайні цифри
START - встановлює число, з якого буде починатися відлік, наприклад:
| <OL TYPE="I" START="8"> <LI> Вісім <LI> Дев’ять <LI> Десять <LI> Одинадцать <LI> Дванадцать </OL> | VIII. Вісім IX. Дев’ять X. Десять XI. Одинадцать XII. Дванадцать |
Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:
| <UL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </UL> | oОдин oДва oТри oЧотири oП’ять |
Тег <UL> може включати параметр TYPE із значеннями disc, circle, square
| <UL TYPE=disc><LI> disc </UL> | · disc |
| <UL TYPE=circle><LI> circle </UL> | o circle |
| <UL TYPE=square><LI> square </UL> | § square |
Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто disc.
Списки визначень мають такий вид:
| <DL> <DT> Термін <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну </DL> | Термін Визначення терміну Визначення терміну Визначення терміну Визначення терміну |
Таблиці у 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>
де крапками позначений вміст кожної комірки.
Приклад таблиці:
Примітка: В даному прикладі створена таблиця з фіксованою шириною (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> може включати такі атрибути:
Таблиця 2.2.1.
| 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>. Дані теги можуть мати такі атрибути:
Таблиця 2.2.2.
| Атрибути, що можуть застосовуватися до рядків і клітинок | |
| 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 (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.
Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде ( - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).
Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.
Поиск по сайту: