2. 9
Розмітка таблиць мовою HTMLРозділ 6
§ 23
На сайтах розміщують велику кількість:
Текстів Чисел Меню
Зображень
тощо
Для розміщення об'єктів на html-сторінці її
розмічають як таблицю.
3. 9
Теги розмітки таблиціРозділ 6
§ 23
Основні теги розмітки таблиці:
ПризначенняТеги
Задають таблицю<table>…</table>
Обмежують рядок таблиці<tr>…</tr>
Обмежують комірку таблиці<td>…</td>
Задають напівжирний шрифт і
вирівнювання тексту по центру.
Використовують замість тегу
<td>...</td> для виокремлення
заголовків
<th>…</th>
4. 9
Теги розмітки таблиціРозділ 6
§ 23
У вікні текстового редактора У вікні браузера
<table border=2>
<tr>
<td> 1-й рядок <br> 1-й стовпець </td>
<td> 1-й рядок <br> 2-й стовпець </td>
<td> 1-й рядок <br> 3-й стовпець </td>
</tr>
<tr>
<td> 2-й рядок <br> 1-й стовпець </td>
<td> 2-й рядок <br> 2-й стовпець </td>
<td> 2-й рядок <br> 3-й стовпець </td>
</tr>
</table>
5. 9
Атрибути тегівРозділ 6
§ 23
Вигляд таблиці й комірок визначається атрибутами тегів:
ПризначенняАтрибут
Вирівнювання таблиці у вікні (center, left,
right)
Align
Установка фонового малюнкаbackground
Установка фонового кольоруbgcolor
Товщина рамки в пікселяхborder
Колір рамкиbordercolor
Відстань між комірками таблиціcellspacing
6. 9
Атрибути тегівРозділ 6
§ 23
Продовження…
ПризначенняАтрибут
Відстань між текстом комірки та її межеюcellpadding
Відображення рамок таблиці (all — усі,
cols — лише вертикальні, rows — лише
горизонтальні, none — без рамок, groups —
рамки між групами thead, tbody, tfoot)
rules
Спливаюча підказкаtitle
Ширина таблиці у відсотках або пікселяхwidth
Висота таблиці у відсотках або пікселяхheight
7. 9
Атрибути тегівРозділ 6
§ 23
Якщо в усіх рядках ширина комірок (атрибут
width) однакова, то її достатньо вказати лише для
одного рядка.
<table width=100%>
<td width=50%> —
Ширина таблиці дорівнює ширині робочого поля вікна
браузера;
Ширина комірки дорівнює половині ширини таблиці.
8. 9
ВідступиРозділ 6
§ 23
Для налаштування відстаней між комірками і між
текстом та межами комірок використовують атрибути
відступів.
<table cellspacing=10 cellpadding=10 bgcolor=blue>
<trbgcolor=white>
<td width=100>1</td>
<td width=100>2</td>
</tr>
</table>
9. 9
Форматування вмісту комірокРозділ 6
§ 23
Теги:
Рядків Комірок
<tr> <td>
Можуть включати атрибути для зміни вирівнювання
тексту відносно меж комірки. Атрибут align дозволяє
задавати горизонтальне вирівнювання тексту:
align=left align=center align=right
за лівим краєм по центру комірки за правим краєм
10. 9
Форматування вмісту комірокРозділ 6
§ 23
Вирівнювання по вертикалі виконується за
допомогою атрибута:
valign=middle valign=top valign= bottom
Посередині
комірки
Зверху комірки
Знизу комірки
11. 9
Форматування вмісту комірокРозділ 6
§ 23
Розглянемо приклад застосування тегів вирівнювання
тексту в комірках.
У вікні текстового редактора У вікні браузера
<table border=2 width=60%>
<tr height=100 align=center>
<td valign=top> 1-й рядок <br> 1-й стовпець </td>
<td valign=middle> 1-й рядок <br> 2-й стовпець </td>
<td valign=bottom> 1-й рядок <br> 3-й стовпець </td>
</tr>
<tr>
<td align=left> 2-й рядок <br> 1-й стовпець </td>
<td align=center> 2-й рядок <br> 2-й стовпець </td>
<td align=right> 2-й рядок <br> 3-й стовпець </td>
</tr>
</table>
12. 9
Злиття комірокРозділ 6
§ 23
Під час розмітки таблиці часто необхідно об'єднати
кілька комірок у стовпці чи рядку. Для цього
використовують атрибути:
colspan rowspan
злиття
комірок
у рядку
злиття
комірок у
стовпці
13. 9
Злиття комірокРозділ 6
§ 23
Розглянемо приклад типів об'єднання комірок у рядку
У вікні текстового редактора У вікні браузера
<table border="1">
<tr>
<td colspan="2"> Привіт! </td>
</tr>
<tr>
<td> Петре,</td>
<td> Марійко!</td>
</tr>
</table>
14. 9
Злиття комірокРозділ 6
§ 23
Розглянемо приклад типів об'єднання комірок у стовпці
У вікні текстового редактора У вікні браузера
<table border="1">
<tr>
<td rowspan="2"> Привіт!
</td>
<td> Петре,</td>
</tr>
<tr>
<td> Марійко!</td>
</tr>
</table>
15. 9
Питання для самоперевіркиРозділ 6
§ 23
1. Як вставити таблицю на веб-сторінку?
2. Як вирівняти таблицю по центру вікна браузера?
3. Як вирівняти текст у комірці таблиці по горизонталі?
4. Як вирівняти текст у комірці таблиці по вертикалі?
5. Як встановити відступ від тексту в комірці до її меж?
6. Як об'єднати комірки одного рядка або
стовпця таблиці?
