Практична робота 4 Тема: Таблиці

Мета: 1.Набуття навиків створення таблиці заданого розміру.
2. Навчитися об’єднувати комірки таблиці по горизонталі та вертикалі.
3. Навчити створювати фіксовані та динамічні таблиці.
4. Навчитися керувати відстанню між комірками і рамкою таблиці.

Питання для повторення:

1. Використання таблиць у HTML-документах.

2. Створення таблиці.

3. Об’єднання комірок.

4. Встановлення ширини таблиці та комірок.

5. Форматування тексту та оформлення рамок таблиці.

6. Колірне оформлення таблиць.

7. Використання таблиць для розміщення об’єктів на Web-сторінці.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

1. Створити файл lab4.html і зберегти його в своїй папці.

2. Створити у файлі lab4.html таблицю розміром 3х3 для гри в «Хрестики-нулі». Для створення таблиці використати тег <table>. Для таблиці необхідно створити рамку для відображення границь, а порожні комірки заповнити символом нерозривного пропуску.

3. Доповнити файл таблицею з об’єднаними комірками і жирнішою рамкою для всієї таблиці, текст вирівняти по середині комірки (вертикально і горизонтально) (див. рис. 4.1).

Рис. 4.1. Приклад таблиці

4. Створити таблицю, встановити їй наступні параметри: розташування на екрані – по центру, ширина 70% від ширини екрану. Колір вертикальної загальної комірки – блакитний, загальної горизонтальної комірки – жовтий. Колір всієї частини таблиці, що залишилася, – зелений. Вирівнювання тексту у комірках – по правому краю (див. рис. 4.2).

Рис. 4.2. Приклад таблиці

5. Створити в окремому файлі таблицю для шаблону сайту, яка відповідатиме наступним вимогам (див. рисунок 4.3). Назвати файл lab4.1.html.

Рис.4.3.Шаблон сайту

· шапка таблиці повинна складатися з двох комірок;

<tr>

<td background=Shapka_saita.JPG width="590" height="131"></td>

<td bgcolor="#9A0000" width="*" valign="middle" align="center">Роботу виконав СТУДЕНТ</td>

</tr>

· розмір лівої верхньої комірки задати залежно від розміру рисунку-фону (слід задати ширину і висоту комірки виходячи з розміру зображення);

· фоном цієї комірки зробити зображення (атрибут background для тегу комірки <td>), файл зображення є в архіві до лабораторної роботи;

· права верхня комірка повинна займати місце, що залишилося, у вікні браузеру і мати колір фону #.... (дізнатися колір фону можна використовую кнопку select у вікні вибору кольору фону);

· для того, щоб прибрати відстань між комірками використати атрибути rules, cellpadding і cellspacing тегу <table>;

· у верхній правій комірці змінити колір тексту і його вирівнювання (згідно рисунку) і записати в ній своє прізвище. Для вирівнювання тексту необхідно використати атрибути aling і valign;

· центральну (контентну) частину зробити заввишки в 350 пікселів і задати колір фону #fff3e5;

· у центральній комірці об’єднати дві комірки так, щоб вийшла одна загальна, встановити вирівнювання тексту по ширині і по верхньому краю комірки;

· задати підвал таблиці заввишки в 30 пікселів, текст вирівняти по правому краю. Включити в підпис символ ©.

6. У окремому файлі з назвою lab4.2 створити таблицю розміром 3х3, (пунктиром вказані границі комірок).

7. Задати ширину і висоту таблиці та комірок так, щоб ширина таблиці зменшувалася і збільшувалася при зміні розмірів вікна браузеру, а висота була встановлена рівній висоті браузеру. Якщо комірка порожня, то вона не відображуватиметься на екрані, а якщо у комірці знаходиться пробіл, то її висота може бути більше необхідної, для зменшення висоти комірки слід використовувати замість нерозривного пропуску прозору картинку розміром в 1 піксель (картинка є в архіві до лабораторної роботи).

8. Добавте в файл index.html посилання про виконані завдання з лабораторної роботи № 4.

9. Покажіть виконану роботу викладачеві.

Контрольні запитання:

1. Який тег служить для вставки таблиці в html-документ?

2. Які атрибути тегу <table> дозволяють змінити фон таблиці і ширину границі таблиці?

3. Чи задається ширина границі таблиці одна для всієї таблиці або задається окремо для зовнішньої границі і внутрішніх комірок?

4. Який тег відповідає за початок рядка?

5. Який тег відповідає за початок комірки?

6. Як змінити вирівнювання тексту у комірці?

7. Чи може бути в одному рядку комірка з різним вертикальним вирівнюванням?

8. Якщо для таблиці встановити колір фону і фонове зображення одночасно, що відображуватиметься на екрані?

9. Як можна об’єднати комірки по горизонталі?

10. Як можна в таблиці об’єднати комірки по вертикалі?

Не нашли, что искали? Воспользуйтесь поиском: