Теоретичні відомості.
У таблиць є досить багато атрибутів. Розглянемо їх.
Атрибут border дозволяє встановити товщину рамки таблиці у пікселях. Якщо вказати border=0 то таблиця буде без рамки. От як це записується:
<table border="1"> встановлює товщину рамки в 1 піксель
Атрибут width встановлює ширину таблиці у відсотках від ширини сторінки. Наприклад :
<table border=”2” width=”40%”> встановлює ширину таблиці 40%
від ширини сторінки і товщину
бордюру 2 пікселі
Два атрибути align та valign дозволяють дозволяють виконувати вирівнювання в таблиці, рядку або комірці по горизонталі та вертикалі:
- align може приймати значення left (по лівому краю), center (по центру), right (по правому краю)
- valign може приймати значення top(вгорі), middle (посередині), bottom (внизу)
Наприклад для рядка це записується так:
<tr align=”center” valign=”top”>
Необхідно нагадати, що ці атрибути можуть застосовуватись як для всієї таблиці, так і для окремого рядка чи комірки. При цьому вони записуються в тому тегу, в якому їх необхідно застосувати.
Завдання 2:
Створіть сторінку, на якій розмістіть таблицю з трьох рядків по три комірки в кожному. Використайте атрибути вирівнювання різні для кожного рядка і прогляньте результат. Відредагуйте таблицю призначивши атрибути вирівнювання для всієї таблиці, при цьому встановіть в одній комірці відмінні від таблиці значення вирівнювання. Подивіться на результат.
Теоретичні відомості.
При створенні таблиць часто виникає потреба, щоб певні комірки були об’єднані. Потреба в цьому може виникати як в рядках так і в стовбцях. Для цього існують спеціальні атрибути :
colspan – (охоплення стовбців)
rowspan – (охоплення рядків)
Ці атрибути використовуються у тегу <td> для встановлення кількості об’єднаних комірок відповідно у стовбці або в рядку. Наприклад:
<table border="1">
<tr>
<td colspan="3">Дані 1</td>
</tr>
<tr>
<td>Дані 2</td>
<td>Дані 3</td>
<td>Дані 4</td>
</tr>
</table>
В браузері це виглядає так :
Дані 1 |
||
Дані 2 |
Дані 3 |
Дані 4 |
Зверніть увагу, що у першій комірці вказано охопити три комірки в рядку, якщо там вказати охоплення двох комірок то необхідно було б додати в першому рядку ще одну комірку для вирівнювання кількості стовбців в першому і другому рядках. Слід завжди прораховувати вигляд таблиці перед тим як створювати її, особливо при використанні об’єднання комірок.
При використанні rowspan ми отримаємо об’єднання комірок у стовбці.
Наприклад:
<table border="1">
<tr>
<td rowspan="3">Дані 1</td>
<td>Дані 2</td>
</tr>
<tr>
<td>Дані 3</td>
</tr>
<tr>
<td>Дані 4</td>
</tr>
</table>
У браузері це виглядає так:
Дані 1 |
Дані 2 |
Дані 3 |
|
Дані 4 |
Рядок з написом «дані 1» містить вказівку охопити три рядки. Разом з ним в першому рядку знаходиться комірка з написом «Дані 2». Рядки «Дані 3» та «Дані 4» доповнюють таблицю до необхідної кількості рядків. Тобто при використанні rowspan необхідно дотримуватись раніше викладених правил.
Завдання 3:
Створіть сторінку на якій розмістіть таблицю наступного вигляду:
Дані 1 |
|||
Дані 2 |
Дані 3 |
Дані 4 |
Дані 5 |
Дані 6 |
Дані 7 |
Дані 8 |
|
Дані 9 |
Дані 10 |
Дані 11 |
Дані 12 |
Практичне заняття 6.
Тема: Мова HTML. Контрольне завдання.
Програмні засоби: редактор Блокнот, браузер Explorer або Opera.
Дане практичне заняття призначене для закріплення отриманих знань і перевірки рівня засвоєння матеріалу з мови HTML. Перед початком роботи необхідно повторити всі вивчені теги починаючи з структури програми. Це можна зробити у вигляді заповнення таблиці в режимі опитування.
-
<html>
<head>
<title>
<body>
<p>
<h1> … <h6>
<b>
<i>
<small>
<br />
<hr />
<ul>
<ol>
<li>
<table>
<tr>
<td>
І додати список тегів з атрибутами призначених для виконання гіперпосилань, вставки малюнків, кольорового оформлення та оформлення таблиць:
<a href=”page-2.htm”> перехід на page-2 </a>
<img src=”grups.jpg” alt=”Grupa”>
<body style="background-color:#ff0000;">
<table border=”2” width=”40%”>
<tr align=”center” valign=”top”>
<td colspan="3">Дані 1</td>
<td rowspan="3">Дані 1</td>