Практичне заняття №5. Тема: Створення таблиць.
Мета: Навчити студентів створенню таблиць різного ступеня складності.
Теоретичні відомості
Таблиці. Засоби опису таблиць в HTML.
У міру зростання системи WWW стало зрозуміло, що засобів, які закладені в НTML, не достатньо для якісного відображення різного типу документів. Недоліком НTML була відсутність в його складі засобів відображення таблиць. Для цієї мети зазвичай використовувався форматований текст (тег <PRE>), в якому таблиця змальовувалася символами АSCII. Але така форма представлення таблиць була недостатньо високої якості і виділялася із загального стилю документа.
Тег <Тавlе>
Для опису таблиць служить тег <Тавlе>. Тег <Тавlе>, як і багато інших, автоматично переводить рядок до і після таблиці.
Тег <Тr>.
Тег <Тr> (скорочення від Таble Row - рядок таблиці) створює рядок таблиці. Якщо в таблиці міститься два набори тегов <Тr></тr>, в ній будуть два рядки. Весь текст, інші теги і атрибути, які ви хочете помістити в один рядок, повинні бути поміщені між тегами <Тr></тr>. Приклад 1:
<HTML>
<BODY>
<H1 ALIGN=CENTER>Таблица</H1>
<CENTER>
<TABLE BORDER=2>
<TR> <TD COLSPAN=3>
Если в таблице два тега TR то в ней две строки.</TD> </TR>
<TR>
<TD>Если в строке три тега <TD> </TD>
<TD>то в ней </TD>
<TD>три столбца</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Тег <ТD>
Усередині рядка таблиці зазвичай розміщуються осередки з даними, кожен осередок, що містить текст або зображення, повинен бути оточений тегами <Тd></тd>. Число тегов <Тd></тd> в рядку визначає число осередків. Рядок з п'ятьма парами тегов <Тd></тd> складатиметься з п'яти осередків. Приклад 2:
<HTML>
<BODY>
<TABLE BORDER=2>
<TR>
<TD>В</TD>
<TD>этой</TD>
<TD>строке</TD>
<TD>пять</TD>
<TD>столбцов</TD>
</TR>
<TR>
<TD>а в этой</TD>
<TD>только</TD>
<TD>три.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Тег <ТН>
При завданні заголовків для стовпців і рядків таблиці використовуються тег заголовка <Тн></тн> (Таblе Неаder, заголовок таблиці). Ці теги аналогічні <Тd></тd>. Відмінність полягає в тому, що текст, ув'язнений між тегами <Тн></тн>, автоматично записується жирним шрифтом і за умовчанням розташовується посередині осередка. Центрування можна відмінити і вирівняти текст по лівому або правому краю. Якщо скористатися <Тd></тd> з тегом <В> і атрибутом Аlign=center, текст теж виглядатиме як заголовок. Проте, слід мати на увазі, що не всі броузеры підтримують жирний шрифт в таблицях, тому краще задавати заголовки таблиць за допомогою <ТН>.
Приклад 3:
<HTML>
<BODY>
<TABLE BORDER>
<TR>
<TH>Заголовок центрован по умолчанию</TH>
<TH COLSPAN=2>Заголовок может объединять столбцы</TH>
</TR>
<TR>
<TH>Заголовок может быть расположен перед столбцами</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TH ROWSPAN=3> Заголовок может объединять строки</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Тег <Сарtiоn>
<CAPTION> дозволяє створювати заголовки таблиці. За умовчанням заголовки центруються і розміщуються або над (<Сарtion Аlign=tор>), або під таблицею (<Сарtion Align=bottom>). Заголовок може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, відповідні ширині таблиці. Іноді тег <Сарtion> використовується для підпису під малюнком. Для цього досить описати таблицю без меж.
Приклад 4:
<HTML>
<BODY>
<TABLE BORDER=2>
<CAPTION ALIGN=TOP>Заголовок над таблицей</CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>Заголовок под таблицей</CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут NOWRAP
Зазвичай будь-який текст в таблиці, що не поміщається в один рядок осередку, переходить на наступний рядок. Проте, при використанні атрибуту NOWARP з тегами <ТН> або <Тd> довжина осередку розширюється на стільки, щоб, укладений в ній текст помістився в один рядок.
Атрибут Соlspan
Теги <Тd> і <ТН> модифікуються за допомогою атрибуту Соlspan = (Column Span, з'єднання стовпців). Якщо ви хочете зробити який-небудь осередок ширше, ніж верхня або нижняя, можна скористатися атрибутом Соlspan=, щоб розтягнути його над будь-якою кількістю звичайних осередків. Приклад 5:
<HTML>
<BODY>
<CENTER>
<TABLE BORDER=3>
<TR>
<TD> Если вы хотите сделать какою-нибудь ячейку шире, чем верхняя или
нижняя
</TD>
<TD> можно вопользоваться атрибутом Соlspan=
</TD>
</TR>
<TR>
<TD BGCOLOR=WHITE COLSPAN=2>
чтоб ростянуть ее над любым количеством обычных ячеек.
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Атрибут ROWSPAN
Атрибут ROWSPAN=, використовуваний в тегах <Тd> і <ТН>, аналогічний атрибуту Соlspan=, тільки він задає число рядків, на які розтягується осередок. Якщо ви вказали в атрибуті ROWSPAN= число, більше одиниці, то відповідна кількість рядків повинна знаходитися під розтягуваним осередком. Не можна помістити її внизу таблиці.
Атрибут WIDТН
Атрибут WIDТН= застосовується в двох випадках. Можна помістити його в тег <Тавlе> для завдання ширини всієї таблиці, а можна використовувати в тегах <Тr> або <ТН> для завдання ширини осередку або групи осередків. Ширину можна указувати в пікселях або у відсотках. Наприклад, якщо ви задали в теге <Тавlе WIDTH=250>, ви отримаєте таблицю шириною 250 пікселів незалежно від розміру сторінки на моніторі. При завданні WIDТН=50% в теге <Тавlе> таблиця займатиме половину ширини сторінки при будь-якому розмірі зображення на екрані. Отже, указуючи ширину таблиці в пікселях майте на увазі, що якщо у вашого читача вузька область перегляду, ваша сторінка може виглядати декілька дивно. Якщо ви користуєтеся пікселями і таблиця виявляється ширшою за область перегляду, внизу з'явиться смуга прокрутки для переміщення управо і вліво по сторінці. Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці можуть виявитися корисними. Приклад 6:
<HTML>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=CENTER>Текст или данные - ширина 100%
</TR>
</TABLE>
або
<TABLE BORDER WIDTH=50%>
<TR>
<TD ALIGN=CENTER>Текст или данные - ширина 50%</TD>
</TR>
</TABLE>
або
<TABLE BORDER WIDTH=200>
<TR>
<TD ALIGN=CENTER>Текст или данные - ширина 200 пикселей</TD>
</TR>
</TABLE>
або
<TABLE BORDER WIDTH=100>
<TR>
<TD ALIGN=CENTER>Текст или данные - ширина 100 пикселей</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут UNIТ
Атрибут UNIT= тега <Тавlе> визначає одиниці вимірювання, використовувані при вказівці розмірів як всієї таблиці, так і її окремих стовпців. Атрибут UNIТ може приймати три значення:
UNIТ=ЕN - це значення привласнюється за умовчанням і задає одиницю вимірювання, рівну еn-пробілу. Еn-пробіл - це друкарська одиниця вимірювання, рівна ширині букви <n>. Реальний розмір пропуску залежить від вибраного шрифту: для крупного шрифту еn-пробіл більший, ніж для дрібного. Зазвичай еn-пробіл рівний половині розміру шрифту. Наприклад, при використанні 12-пунктового шрифту ширина еn-пробіла буде 6 пунктів. Для 8-пунктового шрифту еn-пробіл займає 4 пункти.
UNIТ=RELATIVE використовується для завдання відносної ширини стовпців у відсотках від загальної ширини таблиці. Цей спосіб слід по можливості застосовувати замість вказівки ширини у відсотках UNIТ=RELATIVE виконує ту ж функцію, але підтримується великою кількістю броузеров.) При завданні відносних (RELATIVE) одиниць числа, що вводяться, сприймаються як ширина стовпців у відсотках.
UNIТ=РIXELS - це значення застосовується, коли вам потрібно точно знати ширину стовпця на екрані. В цьому випадку краще всього задати її в пікселях. Наприклад, тег <Тавlе UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.
Атрибут Соlsрес
Атрибут Соlsрес=, використовуваний з атрибутом UNIТ=, визначає, скільки місця займає кожен стовпець таблиці і як в ньому вирівнюються дані. Застосовується тільки в тезі <ТАВLЕ>.
Соlsрес= перераховує всі стовпці і для кожного з них задає вирівнювання і розмір. Для стовпця (або осередку) існує п'ять способів вирівнювання: L - по лівому краю, C - по центру, R - по правому краю, J - по правому і лівому краю і D - по десятковій комі. Якщо у вас п'ять стовпців, ви можете визначити ширину і вирівнювання кожного з них таким чином:
<Тавlе UNIТ=РIХЕLS Соlsрес="l10 С15 J25 D30">
Ви описали таблицю, в якій перший стовпець має ширину 10 пікселів і його вміст вирівнюється по лівому краю, другий стовпець, шириною 15 пікселів, з вирівнюванням по центру, третій, шириною 20 пікселів, вирівняний по правому краю, четвертий, шириною 25 пікселів, вирівняний з двох сторін, а п'ятий, шириною 30 пікселів, вирівнюється по десяткових комах.
Атрибут DР
Атрибут DР= (Decimal Point, десятковий знак) визначає символ, використовуваний для відділення цілої частини десяткового дробу. DР="." (за умовчанням) указує на крапку як десятковий символ. DР="," задає кому.
Порожні осередки
Якщо осередок не містить даних, він не матиме меж. Якщо ви хочете, щоб у осередку були межі, але не було вмісту, ви повинні помістити в нього щось, що не буде видне при перегляді. Можна скористатися порожнім рядком <Вr>. Можна навіть задати порожні стовпці, визначивши їх ширину в пікселях або відносних одиницях і не ввівши в отримані осередки ніяких даних. Цей засіб може виявитися корисним при розміщенні тексту і графіки на сторінці.
Атрибут Сеllраdding
Атрибут Сеllpadding= визначає ширину порожнього простору між вмістом осередку і її межами, тобто задає поля усередині осередку.
Приклад 7:
<HTML>
<BODY>
<CENTER>
<TABLE BORDER CELLPADDING=20>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER CELLPADDING=O>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Атрибути Аlign= і Valign=
Теги <Тr>, <Тd> і <ТН> можна модифікувати за допомогою атрибутів ALIGN= і VALIGN=. Атрибут Аlign визначає вирівнювання тексту і графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання може бути задане декількома способами:
ALIGN=ВLЕЕDLEFT Притискує вміст осередку впритул до лівого краю. ALIGN=LEFT Вирівнює вміст осередку по лівому краю з урахуванням відступу, заданого атрибутом Сеllpadding=. Аlign=сеnter Розташовує вміст осередку по центру. Аlign=right Вирівнює вміст осередку по правому краю з урахуванням відступу, заданого атрибутом Сеllpadding=. Приклад 8:
<HTML>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=LEFT>Текст или данные</TD>
<TD ALlGN=CENTER>Текст или данные</TD>
<TD ALIGN=RIGHT>Текст или данные</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Текст или данные</TD>
<TD ALIGN=CENTER>Текст или данные</TD>
<TD ALIGN=LEFT>Текст или данные</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Текст или данные</TD>
<TD ALIGN=RIGHT>Текст или данные</TD>
<TD ALIGN=RIGHT>Текст или данные</TD>
</TR>
<TR>
<TD ALIGN=CENTER>Текст или данные</TD>
<TD ALIGN=CENTER>Текст или данные</TD>
<TD ALIGN=CENTER>Текст или данные</TD>
</TR>
<TR>
<TD ALIGN=LEFT>Текст или данные</TD>
<TD ALIGN=LEFT>Текст или данные</TD>
<TD ALIGN=LEFT>Текст или данные</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут Valign= здійснює вирівнювання тексту і графіки усередині осередку по вертикалі. . Вертикальне вирівнювання може бути задане декількома способами: VALIGN=ТОР Вирівнює вміст осередку по її верхній межі.
VALIMG=МIDDLE Центрує вміст осередку по вертикалі. VALIGN=ВОТТОМ Вирівнює вміст осередку по її нижній межі. Приклад 9:
<HTML>
<BODY>
<CENTER>
<TABLE BORDER WIDTH=90%>
<TR>
<TD WIDTH=100> Атрибут VALIGN= здійснює вирівнювання тексту і графіки усередині осередку по вертикалі.
</TD>
<TD VALIGN=TOP>верх,</TD>
<TD VALIGN=MIDDLE>середина,</TD>
<TD VALIGN=BOTTOM>низ.</TD>
</TR>
<TR VALIGN=TOP>
<TD> VALIGN=ТОР Вирівнює вміст осередку по її верхній межі.
</TD>
<TD>верх,</TD>
<TD>верх,</TD>
<TD>верх.</TD>
</TR>
<TR VALIGN=middle>
<TD> VALIGN=МIDDLE Центрує вміст осередку по вертикалі.
</TD>
<TD>середина,</TD>
<TD>середина,</TD>
<TD>середина.</TD>
</TR>
<TR VALIGN=bottom>
<TD> VALIGN=ВОТТОМ Вирівнює вміст осередку по її нижній межі.
</TD>
<TD>низ,</TD>
<TD>низ,</TD>
<TD>низ.</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Атрибут Воrder=
У тезі <Тавlе> часто визначають, як виглядатимуть рамки, тобто лінії, навколишні елементи таблиці і саму таблицю. Якщо ви не задасте рамку, то отримаєте таблицю без ліній, але порожній простір для них буде відведений. Того ж результату можна добитися, задавши <Тавlе Воrder=0>. Іноді хочеться зробити межу товстіше, щоб вона краще виділялася. Можна для залучення уваги до малюнка або тексту задати виключно жирні межі. При створенні вкладених таблиць доводиться робити межі різної товщини для різних таблиць, щоб їх легко було розрізняти.
Атрибут Сеllspacing=
Атрибут Сеllspacing= визначає в пікселях ширину проміжків між осередками. Якщо цей атрибут не заданий, за умовчанням задається величина, рівна двом пікселям. Атрибут Сеllspasing= можна використовувати, щоб помістити текст і графіку безпосередньо там, де вам потрібно. Якщо ви хочете залишити порожнє місце, можна вписати в осередок пропуск. Приклад 10:
<HTML>
<BODY>
<CENTER>
<TABLE BORDER CELLSPACING=20>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE CELLSPACING=20>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE CELLSPACING=0>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD></TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
ПРАКТИЧНА ЧАСТИНА
1.Завантажити програми Блокнот і Internet Explorer. Відкрийте свій HTML-файл.
2.Завантажити програму Paint. Створіть на полотні розміром 190 на 230 пікселей кольоровий малюнок. Збережіть його як «Ваше_ім’я.jpg» у папці, що й Ваш HTML-файл. Закрийте програму Paint.
3.Створіть HTML-код, у результаті якого броузер покаже таблицю шириною в 90% сторінки, у три рядки й три стовпця, з обрамленням синього кольору, кожна клітина таблиці має бути різного кольору. Середній осередок першого рядка повинен містити ваш малюнок «Ваше_Прізвище.jpg» з «підказкою» «Мій малюнок». Інші осередки повинні містити вирівняний по зовнішній межі таблиці довільний текст. Завантажити збережений файл у броузері.
Побудувати таблиці наступного вигляду:
-
Ячейка 1
Ячейка2
Ячейка 3
Ячейка 4
-
TopLeft
TopRight
BottomLeft
BottomRight
-
A
B
C
D
E
F
G
H
-
A
B
C
D
E
F
G
Товар |
цена |
|
1 – 9 шт. |
Опт |
|
Корзина печенья |
99 |
1000 |
Бочка меда |
5000 |
50000 |
Ложка дегтя |
3,00 |
380,00 |
