Тема: Розробка web-сайту використовуючи таблиці.
Мета: Навчити створювати таблиці у веб-документі.
ТЕОРЕТИЧНІ ВІДОМОСТІ
HTML ТАБЛИЦІ
Таблиці в HTML організуються як набір стовпців і рядків. Таблиці можуть містити будь-які HTML-елементи, такі, як заголовки, списки, абзаци, фігури, графіку, а також елементи форм.
ОСНОВНІ ТЕГИ ТАБЛИЦІ
Таблиця: <TABLE>...</TABLE>
Це основні теги, що описують таблицю. Всі елементи таблиці повинні перебувати усередині цих двох тегів. За замовчуванням таблиця не має обрамлення й роздільників. Обрамлення додається атрибутом BORDER.
Рядок таблиці: <TR>...</TR>
Кількість рядків таблиці визначається кількістю пар, що зустрічаються, тігов <TR>..</TR>. Рядка можуть мати атрибути ALIGN й VALIGN, які описують візуальне положення вмісту рядків у таблиці.
Осередок таблиці: <TD>...</TD>
Описує стандартний осередок таблиці. Осередок таблиці може бути описана тільки усередині рядка таблиці. Кожен осередок повинна бути пронумерована номером колонки, для якої вона описується. Якщо в рядку відсутні одна або кілька осередків для деяких колонок, то броузер відображає порожній осередок. Розташування даних в осередку за замовчуванням визначається атрибутами ALIGN=left й VALIGN=middle. Дане розташування може бути виправлене як на рівні опису рядка, так і на рівні опису осередку.
|
|
Заголовок таблиці: <TH>...</TH>
Осередок заголовка таблиці має ширину всієї таблиці; текст у даному осередку має атрибут BOLD й ALIGN=center.
Підпис: <CAPTION>...</CAPTION>
Даний тег описує назва таблиці (підпис). Тег <CAPTION> повинен бути присутнім усередині <TABLE>...</TABLE>, але зовні опису якого-небудь рядка або осередку. За замовчуванням <CAPTION> має атрибут ALIGN=top, але може бути явно встановлений в ALIGN=bottom. ALIGN визначають, де - зверху або знизу таблиці - буде поставлений підпис. Підпис завжди центрований у рамках ширини таблиці.
ОСНОВНІ АТРИБУТИ ТАБЛИЦІ
BORDER
Даний атрибут використається в тезі TABLE. Якщо даний атрибут присутній, границя таблиці прорисовується для всіх осередків і для таблиці в цілому. BORDER може приймати числове значення, що визначає ширину границі, наприклад BORDER=3.
ALIGN
Якщо атрибут ALIGN є присутнім усередині тегів <CAPTION> й </CAPTION>, то він визначає положення підпису для таблиці (зверху або знизу). За замовчуванням ALIGN=top.
Якщо атрибут ALIGN зустрічається усередині <TR>, <TH> або <TD>, він управляє положенням даних в осередках по горизонталі. Може приймати значення left (ліворуч), right (праворуч) або center (по центрі).
VALIGN
Даний атрибут зустрічається усередині тегіов <TR>, <TH> й <TD>. Він визначає вертикальне розміщення даних в осередках. Може приймати значення top (угорі), bottom (унизу), middle (по середині) і baseline (всі осередки рядка притиснуті догори).
|
|
NOWRAP
Даний атрибут говорить про те, що дані в осередку не можуть логічно розбиватися на кілька рядків і повинні бути представлені одним рядком.
COLSPAN
Указує, яке кількість осередків буде об'єднано по горизонталі для зазначеного осередку. По умовчанні - 1.
ROWSPAN
Указує, яке кількість осередків буде об'єднано по вертикалі для зазначеного осередку. По умовчанні - 1.
COLSPEC
Даний параметр дозволяє задавати фіксовану ширину колонок або в символах, або у відсотках, наприклад COLSPEC="20%".
Приклад таблиці
<TABLE BORDER=0 WIDTH=100% CELLSPACING=1 CELLPADDING=5 BGCOLOR=yellow>
<TR BGCOLOR=blue >
<TD>Україна</TD>
<TD>Росія</TD>
</TR>
<TR BGCOLOR=white>
<TD>Локомотив</TD>
Україна | Росія |
Арсенал | ЦСКА |
<TD>Арсенал</TD>
</TR>
</TABLE>
Результат:
Приклад веб-сторінки
ЗАВДАННЯ
Створити сторінку з використанням таблиці за прикладом.
КОНТРОЛЬНІ ПИТАННЯ
1. Вкажіть основні атрибути таблиці.
2. Яка дія атрибуту nowrap?
3. Вкажіть основні теги таблиці.
4. Яка дія тегу <th>?