Інформація про новину
  • Переглядів: 36
  • Дата: 12-10-2021, 12:21
12-10-2021, 12:21

21. Таблиці на вебсторінках

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





Попередня сторінка:  20. Поняття про мову розмітки гіпертекс...
Наступна сторінка:   22. Аркуші каскадних стилів

Як за допомогою таблиць керувати розміщенням об'єктів на вебсторінках?

Таблиці — це один із найпоширеніших способів подання інформації. їх використовують у найрізноманітніших програмах. Зокрема, ви створювали таблиці в текстовому процесорі і в презентаціях, а також працювали у табличному процесорі — програмі, що спеціально призначена для роботи з електронними таблицями. Не обійтися без таблиць і у вебдизайні: вони є майже на кожній вебсторінці. Навіть якщо на певному сайті ви не бачите жодної таблиці, то, цілком імовірно, там є таблиці з невидимими межами, за допомогою яких визначають точне місцерозташування об'єктів.

Завдання № 1

Розглянь приклади двох вебсторінок із таблицями та їх HTML-код.

Спробуй відповісти на запитання.

1) Який тег використовують для створення таблиці?

2) Для чого призначено парні теги <tr>...</tr> та <td>...</td>?

3) Як розмістити тексту клітинці?

4) Що задає значення атрибута border?

5) Для чого призначено атрибут bordercolor?

Завдання №2

Створи вебсторінку, що містить таблицю з двома рядками, двома стовпцями та товстою межею червоного кольору. У клітинки таблиці введи будь-який текст.

Завдання № З

Розглянь приклади двох вебсторінок із таблицями та їх HTML-код.

Спробуй відповісти на запитання.

1) Який атрибут визначає колір заливки клітинки?

2) Який атрибут відповідає за вирівнювання тексту в клітинці?

3) Як впливає на текст у клітинці застосування тегів <th>...</th> порівняно з тегами <td>...</td>?

4) Для чого призначено атрибут width у тегу <table>?

5) Значення атрибута width може вимірюватися в одиницях рх (приклад 1), а може у відсотках (приклад 2). Що таке рх? Від чого беруться відсотки?

Завдання №4

Створи вебсторінку з таблицею, що містить 8 клітинок. У першій запиши заголовок «Веселка», а решту 7 залий своїми улюбленими кольорами. Текстом у клітинках зроби назви цих кольорів. Текст має бути вирівняний по центру клітинок і в темних клітинках відображатися світлим кольором.

Назви та шістнадцяткові коди основних кольорів можеш знайти в рубриці «Запитання-відповіді».

Завдання № 5

У наведених нижче таблицях міститься інформація про оцінки, що відповідають високому рівню знань в українських школах. У HTML-кодах цих таблиць є лише одна відмінність. Знайди її і спробуй пояснити:

1) Для чого призначено атрибут rowspan?

2) Кожна із цих таблиць містить по 4 рядки. З яких клітинок складається кожен із 4 рядків таблиці?

Завдання № 6

Як і в попередньому завданні, у наведених нижче таблицях міститься інформація про оцінки, що відповідають високому рівню знань в українських школах. Однак ці таблиці розташовані «по горизонталі». HTML-код таблиці, зображеної справа, відрізняється наявністю атрибутів width і colspan. Спробуй дати відповіді на запитання.

1) Для чого призначено атрибут colspan і що визначає його значення?

2) Що визначає атрибут width у тегу <td>?

3) Якщо значення атрибута width у тегу <td> вимірюється у відсотках, то від якої величини беруться ці відсотки?

Завдання №7

Створи вебсторінки з таблицями, зображеними в завданнях 5 і б внизу. Доповни ці таблиці інформацією про оцінювання достатнього (7, 8 і 9), середнього (4, 5 і б) та низького (1, 2 і 3) рівнів знань. Застосуй такі самі об'єднання клітинок, як і для високого рівня знань. Ширину «горизонтальної» таблиці зроби 250рх, а кожна з клітинок із текстом «Рівень знань», «Низький», «Середній», «Достатній» та «Високий» має займати 1/5 ширини таблиці.

Завдання № 8

Продовж створювати вебсторінку з інформацією про себе, розпочату під час вивчення попереднього розділу. Додай до вебсторінки таблицю наведеної на зразку структури, у якій подай інформацію про свої улюблені книжки, акторів, фільми тощо. Розфарбуй кожну категорію окремим кольором, а назви стовпців таблиці зроби жирними та вирівняй по центру.

Назви вподобань зроби посиланнями на сторінки в Інтернеті, що містять інформацію про цих людей чи об'єкти.

ЗАПИТАННЯ-ВІДПОВІДІ

Які теги ми сьогодні вивчили?

Тег

Призначення

Створення таблиці. Теги, що описують клітинки таблиці, мають розміщуватися всередині цього тегу

Рядок таблиці. Усередині цього тегу записують теги клітинок

Клітинка таблиці. У тегу розміщують текст, що відображатиметься в клітинці

Клітинка заголовка таблиці. Текст у такій клітинці виділяється жирним і розміщується по центру клітинки

Які атрибути ми сьогодні вивчили?

Атрибут

Призначення

Товщина рамки таблиці

Заливка клітинки, рядка чи таблиці

Колір меж таблиці

Ширина клітинки чи таблиці. Вимірюється в піксе-лях (рх) або у відсотках (%)

Спосіб вирівнювання тексту в клітинці: left — за лівим краєм, right — за правим краєм, center — по центру, justified — розтягування по всій ширині

Об'єднання клітинок одного стовпця. Значенням цього атрибута є кількість клітинок, що об'єднуються

Об'єднання клітинок одного рядка. Значенням цього атрибута є кількість клітинок, що об'єднуються

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

1. Запиши пару тегів <table>...</table>. Це відкривний і закривний теги таблиці.

2. Для кожного рядка таблиці запиши пару тегів <tr>...</tr>.

3. Для кожної клітинки створи пару тегів <td>...</td>. Між цими тега-ми запиши текст, що відображатиметься в клітинці, або теги для вставлення інших об'єктів.

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

Горизонтальне вирівнювання тексту задають за допомогою атрибута align, а вертикальне — valign. Ці атрибути застосовні до тегів <tr> і <td>.

Як задати розміри таблиці та її частин?

Ширину таблиці та її стовпців задають за допомогою атрибута width втегах <table> та <td>. Утегу <table> визначають ширину всієї таблиці, а в тегу <td> — стовпця, у якому розташована клітинка, що описується цим тегом.

Значення атрибута width визначають або в пікселях, наприклад width=200px, або у відсотках, наприклад 50 %. У другому випадку відсотки обчислюються відносно розмірів контейнера — об'єкта, який містить поточний об'єкт. Для таблиці контейнером найчастіше є вся веб-сторінка, а для клітинки — таблиця.

Наприклад, наведений нижче HTML-код створює таблицю, що займає 80 % ширини сторінки, а ширина клітинки 1 у цій таблиці становить 70 % від ширини всієї таблиці.

У HTML не існує прямих засобів визначення висоти рядка таблиці.

Вона визначається автоматично за розмірами об'єктів, що розташовані в клітинках рядка. Якщо ви хочете розтягнути рядок по висоті «штучно», то можете додати в якусь із його клітинок одну чи кілька конструкцій <p>&nbsp;</p>, де літерами &nbsp; позначається невидимий символ «нерозривний пробіл».

Як об'єднати клітинки таблиці?

Кілька суміжних клітинок в одному рядку таблиці можна об'єднати, використовуючи атрибут colspan тегу <td>, а в одному стовпці — за допомогою атрибута rowspan. Значеннями цих атрибутів є кількість клітинок, що об'єднуються.

Якщо клітинки об'єднують за допомогою атрибута rowspan, то межі рядків можуть вийти нерівними і різні рядки можуть містити різну кількість клітинок. Щоб зрозуміти, яка клітинка якому рядку належить, головне — пам'ятати, що рядки описують зверху вниз, а клітинки в кожному рядку — зліва направо.

Нижче наведено приклад таблиці та відповідний HTML-код. Цифрами позначено номери рядків, яким належать клітинки. Рядки зафарбовано різними кольорами.

Як задавати кольори елементів таблиці?

• Колір заливки задають за допомогою атрибута bgcolor.

• Колір меж задають за допомогою атрибута bordercolor.

Ці атрибути можна застосовувати до всієї таблиці (у тегу <table>), до рядка (у тегу <tr>) або до клітинки (у тегу <td>).

Якщо значення цих атрибутів не визначати, то застосовуватимуться стандартні значення — білий колір заливки та чорний колір меж. Щоб визначити колір тексту, треба задати значення атрибута color тегу <font>.

Як називаються основні кольори в HTML?

16 основних кольорів, разом з їх назвами та шістнадцятковими кодами, наведено в таблиці.

Перед шістнадцятковим кодом кольору завжди записують символ #.

ПЕРЕВІР СЕБЕ

1. Поясни, для чого призначені перелічені нижче теги та атрибути.

2. Якщо в тегу <table> присвоїти значення 0 атрибуту border, то межі таблиці стануть невидимими, однак конфігурація клітинок таблиці збережеться. На цьому базується один зі способів розміщення об'єктів у довільних місцях вебсторінки: створити таблицю з невидимими межами і розмістити об'єкти в її клітинках. Звичайно, потрібно дібрати правильний порядок об'єднання клітинок, а також спосіб горизонтального та вертикального вирівнювання їх вмісту.

3. Проаналізуй вебсторінкуз найбільш відомими автопортретами Т. Г. Шевченка, розміщеними в клітинках таблиці з невидимими межами. Спробуй визначити та намалювати на аркуші конфігурацію меж цієї таблиці.

4. Додай до створеної на попередньому уроці вебсторінки з інформацією про себе заголовок «Моїулюблені виконавці» (або письменники, артисти, спортсмени тощо). Додай під цим заголовком таблицю такої самої конфігурації, яку було визначено у завданні на аналіз, та розмісти в ній зображення й текст, що стосуються твоїх улюблених письменників, виконавців, артистів тощо. Щоб задати розміри конкретного зображення, можна використати атрибути width і height у тегу <img>.

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

 

Це матеріал з підручника Інформатика 8 клас Коршунова (2021)

 



Попередня сторінка:  20. Поняття про мову розмітки гіпертекс...
Наступна сторінка:   22. Аркуші каскадних стилів



^