Лекція #03. Списки, зображення, таблиці

СПИСКИ. ТАБЛИЦІ. ЗОБРАЖЕННЯЛекція # 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>