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>

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

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

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

<table>

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

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

</table>