Веб-сторінки можуть містити різні об’єкти: тексти, меню, зображення тощо. Для впорядкування об’єктів на веб-сторінці її (всю або частину) розмічають як таблицю.
Теги розмітки таблиці
Ознайомимося з основними тегами розмітки таблиці.
Розглянемо розмітку таблиці відповідними тегами (рис. 23.1):
Атрибути тегів розмітки таблиці
Ви знаєте, що теги можуть містити атрибути. Атрибути в тегах розмітки таблиці впливають на вигляд таблиці, клітинок і написів у них:
|
Атрибут |
Призначення |
Атрибут |
Призначення |
|
align |
Вирівнювання таблиці у вікні |
cellpadding |
Відстань між текстом клітинки та її' межею |
|
background |
Фоновий малюнок |
rules |
Відображення рамок таблиці |
|
bgcolor |
Колір тла |
title |
Спливна підказка |
|
border |
Товщина рамки в пікселях |
width |
Ширина таблиці (клітинки) |
|
bordercolor |
Колір рамки |
у відсотках або пікселях |
|
|
cellspacing |
Відстань між клітинками таблиці |
height |
Висота таблиці (клітинки) у відсотках або пікселях |
Якщо в усіх рядках ширина клітинок (атрибут width) однакова, то її достатньо вказати лише для одного рядка.
<table width="100%"> — ширина таблиці дорівнює ширині робочого поля вікна браузера;
<td width="50%"> — ширина клітинки дорівнює половині ширини таблиці.
Відступи
Для налаштування відстаней між клітинками та між текстом і межами клітинок у тегу таблиці використовують атрибути відступів (рис. 23.2):
Форматування вмісту клітинок
Теги рядків (<tr>) і клітинок (<td>) можуть включати атрибути для зміни вирівнювання тексту відносно меж клітинки. Атрибут align дозволяє задавати горизонтальне вирівнювання тексту: align-'left" — за лівим краєм, align-'center" — по центру клітинки, align-'right'' — за правим краєм.
Вирівнювання по вертикалі виконується за допомогою атрибута valign-'middle" (top, bottom) — посередині клітинки (уверху, унизу).
Розглянемо способи вирівнювання тексту в клітинках (рис. 23.3):
Злиття клітинок
Під час розмітки таблиці часто буває необхідно об’єднати кілька клітинок. Для цього використовують атрибути colspan (злиття клітинок у рядку) (рис. 23.4, а) і rowspan (злиття клітинок у стовпці) (рис. 23.4, б):
Питання для самоперевірки
1. Як вставити таблицю на веб-сторінку?
2. Як вирівняти текст у клітинці таблиці по горизонталі; по вертикалі?
3. Як встановити відступ від тексту в клітинці до її меж?
4. Як об’єднати клітинки одного рядка або стовпця таблиці?
Вправа 23
Створити таблицю за зразком (рис. 1).
1) Відкрийте редактор Блокнот та створіть Мті-документ для відображення таблиці (рис. 2).
2) Змініть ^ті-код, об’єднавши клітинки за зразком, і заповніть їх, як показано на рис. 3.
3) Задайте розміри таблиці в пікселях: ширина — 400, висота — 200.
4) Установіть параметри клітинок у відсотках від розміру таблиці: висота верхнього рядка — 35 %, ширина другого і третього стовпців — 60 % і 20 % відповідно.
5) Вирівняйте текст за зразком (див. рис. 1).
6) Збережіть документ з іменем Вправа 23.html.
Завершіть роботу за комп’ютером.
Комп'ютерне тестування
Виконайте тестове завдання 23 із автоматичною перевіркою на сайті «Інтерактивне навчання».
Це матеріал з підручника Інформатика 9 клас Бондаренко