Елементи таблиць. Верстка за допомогою таблиць

Мета роботи: навчитися створювати таблиці та розміщувати різні елементи на сторінці за допомогою таблиць.

3.1 Теоретичні відомості

Контейнерний елемент table використовується для того, щоб зводити разом групи інших елементів, що визначають рядки, а усередині кожного рядка - ячейку. Робота з таблицями в XHTML дуже нагадує роботу з додатками для створення електронних таблиць. Таблиця XHTML складається з рядків і стовпців. Місце перетину конкретного рядка з конкретним стовпцем називається ячейкою. Кожна окрема ячейка містить дані. Взагалі, ячейки можуть вміщувати все що завгодно – чи то текст, чи то інші елементи XHTML, наприклад, гіперпосилання й зображення. Для створення таблиці буде потрібно написати наступний код:

<th>3aголовок стовпця l</th>
<th>3aголовок стовпця 2</th>
<th>3аголовок стовпця 3</th>

</tr>
<tr>

<td> Ячейка 1-1</td>
<td> Ячейка 1-2</td>
<td> Ячейка 1-3</td>

</tr>
<tr>

<td> Ячейка 2-1</td>
<td> Ячейка 2-2</td>
<td> Ячейка 2-3</td>

</tr>
</table>

Головним тут є контейнер <table></table>. Усередині <table> існують такі елементи: контейнер <tr> - задає рядок; усередині його можуть бути елементи <td>, що задають ячейку. Більшість таблиць може мати також елементи <th> - вони дозволяють задавати заголовки рядків або стовпців. Таблиця, код якої наведений вище, відобразиться в браузері як показано на рисунку 3.1.

Рисунок 3.1 – Відображення таблиці у вікні браузера

До параметрів ячейки належать параметри, значення яких задається атрибутами colspan ="" та rowspan ="".

colspan установлює число ячейок, які повинні бути об'єднані по горизонталі. Цей параметр має сенс для таблиць, що складаються з декількох стовпців. Наприклад, як для таблиці 3.1, де використовується горизонтальне об'єднання ячейок. Дана таблиця вміщує два рядки й два стовпця, причому нижні горизонтальні ячейки об'єднані за допомогою параметра colspan.

Таблиця 3.1 – Приклад горизонтального об’єднання ячейок

A	B
C

Код, що відповідає таблиці 3.1, буде мати наступний вид:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

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

Таблиця 3.2– Приклад вертикального об’єднання ячейок

A	B
С

Код, що відповідає таблиці 3.2, буде мати наступний вид:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

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

3.2 Порядок виконання лабораторної роботи

1. Розробіть структуру для Ваших сторінок відповідно до рисунку. Створіть необхідну навігацію.

Заголовок
Меню 1	Меню 2	…………
Меню 1	Основне наповнення сторінки	Новини
Меню 2
………..
@ copywrite

Рисунок 3.2 – Структура web-сторінки

Наприклад:

<thead><th colspan="3">Header</th></thead>

<tr> <td>Menu

<table>

</table>

</td>

<td>Content</td>

</tr>

<tr> <td colspan="3">© Copyright</td></tr>

</table>

2. Оформіть сторінки, що були розроблені у попередніх лабораторних роботах відповідно до розробленої структури.

3. Розробіть додатково сторінку з резюме відповідно до завдання. Ця сторінка повинна мати навігацію по пунктах Вашого резюме.

3.3 Завдання для виконання

1. Розробіть загальний інтерфейс Ваших сторінок, що були розроблені у лабораторних роботах №1 та №2 з використанням табличного дизайну.

2. Використовуючи знання, отримані про таблиці, а також навички набуті в ході виконання лабораторних робіт №1 й №2, підготуйте html-сторінку, що містить ваше резюме в наступному форматі:

Резюме

ПІБ Дата народження: Адреса: Контактний телефон: E-mail: Сімейний стан: Бажана посада:

Освіта:

з (мм/рррр)	по (мм/рррр)	назва навчального закладу	спеціальність	підсумкова атестація

Досвід роботи:

з (мм/рррр)	по (мм/рррр)	місце роботи	посада	обов’язки

Проекти:

Назва	Доля участі	Опис

Технічні навички	Рівень знань
не знаю	базовий	середній	високий	експерт
Операційні системи

Бази даних

Програми для роботи з графікою
Adobe Photoshop
Adobe Illustrator
Macromedia Flash

Офісні пакети

Мови програмування і розмітки
HTML
CSS
DHTML
XML
JavaScript
PHP
Perl
C/C++
ActionScript
Іноземні мови
Англійська
Додаткові навички та вміння

Додаткова інформація
Сертифікати
Особисті якості
Графік роботи, якому віддана перевага