1 of 21

Розмічання таблиць�засобами HTML

Нова українська школа

Урок 13

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

2 of 21

Теги розмітки таблиці

Ознайомімося з основними тегами розмітки таблиці:

Призначення

Теги

Обмежують таблицю

Обмежують рядок таблиці

Обмежують клітинку таблиці

Використовують замість тегу <td>…</td> для виокремлення заголовків стовпців таблиці

Розділ 2

§ 11

3 of 21

Теги розмітки таблиці

Фрагмент HTML-коду

Вигляд у вікні браузера

<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>

Розділ 2

§ 11

4 of 21

Теги розмітки таблиці

За допомогою атрибутів у тегах розмітки таблиці змінюють вигляд таблиці, клітинок і написів у них:

Призначення

Атрибут

Вирівнювання таблиці у вікні браузера

Align

Малюнок на тлі

background

Колі тла

bgcolor

Товщина рамки в пікселях

border

Колір рамки

bordercolor

Розділ 2

§ 11

5 of 21

Теги розмітки таблиці

Продовження…

Призначення

Атрибут

Відстань між текстом клітинки та її межею

cellpadding

Ширина таблиці (клітинки) у відсотках або пікселях

width

Висота таблиці (клітинки) у відсотках або пікселях

height

Відстань між клітинками таблиці

cellspacing

Розділ 2

§ 11

6 of 21

Ознайомтесь з цікавою інформацією

1989 року британський учений Тім Бернерс-Лі представив інформаційну систему на основі гіпертексту. А 1993 року він та Деніел Коннолі опублікували першу версію HTML.

Тім Бернерс-Лі

Розділ 2

§ 11

7 of 21

Теги розмітки таблиці

Оскільки ширина клітинок одного стовпця не може бути різною в різних рядках, то її достатньо вказати лише для одного рядка.

Ширина таблиці дорівнює ширині робочого поля вікна браузера;

Ширина клітинки дорівнює половині ширини таблиці.

Розділ 2

§ 11

8 of 21

Теги розмітки таблиці

Якщо в різних рядках таблиці все ж задати для одного стовпця різну ширину, то використано буде більше зі значень. Значеннями, які суперечать одне одному, буде знехтувано.

Розділ 2

§ 11

9 of 21

Відступи

Для налаштування відстаней між клітинками, а також між текстом і межами використовують атрибути відступів:

<trbgcolor="white">

</tr>

</table>

Розділ 2

§ 11

10 of 21

Форматування вмісту клітинок

Теги:

Рядків

Клітинок

<tr>

<td>

Можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки. Атрибут align задає горизонтальне вирівнювання:

аlign = "left"

align = "center"

align = "right"

за лівим краєм

по центру клітинки

за правим краєм

Розділ 2

§ 11

11 of 21

Форматування вмісту клітинок

Атрибут valign задає вертикальне вирівнювання:

valign = "middle"

valign = "top"

valign = "bottom"

Посередині клітинки

Вгорі клітинки

Внизу клітинки

Розділ 2

§ 11

12 of 21

Форматування вмісту клітинок

Різні варіанти вирівнювання тексту в клітинках

Фрагмент HTML-коду

У вікні браузера

<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>

Розділ 2

§ 11

13 of 21

Форматування вмісту клітинок

Іноді при розмічанні таблиці виникає потреба об’єднати кілька клітинок. Для цього використовують атрибути:

colspan

rowspan

злиття клітинок у рядку

злиття клітинок у стовпці

Розділ 2

§ 11

14 of 21

Форматування вмісту клітинок

Розглянемо приклад типів об'єднання комірок у рядку

У вікні текстового редактора

У вікні браузера

<tr>

<td colspan="2"> Привіт! </td>

</tr>

<tr>

<td> Петре,</td>

<td> Марійко!</td>

</tr>

</table>

Розділ 2

§ 11

15 of 21

Форматування вмісту клітинок

Розглянемо приклад типів об'єднання комірок у стовпці

У вікні текстового редактора

У вікні браузера

<tr>

<td rowspan="2"> Привіт! </td>

<td> Петре,</td>

</tr>

<tr>

<td> Марійко!</td>

</tr>

</table>

Розділ 2

§ 11

16 of 21

Форматування вмісту клітинок

За допомогою HTML-таблиці можна створити макет вебсторінки, об’єднавши певні клітинки й розмістивши в них текст та об’єкти.

Але зараз частіше застосовують теги структурування документа і CSS (від англ. Cascading Style Sheets) — каскадні таблиці стилів.

Розділ 2

§ 11

17 of 21

Питання для самоперевірки

Як додати таблицю на вебсторінку?

Як вирівняти текст у клітинці таблиці по горизонталі?

Як вирівняти текст у клітинці таблиці по вертикалі?

Як установити товщину меж таблиці?

Як установити відступ від тексту в клітинці до її меж?

Як об’єднати клітинки одного рядка або стовпця таблиці?

Розділ 2

§ 11

18 of 21

Розгадайте ребус

Таблиця

Розділ 2

§ 11

19 of 21

Домашнє завдання

Проаналізувати

с. 60-64

Розділ 2

§ 11

20 of 21

Працюємо за комп’ютером

Сторінка

64

Розділ 2

§ 11

21 of 21

Успіхів�у навчанні!

Нова українська школа

Урок 13

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.