HTML: таблиці та списки

Списки

Невпорядковані списки створюються за допомогою тега пари <ul> (unordered list (невпорядкований список)). Ми позначаємо окремі елементи списку тегом <li> (list item (елемент списку)):

<ul>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ul>
  • вовк
  • лось
  • олень

Впорядковані списки створюються за допомогою тега пари <ol> (ordered list (упорядкований список)). Ми знову позначаємо окремі елементи тегом <li>:

<ol>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>
  1. вовк
  2. лось
  3. олень

Тип маркера та нумерацію можна змінити за допомогою атрибута type:

<ol type="A">

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>
  1. вовк
  2. лось
  3. олень

Таблиці

Ми створюємо таблицю за допомогою тега <table>, її рядки за допомогою <tr> (table row (рядок таблиці)), клітинки за допомогою <td> (table data (дані таблиці)):

<table>

<tr><td>пес</td><td>вовк</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>
пес вовк
лось олень

Щоб виділити текст у заголовку, ми використовуємо <th> замість <td>:

<table>

<tr><th>Тварина</th><th>Зріст</th></tr>

<tr><td>лось</td><td>180 cм</td></tr>

<tr><td>олень</td><td>120 cм</td></tr>

</table>
Тварина Зріст
лось 180 cм
олень 120 cм

Типовий вигляд вихідних таблиць є зазвичай без ліній, що розділяють окремі клітинки. Зовнішній вигляд таблиці можна змінити за допомогою каскадних стилів (CSS).

Об’єднання клітинок

Клітинки можна об’єднати за допомогою атрибутів rowspan і colspan. Значення атрибута вказує, скільки рядків або стовпців ми об’єднуємо.

<table>

<tr><td rowspan=2>вовк</td><td colspan=2>пес</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>
вовк пес
лось олень
Підсумок мені допоміг
Підсумок мені не допоміг
Підсумок приховано.

Вибір

Швидке практикування шляхом вибору з двох варіантів.


HTML: таблиці та списки  
Переглянути пояснення теми


ЗВ’ЯЖІТЬСЯ З НАМИ

Дякуємо за ваше повідомлення, його було успішно відправлено.

Напишіть нам

Вам потрібна допомога?

Будь ласка, спочатку ознайомтеся з поширеними запитаннями:

Про що йдеться у повідомленні?

Повідомлення Зміст Управління Вхід до системи Ліцензія