Подання інформації структуровано

Попередній розділ
Зміст
Наступний розділ

Ми вже вміємо оформлювати текст в абзаци, заголовки, розділи, сторінки. Але текст може утворювати і складніші структури, які покращують оформлення, і розуміння тексту. Люди більше люблять коли їм показують таблиці і списки, аніж просто набір абзаців (звісно крім художньої літератури). Тому зараз поговоримо про:

Списки

Списки в HTML бувають трьох видів: упорядковані (ordered list) <ol>, невпорядковані (unordered list) <ul>, і списки означень (definition list) <dl>. Елементи двох перших списків задаються тегом <li> (list item). Елементом списку може бути будь-який текст, картинки, абзаци, і навіть інші списки. Наприклад впорядкований список задають так:

<ol>
<li>Раз</li>
<li>Два</li>
<li>Три</li>
</ol>

Список означень складніший, але не набагато. В ньому є два види елементів – термін (dl term) <dt>, де записують термін який будуть означати, і після нього означення (dl definition), в тегах <dd>.

Таблиці

Таблиці зручно задавати за допомогою HTML, бо в HTML можна робити вкладені елементи. Таблиця також складається з вкладених елементів. Таблиця (<table>) складається з рядків (<tr> – table row), кожен з яких також складається з клітинок (<td> – table data). А всередині клітинки може бути вже все що завгодно. Навіть ще одна таблиця. Виглядає це так:

Рядок 1 Стовпець 1	Рядок 1 Стовпець 2	Рядок 1 Стовпець 3
Рядок 2 Стовпець 1	Рядок 2 Стовпець 2	Рядок 2 Стовпець 3
Рядок 3 Стовпець 1	Рядок 3 Стовпець 2	Рядок 3 Стовпець 3

<table border="1">
<tr><td>Рядок 1 Стовпець 1</td><td>Рядок 1 Стовпець 2</td><td>Рядок 1 Стовпець 3</td></tr>
<tr><td>Рядок 2 Стовпець 1</td><td>Рядок 2 Стовпець 2</td><td>Рядок 2 Стовпець 3</td></tr>
<tr><td>Рядок 3 Стовпець 1</td><td>Рядок 3 Стовпець 2</td><td>Рядок 3 Стовпець 3</td></tr>
</table>

По замовчуванню таблиці відображаються без меж :). Тобто межі невидимі. Це іноді корисно, але іноді ми хочемо щоб межі було видно. Для цього задають значення атрибуту border. Він задає товщину меж таблиці. (Правда тільки зовнішніх). Якщо його значення нуль, то межі не відображається.

Інколи треба назвати стовпці, чи рядки, використовують клітинку заголовку. Для цього замість тегу <td> пишуть <th>. Виглядає це так:

	Стовпець 1	Стовпець 2
Рядок 1	Рядок 1 Стовпець 1	Рядок 1 Стовпець 2
Рядок 2	Рядок 2 Стовпець 1	Рядок 2 Стовпець 2

А пишеться отак:

<table border="1">
<tr><td></td><th>Стовпець 1</th><th>Стовпець 2</th></tr>
<tr><th>Рядок 1</th><td>Рядок 1 Стовпець 1</td><td>Рядок 1 Стовпець 2</td></tr>
<tr><th>Рядок 2</th><td>Рядок 2 Стовпець 1</td><td>Рядок 2 Стовпець 2</td></tr>
</table>

Варто зауважити, що такий спосіб кращий аніж писати вміст клітинки в тегах <b> чи <strong>. І не тільки тому, що так коротше. А і тому, що потім можна буде застосувати до заголовків таблиці окремі стилі.

Деякі браузери не відображають порожні клітинки (тобто не обводять їх рамкою). Можете подивитись що робить ваш, в попередньому прикладі верхня ліва клітинка порожня. Щоб обдурити браузер, і змусити його відображати клітинку так ніби там щось є, ми можемо покласти туди невидимий символ –  . Це символ незламного пропуску 🙂 (Non Breakable SPace). Назвали його незламним, того, що слова розділені таким пропуском переносяться на наступний рядок тільки разом.

Клітинки таблиці можна обєднувати. Робиться це за допомогою атрибутів colspan і rowspan тегу <td>. colspan вказує на скільки колонок буде пролягати дана клітинка, а rowspan на скільки рядків. Такий код:

<table border="1">
<tr><td colspan="2">Рядок 1 Стовпець 1 Простягяється на два вправо</td><td>Рядок 1 Стовпець 3</td></tr>
<tr><td>Рядок 2 Стовпець 1</td><td rowspan="3">Рядок 2 Стовпець 2 простягяється на 2 вниз</td><td>Рядок 2 Стовпець 3</td></tr>
<tr><td>Рядок 3 Стовпець 1</td><td>Рядок 3 Стовпець 3</td></tr>
</table>

Дає такий результат:

Рядок 1 Стовпець 1 Простягяється на два вправо		Рядок 1 Стовпець 3
Рядок 2 Стовпець 1	Рядок 2 Стовпець 2 простягяється на 2 вниз	Рядок 2 Стовпець 3
Рядок 3 Стовпець 1		Рядок 3 Стовпець 3

Крім рядків таблиця може мати підпис. Підпис задається тегом <caption>.

Також можна виділити рядки таблиці в групи, з різним функціональним призначенням і призначити їм різні стилі. Ой як мені не терпиться вже дойти до стилів. Але по порядку. Можна виділити заголовочну частину <thead>, основну частину <tbody> і підсумок <tfoot>.

Наступний розділ
Зміст
Попередній розділ

Advertisements