Робота зі списками, зображеннями й таблицями

1. Лекція # 03

2. * Я бачив майбутнє. Воно у моєму браузері.

3. Поділяються на:
 Нумеровані <ol> (ordered list)
 Марковані <ul> (unordered list)

4. <ul> <!--unordered list-->
<li>перший рівень</li>
<!--list item-->
<ul>
<li>другий уровень</li>
<li> другий уровень</li>
</ul>
<li>перший рівень</li>
</ul>
 перший рівень
 другий рівень
 другий рівень
 перший рівень

5. <ol> <!--unordered list-->
<li>перший рівень</li>
<!--list item-->
<ol>
<li>другий уровень</li>
<li> другий уровень</li>
</ol>
<li>перший рівень</li>
</ol>
1. перший рівень
1. другий рівень
2. другий рівень
2. перший рівень

6. <img width="100" height="200" src="cat.png"
alt="котик">
• атрибути width, height — ширина або висота
задається у пікселях
• атрибут src — url зображення
• атрибут alt — альтернативний текст, який
виводиться, якщо зображення не
завантажилось

8. В таблицях можна використовувати два типи комірок:
 <td> - комірки даних (використовуються для вставки значень комірок)
 <th> - комірки заголовків (використовуються для створення заголовків стовпців
таблиць)
<tr>
<th>Прізвище, ім’я</th> <th>Оцінка</th>
</tr>
<tr>
<td>Бомок Наталія</td> <td>Відмінно (5)</td>
</tr>
<tr>
<td>Трипалюк Людмила</td> <td>Добре (4)</td>
</tr>

9. <table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Стовпець 1</th><th>Стовпець 2</th></tr>
</thead>
<tfoot>
<tr><td>Підсумок 1</td><td> Підсумок 2</td></tr>
</tfoot>
<tbody>
<tr><td>Комірка 1</td><td> Комірка 1.2</td></tr>
</tbody>
</table>
Рядки таблиці утворюються трьома семантичними
секціями: заголовок (header), тіло (body) та підвал (footer)
• <thead> визначає заголовок таблиці і містить елементи
<th>
• <tbody> містить сукупність рядків таблиці, в якій
розміщуються основні дані таблиці
• <tfoot> визначає вміст підвалу (нижньої частини
таблиці) але записується перед тегом <tbody>
• <colgroup> та <col> визначають стовпці
(використовуються для задання ширини стопців)

10. <table>
</table>
<table>
<tr><td rowspan=2></td><td></td><td></td></tr>
<tr> <td></td> <td colspan="2"></td> <td></td> </tr>
<tr><td></td><td></td><td></td></tr>
</table>

11. <table cellspacing="0">
<tr class="1">
<td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td>
</tr>
<tr class="2">
<td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class="3">
<td>Cell[1,3]</td>
<td>Cell[2,3]</td>
</tr>
</table>
Cell[2,3]Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]Cell[1,1]

12. Комірки таблиць <td> можуть містити вкладені таблиці
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>

13. <caption> </caption> - задає заголовок таблиці
<table border="1">
<caption>Список працівників</caption>
<thead>
<tr>
<td>№</td> <td>Прізвище</td> <td>Ім'я</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td>Бобик</td> <td>Надія</td>
</tr>
</tbody>
</table>