Практична робота №8
Тема: Структурування веб – сторінки за допомогою таблиць.
Мета: Навчитися створювати таблиці та розміщувати в їхніх комірках потрібну інформацію.
Обладнання: ПК.
Теоретичні відомості
Для створення таблиці в мові HTML використовують чотири елементи: опис таблиці починається з тегу <TABLE>, таблиця <TABLE>…</TABLE> містить один або кілька рядів <TR>…</TR>. У кожному рядку може міститися заголовок <TH>…</TH> або дані <TD>…</TD>.
Отже, опис таблиці в HTML-документі починається з тега <TABLE> і закінчується тегом </TABLE>. За замовчуванням створена таблиця матиме невидимі границі комірок. Якщо є необхідність зробити границі комірок видимими, використовують атрибут BORDER. Атрибут BORDER може мати числове ціле значення, що визначає ширину рамки. Наприклад, <TABLE BORDER=5>.
Кожний рядок таблиці починається з тега <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <TH> і </TH>. Для розміщення даних використовують теги <TD> і </TD>.
Прізвище |
Ім’я |
По батькові |
Іванов |
Іван |
Іванович |
<HTML> <TITLE> Приклад простої таблиці </TITLE>
<BODY>
<TABLE BORDER="1">
<CAPTION> Працівник </CAPTION>
<TR>
<TH>Прізвище</TH>
<TH>Ім’я</TH>
<TH>По батькові</TH>
</TR>
<TR>
<TD> Іванов </TD>
<TD> Іван </TD>
<TD> Іванович </TD>
</TR>
</TABLE>
</BODY> </HTML>
Зверніть увагу на те, що за відсутності даних у комірці таблиці при створенні HTML-документа слід друкувати в цій комірці пропуск. Якщо клітинка таблиці порожня, навколо неї не малюється рамка. Якщо клітинка порожня, а рамка потрібна, в клітинку можна внести символьний об'єкт (non-breaking space — нерозривний пробіл). Клітинка буде порожньою і навколо неї буде рамка.
Об’єднання комірок
Кілька комірок можуть бути об'єднані в одну як по горизонталі, так і по вертикалі. Об'єднання по стовпцю застосовують тоді, коли потрібно, щоб сусідні стовпці мали спільний заголовок. Об'єднання по рядках виконують тоді, коли вміст кількох комірок підряд однаковий. Для об'єднання комірок використовують теги COLSPAN (по стовпцях) і ROWSPAN (по рядках). Аргументами цих атрибутів є кількість стовпців або рядків, що об'єднуються. Наприклад, COLSPAN=3 означає, що клітинка розтягається на 3 колонки, а ROWSPAN=2 означає, що клітинка займає 2 рядки. Створимо HTML-документ для відтворення наступних двох таблиць, в яких використовуються об'єднання і по стовпцях, і по рядках.
Таблиця з об'єднанням комірок по стовпцях
-
Групи
МТ 61
МТ 62
Таблиця з об'єднанням комірок по рядках
-
Групи
МТ 11
МТ 21
МТ 31
<HTML> <TITLE> Приклад ROWSPAN та COLSPAN </TITLE>
<BODY>
<TABLE BORDER="1">
<CAPTION> Приклад ROWSPAN </CAPTION>
<TR>
<TD ROWSPAN="2"> Групи </TD>
<TD> МТ 61</TD>
</TR>
<TR>
<TD> МТ 62</TD>
</TR>
</TABLE>
<TABLE BORDER="1">
<CAPTION> Приклад COLSPAN </CAPTION>
<TR>
<TD COLSPAN="3"> Групи</TD>
</TR>
<TR>
<TD>МТ 11 </TD>
<TD>МТ 21 </TD>
<TD>МТ 31</TD>
</TR>
</TABLE>
</BODY> </HTML>
Можна налаштовувати ширину всієї таблиці, а також ширину окремої комірки. Зауважимо, що комірки в одному стовпці будуть мати однакову ширину, а комірки одного рядка можуть мати різну ширину. Ширина таблиці задається атрибутом WIDTH у тезі <TABLE>, а ширина комірки задається тим же атрибутом у тезі <TD> або <TH>. Ширина таблиці може вказуватись як у пікселях, так і у відсотках від ширини вікна. Ширина комірки також може вказуватись у пікселях або у відсотках від ширини таблиці.
<HTML> <TITLE> Приклад керування шириною </TITLE>
<BODY>
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="2" WIDTH=50%> Групи </TD>
<TD WIDTH=200> МТ 61</TD>
</TR>
<TR>
<TD> МТ 62</TD>
</TR>
</TABLE>
</BODY> </HTML>
Текст всередині комірок можна вирівнювати. Горизонтальне та вертикальне вирівнювання вмісту рядків задають за допомогою атрибута ALIGN в тезі <TR>. Вирівнювання в окремих комірках виконує атрибут ALIGN в тегах <TD>або<TH>. Атрибут ALIGN може приймати значення center, right, left або justify для вирівнювання відповідно по центру, по правому краю, по лівому краю або по ширині. Приклади написання тегів <TR> та <TD> з використанням вирівнювання: <TR ALIGN= right >; <TD ALIGN= center> 1. Алгебра </TD>.