Лекція #03. Списки, зображення, таблиці
TRANSCRIPT
СПИСКИ. ТАБЛИЦІ. ЗОБРАЖЕННЯЛекція # 03
* Я бачив майбутнє. Воно у моєму браузері.
СПИСКИ :Поділяються на
Нумеровані <ol> (ordered list)
Марковані <ul> (unordered list)
МАРКОВАНИЙ СПИСОК<ul> <!--unordered list-->
<li> </перший рівень li>
<!--list item-->
<ul>
<li> </другий уровень li>
<li> другий </уровень li>
</ul>
<li>перший рівень</li>
</ul>
перший рівень другий рівень другий рівень
перший рівень
НУМЕРОВАНИЙ СПИСОК<ol> <!--unordered list-->
<li> </перший рівень li>
<!--list item-->
<ol>
<li> </другий уровень li>
<li> другий </уровень li>
</ol>
<li>перший рівень</li>
</ol>
1. перший рівень1. другий рівень2. другий рівень
2. перший рівень
ВСТАВКА ЗОБРАЖЕНЬ<img width="100" height="200" src="cat.png"
alt=" ">котик
• атрибутиwidth, height — ширина або висота задається у пікселях
• атрибут src — url зображення
• атрибут alt — , альтернативний текст який, виводиться якщо зображення не
завантажилось
ТАБЛИЦІ
ТИПИ КОМІРОК :В таблицях можна використовувати два типи комірок
<td> - ( )комірки даних використовуються для вставки значень комірок <th> - ( )комірки заголовків використовуються для створення заголовків стовпців таблиць
<tr>
<th> , ’Прізвище ім я</th> <th>Оцінка</th>
</tr>
<tr>
<td> Бомок Наталія</td> <td>Відмінно (5)</td>
</tr>
<tr>
<td> ТрипалюкЛюдмила</td> <td>Добре (4)</td>
</tr>
СТРУКТУРА ТАБЛИЦІ<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> визначають стовпці ( використовуються для заданняширини стопців)
ОБ’ЄДНАННЯ КОМІРОК<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>
ОБ’ЄДНАННЯ КОМІРОК<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]
ВКЛАДЕНІ ТАБЛИЦІ Комірки таблиць <td> можуть містити вкладені таблиці
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
НАЗВА ТАБЛИЦІ<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>
