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>
- вовк
- лось
- олень
Тип маркера та нумерацію можна змінити за допомогою атрибута type
:
<ol type="A">
<li>вовк</li>
<li>лось</li>
<li>олень</li>
</ol>
- вовк
- лось
- олень
Таблиці
Ми створюємо таблицю за допомогою тега <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>
вовк | пес | |
лось | олень |