Блоґ одного кібера

Історія хвороби контуженого інформаційним вибухом

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

with 4 comments

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

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

Списки

Списки в 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>. І не тільки тому, що так коротше. А і тому, що потім можна буде застосувати до заголовків таблиці окремі стилі.

Деякі браузери не відображають порожні клітинки (тобто не обводять їх рамкою). Можете подивитись що робить ваш, в попередньому прикладі верхня ліва клітинка порожня. Щоб обдурити браузер, і змусити його відображати клітинку так ніби там щось є, ми можемо покласти туди невидимий символ – &nbsp;. Це символ незламного пропуску 🙂 (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

Written by bunyk

Лютий 1, 2009 at 13:23

Оприлюднено в Кодерство, Павутина, Розмітка

Tagged with

Відповідей: 4

Subscribe to comments with RSS.

  1. Приміткa до статті.
    В темі про таблиці – в кутику одної з таблиць у тебе є пусте поле. Ти зробив так – <tr><td></td>, а це неправильно, оскільки не у всіх відобразиться красиво. Треба писати <tr><td>&nbsp;</td>

    danbst4

    Лютий 12, 2009 at 11:38

  2. Не варто придиратись. Це зроблено навмисне:

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

    bunyk

    Лютий 12, 2009 at 15:09

  3. ясно, недочитав (((

    до речі, ось таблиці з допомогою div:
    http://www.alistapart.com/articles/holygrail – стаття
    http://www.alistapart.com/d/holygrail/example_1.html – приклад

    danbst4

    Лютий 15, 2009 at 11:57

  4. А я w3cschools не дочитав 😦

    А от як робляться такі таблиці давно хотів знати. Правда увага зараз переключилася на архітектуру, і історію. Все таки як не як, я це діло з дитинства люблю. А тут таке свято :).
    Але думаю час знайдеться.

    bunyk

    Лютий 15, 2009 at 14:32


Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: