metoda / Metod_sam_IT_ta_tehnol_Internet_2010_ukr

8 Приклади розв'язання типових задач

Створити таблицю за допомогою HTML.

Для опису таблиць використовується тег <ТАВLЕ>. Він, як і багато інших, автоматично переводить рядок до й після таблиці.

Створення рядка таблиці – тег <ТR>. Тег <ТR> (Таble Row, рядок таблиці) створює рядок таблиці. Весь текст, інші теги й атрибути, які потрібно помістити в один рядок, мають розміщуватися між тегами <ТR></ТR>.

Визначення комірок таблиці – тег <ТD>. Усередині рядка таблиці звичайно розміщуються комірки з даними. Кожна комірка, що містить текст або зображення, має бути оточена тегами <ТD></ТD>. Кількість тегів <ТD></ТD> у рядку визначає кількість комірок (рис.8.1).

<HTML>

<BODY>

<H1 ALIGN=center>Таблиця</H1>

<TR>

<TD COLSPAN=3>Якщо в таблиці два тега TR, то в ній два рядки.</TD>

</TR>

<TR>

<TD> Якщо в рядку три тега TD,</TD>

<TD> три стовпці.</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Рисунок 8.1 –Використання таблиць у дизайні

Заголовки стовпців таблиці – тег <ТН>. Заголовки для стовпців і рядків таблиці задаються за допомогою тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблиці). Ці теги подібні <ТD></ТD>. Відмінність полягає в тому, що текст, укладений між тегами <ТН></ТН>, автоматично записується жирним шрифтом і за замовчуванням розташовується всередині комірки. Центрування можна скасувати й вирівняти текст по лівому або правому краї. Якщо скористатися <ТD></ТD> з тегом <В> і атрибутом <АLIGN=center>, текст також виглядатиме як заголовок. Однак варто мати на увазі, що не всі браузери підтримують у таблицях жирний шрифт, тому краще задавати заголовки таблиць за допомогою <ТН>.

<HTML>

<BODY>

<TR>

<TH> Заголовок центрований за замовчуванням </TH>

<TH COLSPAN=2> Заголовок може об'єднувати стовпці

</TH>

</TR>

<TR>

<TH> Заголовок може бути розташований перед стовпцями </TH>

<TD> Текст або дані </TD>

</TR>

<TR>

<TH ROWSPAN=3> Заголовок може об'єднувати рядки

</TH>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Використання заголовків таблиці – тег <САРТIО>. Тег <CAPTION> дозволяє створювати заголовки таблиці. За замовчуванням заголовки центруються й розміщуються або над (<САРТION АLIGN=top>), або під таблицею (<САРТION ALIGN=bottom>). Заголовок може складатися з будь-якого тексту й зображень. Текст буде розбитий на рядки, що відповідають ширині таблиці. Іноді тег <САРТION> використовується для підпису під рисунком. Для цього досить описати таблицю без меж.

<HTML>

<BODY>

<CAPTION ALIGN=top> Заголовок над таблицею

</CAPTION>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

<CAPTION ALIGN=bottom> Заголовок над таблицею

</CAPTION>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут NOWRAP. Звичайно будь-який текст, що не міститься в один рядок комірки таблиці, переходить на наступний рядок. Однак при використанні атрибута NOWRAP з тегами <ТН> або <ТD> довжина комірки розширюється настільки, щоб розміщенний у ній текст помістився в один рядок.

Атрибут СОLSPAN. Теги <ТD> і <ТН> модифікуються за допомогою атрибута СОLSPAN (Column Span, з'єднання стовпців). Якщо ви хочете зробити яку-небудь комірку ширше, ніж верхня або нижня, можна скористатися атрибутом СОLSPAN, щоб розтягти її над будь-якою кількістю звичайних комірок.

<HTML>

<BODY>

<TR>

<TD> Якщо ви хочете зробити яку-небудь клітинку ширше, ніж верхня або нижня, </TD>

<TD> можна скористатися атрибутом СОLSPAN=2,

</TD> </TR> <TR>

<TD BGCOLOR=white COLSPAN=2> щоб розтягнути її над будь-якою кількістю звичайних осередків.</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибут ROWSPAN. Атрибут ROWSPAN, використовуваний у тегах <ТD> і <ТН>, подібний до атрибута СОLSPAN=, тільки він задає кількість рядків, на які розтягується комірка. Якщо ви вказали в атрибуті ROWSPAN=s кількість, більше одиниці, то відповідна кількість рядків має перебувати під коміркою, що розтягується. Унизу таблиці її помістити не можна.

Атрибут WIDТН. Атрибут WIDТН застосовується у двох випадках. Можна помістити його в тег <ТАВLЕ>, щоб дати ширину всієї таблиці, а можна використовувати в тегах <ТD> або <ТН>, щоб задати ширину комірці або групи комірок. Ширину можна вказувати в пікселях або у відсотках. Наприклад, якщо ви задали в тегу <ТАВLЕ> WIDTH=250, ви одержите таблицю шириною 250 пікселів незалежно від розміру сторінки на моніторі. При заданні WIDТН=50% у тегу <ТАВLЕ> таблиця займатиме половину ширини сторінки при будь-якому розмірі зображення на екрані. Тому, указуючи ширину таблиці у відсотках, майте на увазі, що якщо в користувача вузька область перегляду, ваша сторінка може виглядати трохи дивно. Якщо ви користуєтеся пікселями, і таблиця виявляється ширше області перегляду, унизу з'явиться смуга прокручування для переміщення вправо й уліво сторінкою. Залежно від поставлених завдань ці способи задання ширини таблиці можуть виявитися корисним.

<HTML>

<BODY>

<TR>

<TD ALIGN=center> ширина 100%</TD> </TR>

</TABLE> або <BR>

<TD ALIGN=center>ширина 50%</TD> </TR>

</TABLE> або <BR>

<TD ALIGN=center> ширина 200 пікселів</TD> </TR>

</TABLE>

або <BR>

<TD ALIGN=center> ширина 100 пікселів </TD>

</TR>

</TABLE>

</BODY> </HTML>

Застосування порожніх комірок. Якщо комірка не містить даних, вона не матиме меж. Якщо потрібно, щоб в комірці були межі, але не було вмісту, необхідно помістити в неї щось таке, що не буде видно при перегляді. Можна скористатися порожнім рядком <ВR>. Можна навіть задати порожні стовпці, визначивши їхню ширину в пікселях або відносних одиницях і не ввівши в отримані комірки ніяких даних. Цей спосіб може виявитися корисним при розміщенні на сторінці тексту й графіки.

Атрибут СЕLLРАDDING. Даний атрибут визначає ширину порожнього простору між вмістом комірки і її меж, тобто задає поля усередині комірки.

<HTML>

<BODY>

<TR>

<TD>Текст або дані </TD>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

<BR>

<TR>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибути АLIGN і VALIGN. Теги <ТR>, <ТD> і <ТН> можна модифікувати за допомогою атрибутів ALIGN і VALIGN. Атрибут АLIGN визначає вирівнювання тексту й графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання можна задати декількома способами:

ALIGN=blееdleft – притискає вміст комірки впритул до лівого краю.

ALIGN=left – вирівнює вміст комірки по лівому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

АLIGN=сеnter розташовує вміст комірка по центру.

АLIGN=right – вирівнює вміст комірки по правому краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

<HTML>

<BODY>

<TR>

<TD ALIGN=left> Текст або дані </TD>

<TD ALIGN=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>

</TR>

<TR>

<TD ALIGN=center> Текст або дані </TD>

</TR>

<TR>

<TD ALIGN=left> Текст або дані </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут VALIGN здійснює вирівнювання тексту й графіки усередині комірки по вертикалі. Вертикальне вирівнювання можна задати декількома способами:

VALIGN=top вирівнює вміст комірки по її верхній межі.

VALIGN=middle центрує вміст комірки по вертикалі.

VALIGN=bottom вирівнює вміст комірки по її нижній межі.

<HTML>

<BODY>

<TR>

<TD WIDTH=100>Атрибут VALIGN здійснює вирівнювання тексту й графіки усередині комірки по вертикалі</TD>

<TD VALIGN=middle>середина,</TD>

<TD> VALIGN=top Вирівнює вміст комірки по її верхній межі .</TD>

<TD>VALIGN=middle Центрує вміст комірки по вертикалі.</TD>

<TD>середина,</TD>

<TD>середина.</TD> </TR>

<TD>VALIGN=bottom Вирівнює вміст комірки по її нижній межі .</TD>

</TABLE>

</CENTER> </BODY> </HTML>

Атрибут BORDER. У тегу <ТАВLЕ> часто визначають, як виглядатимуть рамки, тобто лінії, що оточують комірки таблиці й саму таблицю. Якщо ви не задасте рамку, то одержите таблицю без ліній, але простір під них буде відведено. Того ж результату можна домогтися, задавши <ТАВLЕ ВОRDER=0>. Іноді хочеться зробити межу ширше, щоб вона краще виділялася. Можна для привернення уваги до рисунка або тексту задати винятково жирні межі. При створенні вкладених таблиць доводиться робити для різних таблиць межі різної товщини, щоб їх легше було розрізняти.

Атрибут CELLSPACING. Атрибут СЕLLSPACING визначає ширину проміжків між комірками в пікселях. Якщо цей атрибут не зазначений, за замовчуванням задається величина, рівна двом пікселям. За допомогою атрибута СЕLLSPACING= можна розміщати текст і графіку там, де вам потрібно. Якщо ви хочете залишити порожнє місце, можна вписати в комірку пробіл.

<HTML>

<BODY>

<TR>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

<TR>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

</TR>

</TABLE>

<TR>

<TD> Текст або дані </TD>

</TR>

<TR>

<TD> Текст або дані </TD>

<TD> Текст або дані </TD> </TR>

</TABLE>

</CENTER>

</BODY> </HTML>

Атрибут BGCOLOR. Даний атрибут дозволяє встановити колір тла. Залежно від того, з яким тегом (TABLE, TR, TD) він застосовується, колір тла можна встановити для всієї таблиці, для рядка або для окремоі комірки. Значенням даного атрибута є RGB-код або стандартна назва кольору.

<HTML>

<BODY>

<TD> Текст або дані </TD>

<TD BGCOLOR=red> Текст або дані </TD>

<TD> Текст або дані </TD> </TR>

<TD> Текст або дані </TD>

<TD BGCOLOR=lime> Текст або дані </TD> </TR>

</TABLE> </CENTER>

</BODY> </HTML>

Содержание