📖
Списки та таблиці
Впорядкований, невпорядкований список і базові таблиці
Невпорядкований список <ul>
Показує пункти з крапками (або іконками через CSS). Використовуй коли порядок елементів неважливий.
html
<ul>
<li>Яблуко</li>
<li>Банан</li>
<li>Вишня</li>
</ul>Впорядкований список <ol>
Показує пункти з цифрами. Коли порядок важливий — кроки інструкції, рейтинг.
html
<ol>
<li>Відкрий термінал</li>
<li>Встанови Node.js</li>
<li>Запусти npm install</li>
</ol><li> — це list item, елемент списку. Він завжди всередині <ul> або <ol>.
Таблиці
Таблиця будується з кількох тегів:
html
<table>
<thead> <!-- шапка таблиці -->
<tr> <!-- рядок (table row) -->
<th>Ім'я</th> <!-- заголовок колонки -->
<th>Вік</th>
<th>Місто</th>
</tr>
</thead>
<tbody> <!-- тіло таблиці -->
<tr>
<td>Іван</td> <!-- комірка (table data) -->
<td>25</td>
<td>Київ</td>
</tr>
<tr>
<td>Марія</td>
<td>22</td>
<td>Харків</td>
</tr>
</tbody>
</table>Важливо: таблиці — для табличних даних (як Excel). НЕ використовуй їх для макету сторінки (для цього є Flexbox і Grid).
html
💬
Навігаційне меню — класичний приклад де список (ul/li) найкраще підходить.