- •Теоретичні відомостi
- •Варіанти завдань
- •Кліматична таблиця
- •Облік грошових документів
- •Облік запасів
- •Розрахунки з дебіторами
- •Структура земельного фонду області за цільовим призначенням
- •Облік заробітної плати
- •Відомість обліку нематеріальних активів, нарахованої амортизації (зносу)
- •Інформація про співробітництво із зарубіжними навчальними закладами
- •Інформація про вивчення та викладання іноземних мов у навчальному закладі
- •Інформація про обсяги закордонних відряджень фахівців і студентів, в т.Ч. За прямими договорами
- •Інформація про прийом іноземних фахівців, в т.Ч. За прямими угодами
- •Інформація про закордонні відрядження ректора ( директора ) навчального закладу
- •Довідка про міжнародне партнерство в загальноосвітніх навчальних закладах
- •Виробництво та відгрузка за видами продукції та послуг
- •Рейтинг студентів
- •Розподіл навчального часу за темами
- •Розподіл навчального часу
- •Облік витрат
Лабораторна робота № 3
ОРГАНІЗАЦІЯ ТАБЛИЦЬ ЗАСОБАМИ МОВИ HTML
Мета роботи – навчитися створювати таблиці та розміщувати їх на web-сторінках, використовуючи засоби мови HTML.
Теоретичні відомостi
Будь-яка таблиця складається з рядків, кожен з яких містить одну або декілька комірок.
Для створення таблиць у мові HTML 4.0 застосовується тег <TABLE>, параметри якого описані нижче:
Параметри тега <TABLE>
Параметр |
Призначення |
align=left|center|right |
Відповідає за горизонтальне вирівнювання усієї таблиці в цілому (по лівому краю, центру, чи правому краю, відповідно) |
border |
Вказує на товщину сітки таблиці у пікселях. Якщо значення цього атрибуту дорівнює нулю, то таблиця стає невидимою. |
bgcolor |
Задає колір фону |
background |
Задає фонове зображення |
cellpadding |
Задає ширину проміжків між змістом комірки та її границею, тобто поля всередині комірки у пікселях |
cellspacing |
Задає ширину проміжків між комірками у пікселях |
width |
Визначає ширину усієї таблиці та може приймати значення цілого числа, якщо ширина таблиці задається у пікселях, або числа від 1 до 100 з символом %, якщо ширина таблиці задається у відсотках від ширини екрана користувача |
Таблиця також може мати заголовок, що задається за допомогою тега <CAPTION> та може мати наступний формат:
<CAPTION align=”top”> Заголовок таблиці </САРТION>
Заголовок таблиці завжди центрується, у зв’язку з чим параметр ALIGN може приймати лише значення ТОР або BOTTOM, що відповідає розміщенню заголовка над або під таблицею.
Кожен рядок таблиці визначається за допомогою тега <TR>, що вкладається між тегами <TABLE> та </TABLE>. Параметри тега <TR> наведено нижче:
Параметры тега <ТR>
Параметр |
Назначение |
align=left|center|right|justify |
Горизонтальне вирівнювання інформації в усіх комірках поточного рядка таблиці |
valign=top|middle|bottom|baseline |
Вертикальне вирівнювання інформації в усіх комірках поточного рядка таблиці |
Кожен рядок таблиці складається, в свою чергу, з комірок. При цьому розрізняють комірки-заголовки та комірки даних.
Комірка-заголовок описується за допомогою тега <ТН>. Цей тег виділяє текст всередині комірки жирним шрифтом та вирівнює його по центру.
Комірки даних використовується для представлення інформації (даних). Кожна така комірка описується тегом <ТD>.
Теги <ТН> та <ТD> вкладаються у контейнер, утворюваний тегами <TR> та </TR>, що описують поточний рядок таблиці. Параметри цих тегів наведені нижче:
Параметры тега <TD>
Параметр |
Назначение |
align=left|center|right|justify |
Горизонтальне вирівнювання інформації всередині комірки |
valign=top|middle|bottom |
Вертикальне вирівнювання інформації всередині комірки |
colspan |
Кількість стовпців у рядку, які об’єднує комірка. Параметр приймає натуральні значення. |
rowspan |
Кількість рядків у стовпці, які об’єднує комірка. Параметр приймає натуральні значення. |
width |
Визначає ширину комірки у пікселях або відсотках |
nowrap |
Забороняє перенос слів всередині комірки |
Нижче наведено HTML-код, що демонструє практичне використання розглянутих вище тегів для організації таблиць.
<HTML>
<HEAD> <TITLE> Таблиця </TITLE> </HEAD>
<BODY>
<TABLE width="100%" cellpadding="0" cellspacing="0" border="1">
<CAPTION align=”top”> Статистика </CAPTION>
<TR>
<TH> URL-адреса </TH>
<TH> Хости </TH>
<TH> Хіти </TH>
</TR>
<TR>
<TD> www.brainbench.com </TD>
<TD> 12136 </TD>
<TD> 22178 </TD>
</TR>
<TR>
<TD> www.transmarket.net/education </TD>
<TD> 12 </TD>
<TD> 27 </TD>
</TR>
</TABLE>
</BODY>
</HTML>