Урок 22.04 для 10-А класу та 27.04 для 10-Б та 10-В класів

Таблиці в HTML

( повторення вивченого)

У найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки.

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

Елемент <table> використовується для того, щоб окреслити межі таблиці та забезпечити контейнер для групи елементів <tr> (table row), що визначають рядки, які в свою чергу складаються з комірок з заголовками <th> (table header) або з даними <td> (table data). Кожна окрема комірка містить дані, при цьому комірки можуть вміщувати все що завгодно - текст, зображення, гіперпосилання тощо.

Тож для створення найпростішої таблиці необхідно використати чотири елементи:

− таблицю описують за допомогою тегів <table>...</table>;

− таблиця повинна мати один або кілька рядків <tr>...</tr>;

− у кожному з рядків може міститися заголовок <th>...</th> або дані <td>...</td>.

Приклад коду для створення таблиці наведено нижче:

Об'єднання комірок таблиці

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

Для об'єднання комірок використовують такі атрибути: colspan (об'єднання по горизонталі, у рядку) і rowspan (по верти-калі, у стовпці) тега <td>. Значеннями цих атрибутів є кількість об'єднуваних стовпців або рядків. Наприклад, colspan="3" означає, що комірка розтягнута на 3 стовпці, a rowspan="2" - що ко-мірка займає 2 рядки. У цьому випадку комірка, місце якої займає «збільшена» комірка, опускається.

Нижче наведений приклад об'єднання комірок по вертикалі:

Нижче наведений приклад об'єднання комірок по горизонталі:

Атрибути елементів таблиці

За замовчуванням ширина таблиці розраховується браузером автоматично згідно зі змістом таблиці. Щоб вказати ширину таблиці вручну використовують атрибут width тега <table>, який може мати значення без одиниць виміру, що буде означати ширину в пікселях, або значення у процентах, що буде розраховуватись як зазначена частка ширини батьківського елемента.

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

Для таблиці можна задавати відступи від змісту до краю комірки за допомогою атрибута cellpadding тега <table>. Значення цього атрибута визначає відстань від межі комірки до її змісту у пікселях і за замовчуванням дорівнює 0.

Відступи між комірками (відстань між межами комірок) за-дається атрибутом cellspacing тега <table>. Значення цього атрибута задається у пікселях і за замовчуванням дорівнює 0.

За замовчуванням межа таблиці та межа комірки є окремими елементами, між якими є невелика відстань. Щоб зовнішні межі комірок утворювали єдину сітку (рис. 2.1), слід використовувати атрибут border-collapse тега <table> зі значенням "collapse". За замовчуванням він має значення "separate".

Зміст у рядках та безпосередньо комірках можна вирівнювати по горизонталі та вертикалі за допомогою атрибутів align та valign. При цьому слід пам'ятати, що використання valign хоч і можливе, але засуджується стандартом HTML5.

Атрибут align відповідає за вирівнювання то горизонталі та дозволяє вирівнювати зміст по лівому краю, по центру або по правому краю. За замовчуванням значення цього атрибута - "left".

Атрибут valign відповідає за вирівнювання то вертикалі та дозволяє вирівнювати зміст по верхньому краю, по середині ко-мірки, по нижньому краю або по базовій лінії змісту.

Завдання на практичну роботу

Використовуючи результати попереднього домашнього завдання доповнити резюме учня наступним чином:

1)після назви документа перед розділом «Персональні дані» розмістити власну фотографію невеликого розміру;
2)доповнити розділ з контактною інформацією гіперпосиланнями на сторінки в соціальних мережах. При цьому гіперпосиланням на кожну соціальну мережу має бути іконка цієї мережі;
3)після переліку соціальних мереж розмістити форму зворотного зв'язку, що містить поля «Ім'я», «Електронна пошта», «Телефон» як input з відповідними типами та «Текст повідомлення» як textarea.
4) Створити окрему HTML-сторінку, розмістити на ній таблицю зі структурою відповідно варіанту з додатку А ( номер вашого прізвища відповідає номеру варіанту, якщо ви знаходитесь під номером 17 або 18, додаєте ці цифри і виконуєте відповідно 8 (якщо 1+7=8) або 9 ), заповнивши її довільними даними. Заштриховані комірки вважати заголовками. Додаток А розміщено після всіх завдань, а списки груп та ваша нумерація після Додатку А.
5) На сторінці резюме після основного змісту розмістити гіперпосилання на сторінку, створену у п. 4) з текстом «Я вмію створювати таблиці», відділивши його від основного тексту горизонтальною лінією.
6) Перевірити створені сторінки за допомогою notepad++ та виправити знайдені помилки, якщо такі є і надіслати готову роботу мені на електронну пошту taniagumenna94@gmail.com.