Подання інформації структуровано
Попередній розділ
Зміст
Наступний розділ
Ми вже вміємо оформлювати текст в абзаци, заголовки, розділи, сторінки. Але текст може утворювати і складніші структури, які покращують оформлення, і розуміння тексту. Люди більше люблять коли їм показують таблиці і списки, аніж просто набір абзаців (звісно крім художньої літератури). Тому зараз поговоримо про:
Списки
Списки в 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>
.
Наступний розділ
Зміст
Попередній розділ
Приміткa до статті.
В темі про таблиці – в кутику одної з таблиць у тебе є пусте поле. Ти зробив так – <tr><td></td>, а це неправильно, оскільки не у всіх відобразиться красиво. Треба писати <tr><td> </td>
danbst4
Лютий 12, 2009 at 11:38
Не варто придиратись. Це зроблено навмисне:
bunyk
Лютий 12, 2009 at 15:09
ясно, недочитав (((
до речі, ось таблиці з допомогою div:
http://www.alistapart.com/articles/holygrail – стаття
http://www.alistapart.com/d/holygrail/example_1.html – приклад
danbst4
Лютий 15, 2009 at 11:57
А я w3cschools не дочитав 😦
А от як робляться такі таблиці давно хотів знати. Правда увага зараз переключилася на архітектуру, і історію. Все таки як не як, я це діло з дитинства люблю. А тут таке свято :).
Але думаю час знайдеться.
bunyk
Лютий 15, 2009 at 14:32