
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>
Закрити