Лабораторна робота № 4. Тема: Розробка web-сайту використовуючи таблиці

Тема: Розробка 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>?

 



Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: