Практична робота 6

Створення табдиць в редакторі Dreamweaver

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

Основні теоретичні положення

Будь-яка таблиця визначається в HTML за допомогою тега <TABLE> . Отже, опис таблиці в HTML-документі починається з тега <TABLE> і закінчується тегом </TABLE>. Вміст таблиці формується порядково, а кожен рядок формується послідовно з елементів таблиці. Кожний рядок таблиці починається з тега <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <TH> і </TH>. Для розміщення даних використовують теги <TD> і </TD>. За замовчуванням створена таблиця матиме невидимі границі комірок. Якщо є необхідність зробити границі комірок видимими, використовують атрибут BORDER. Атрибут BORDER може мати числове ціле значення, що визначає ширину рамки пикселах. Наприклад, <TABLE BORDER=5>.

Зверніть увагу на те, що за відсутності даних у комірці таблиці при створенні HTML-документа слід друкувати в цій комірці пропуск. Якщо клітинка таблиці порожня, навколо неї не малюється рамка. Якщо клітинка порожня, а рамка потрібна, в клітинку можна внести символьний об'єкт   (non-breaking space — нерозривний пробіл). Клітинка буде порожньою і навколо неї буде рамка.

Кілька комірок можуть бути об'єднані в одну як по горизонталі, так і по вертикалі. Для об'єднання комірок використовують теги COLSPAN (по стовпцях) і ROWSPAN (по рядках). Аргументами цих атрибутів є кількість стовпців або рядків, що об'єднуються. Наприклад, COLSPAN=3 означає, що клітинка розтягається на 3 колонки, а ROWSPAN=2 означає, що клітинка займає 2 рядки.

Можна налаштовувати ширину всієї таблиці, а також ширину окремої комірки. Зауважимо, що комірки в одному стовпці будуть мати однакову ширину, а комірки одного рядка можуть мати різну ширину. Ширина таблиці задається атрибутом WIDTH у тезі <TABLE>, а ширина комірки задається тим же атрибутом у тезі <TD> або <TH>. Ширина таблиці може вказуватись як у пікселях, так і у відсотках від ширини вікна. Ширина комірки також може вказуватись у пікселях або у відсотках від ширини таблиці.

Текст всередині комірок можна вирівнювати. Горизонтальне та вертикальне вирівнювання вмісту рядків задають за допомогою атрибута ALIGN в тезі <TR>. Вирівнювання в окремих комірках виконує атрибут ALIGN в тегах <TD>або<TH>. Атрибут ALIGN може приймати значення center, right, left або justify для вирівнювання відповідно по центру, по правому краю, по лівому краю або по ширині.

Для завдання вирівнювання таблиці по центру веб-сторінки або по одному з її країв призначений атрибут align тега <table>. Результат буде помітний лише в тому випадку, якщо ширина таблиці не займає всю доступну область, іншими словами, менше, ніж 100%. Насправді align не тільки встановлює вирівнювання, а й змушує текст обтікати таблицю з інших сторін.

Зручно задати заголовок, що містить назву таблиці та її опис. Для цієї мети в HTML існує спеціальний тег <caption>, який встановлює текст і його положення щодо таблиці. За замовчуванням заголовок поміщається зверху таблиці по центру, його ширина не перевищує ширини таблиці і в разі довгого тексту він автоматично переноситься на новий рядок. Для зміни положення заголовка у тега <caption> існує атрибут align, який може приймати наступні значення:

left - вирівнює заголовок по лівому краю таблиці. Браузер Firefox своєму розпорядженні текст збоку від таблиці, Internet Explorer і Opera розташовують заголовок зверху, вирівнюючи його по лівому краю.

right - в браузері Internet Explorer і Opera розпорядженні заголовок зверху таблиці і вирівнює його по правому краю таблиці. Firefox відображає заголовок праворуч від таблиці.

center - заголовок розташовується зверху таблиці по її центру. Таке розташування задано в браузерах за замовчуванням.

top - результат аналогічний дії атрибута center, але на відміну від нього входить в специфікацію HTML 4 і розуміється всіма браузерами.

bottom — заголовок розміщується внизу таблиці по її центру.

Кольорове оформлення таблиць виконують за допомогою атрибута BGCOLOR, який приймає як значення колір у вигляді назви кольору англійською мовою або у вигляді шістнадцяткового числа. Якщо потрібно встановити колір для цілої таблиці, то атрибут BGCOLOR вставляється в тег <TABLE>. Для зміни кольору лише в одному рядку цей атрибут вставляється в тег <TR>. Налаштування кольору окремої комірки забезпечується атрибутом BGCOLOR всередині тега <TD> або <TH>.

Якщо необхідно задати шрифт всередині комірок таблиці, то це можна зробити за допомогою тега FONT всередині відповідних тегів <TD>. Наприклад, <TD BGCOLOR=magenta> <FONT COLOR=pink> Текст</FONT></TD>.

Комірки таблиці можна заповнювати не тільки текстом, але й вміщувати зображення, в комірку таблиці можна вмістити іншу таблицю, вставити рухому стрічку. Текст або зображення всередині комірки може бути гіперпосиланням. Наприклад, <TD><A HREF=”11b.HTML”> 11-Б </A></TD>.

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

<BODY>

<TABLE BORDER=1>

<TR>

<TD COLSPAN=2 BGCOLOR=brown WIDTH=60%> brown </TD>

<TD ROWSPAN=2 BGCOLOR=blueviolet>blueviolet </TD>

</TR>

<TR>

<TD COLSPAN=2 BGCOLOR=gold> gold </TD>

</TR>

<TR>

<TD BGCOLOR=yellow WIDTH=30%> yellow</TD>

<TD ROWSPAN=2 COLSPAN=2 BGCOLOR=purple>purple</TD>

</TR>

<TR>

<TD BGCOLOR=pink>pink</TD>

</TR>

</TABLE>

</BODY>

Рис.6.1 Табличне представлення.