mozok.click » Інформатика » Розмітка таблиць засобами мови HTML
Інформація про новину
  • Переглядів: 1095
  • Автор: admin
  • Дата: 14-09-2017, 06:12
14-09-2017, 06:12

Розмітка таблиць засобами мови HTML

Категорія: Інформатика

Веб-сторінки можуть містити різні об’єкти: тексти, меню, зображення тощо. Для впорядкування об’єктів на веб-сторінці її (всю або частину) розмічають як таблицю.

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

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

Розглянемо розмітку таблиці відповідними тегами (рис. 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 клас Бондаренко

 






^