§ 4. Робота з таблицями

 

У цьому параграфі ви вивчите:

•  створення таблиць у Web -документах;

•  форматування таблиць;

•  об'єднання комірок у таблицях.

 

Таблиці у Web -документах застосовуються не тільки для розміщення табличних даних, а й для вставки зображень і посилань, для раціонального компонування Web -сторінок.

 

Елементи таблиці

Таблиці будуються за принципом вкладення і вводяться на Web -сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE>...</TABLE> можуть вставлятися такі елементи:

•  TR - елемент створення рядка;

•  TD — елемент, що визначає вміст комірки даних;

•  ТН - елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3x2 використовується такий шаблон:

<TABLE>

<TR><TD>. . .</TD><TD >. . .</TD></TR>

<TR><TD >. . .</TD><TD >. . .</TD></TR>

<TR><TD>. . .</TD><TD >. . .</TD></TR>

</TABLE>

де крапками позначений вміст кожної комірки. Усередині тегів першого рядка <TR>. . . </TR> замість елементів TD можуть розміщатися заголовки кожного стовпця - елементи TH. Побудуйте за цим шаблоном таблицю телефонів ваших друзів:

<TABLE border >

<TABLE border> <TR><TH>Прізвище, ім'я</TH><TH>Teлeфoн</TH></TR> <TR><TD>Aвдеенко Маша </TD><TD>233-15-63 </TD></TR> <TR><TD>Веднеева Катя</TD><TD>236-55-91 </TD></TR> <TR><TD>Борисов Олег</TD><TD>446-21-67 </TD></TR> <TR><TD>Григоренко Андрей</TD><TD>225-22-88 </TD></TR>

</TABLE>

Тут у тег <TABLE> введено атрибут border, що задає зовнішню і внутрішні рамки таблиці завтовшки в 1 піксел. Таблиця на Web -сторінці матиме вигляд, показаний на мал. 76.1.

Задания параметрів таблиці

Розгляньте отриману таблицю (мал.76. 1). Вона має ширину стовпців, яка дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна броузера, а її вміст відображається гарнітурою Times New Roman . Текст в комірках заголовка вирівнюється по центру, а в інших комірках - по лівій межі. Щоб змінити ці установки за умовчанням, використовують різні атрибути.

 

Атрибути елемента table

• width - задає ширину таблиці. Його значення виражається у пікселах або у відсотках (від повної ширини вікна броузера). Наприклад, тег < TABLE width ="40%"> задає таблицю з довжиною всіх рядків, що дорівнює 40% від ширини вікна. Краще задавати ширину у відсотках, тому що таблиці цілком відображаються у вікні броузера (без прокручування).

• align - задає вирівнювання таблиці у документі. Цей атрибут може набувати одне із значень: left (розміщення таблиці уздовж лівого краю документа), center (по центру документа) і right (уздовж правого краю).

• border - це вже відомий вам атрибут, що задає вивід рамок таблиці. Якщо значення цього атрибута не визначено, наприклад, < TABLE border >, усі рамки матимуть товщину 1 піксел. Якщо ж значення задане (наприклад, border =5) , то товщина 5 пікселів буде тільки для зовнішньої рамки. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселу.

 

Атрибути елементів рядків і стовпців

Розглянуті вище атрибути стосуються таблиці в цілому. Зупинимося на атрибутах, що дозволяють задати визначене форматування для комірок рядка.

• width і height - установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах <TR>, <TD>.

• align - вирівнюють вміст у комірках і вводиться в теги <TR> або <TD>. Цей атрибут може набувати значень: left , right , center і justify (вирівнювання по лівому і правому краях).

• valign - вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі). Наприклад, <TR valign ="middle"> призначає центрування по вертикалі

 

Колір у таблицях

Наведемо атрибути, що визначають колір таблиць.

• bgcolor - колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (<TABLE>, <TR>, <ТН> або <TD>), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних. Наприклад, тег <table bgcolor = "red"> призначає червоний фон всієї таблиці, а тег <td bgcolor ="yellow"> задає жовтий фон комірки даних.

• bordercolor - колір рамок таблиці. Якщо атрибут bordercolor вставити в тег <TABLE>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border . Якщо ж потрібно задати колір лише ви­значених комірок, атрибут bordercolor розташовуємо в тегах <TR>, <ТН> або <TD>. наприклад, тег <TR bordercolor = "FF0000"> задає червоні межі всіх комірок рядка.

 

Об'єднання комірок таблиці

У мові HTML передбачена можливість об'єднання суміжних комірок. Для цього в початкових тегах <ТН> або <TD> застосовуються такі атрибути.

• rowspan - об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок. Наприклад, початковий тег комірки < TD rowspan =2> встановлює об'єднання двох комірок із суміжних рядків.

• col span - об'єднує комірки суміжних стовпців. Наприклад, <TD colspan =3> формує одну комірку даних із трьох комірок суміжних стовпців.

Якщо застосувати водночас обидва атрибути rowspan і colspan , отримаємо об'єднану комірку із суміжних рядків і стовпців. Наприклад, тег

<TD rowspan =2 colspan =4>

задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

Розглянемо приклад HTML -документа з таблицею результатів олімпіад, проведених у школі.

<HTML> <HEAD>

<TITLE>06'єднання комірок</TITLE> </HEAD> <BODY>

<H2>Результати шкільних олімпіад</H2>

<TABLE border>

<TR><TH>Учасник</TH><TH>Предмет</TH>

<TH>Очко</TH></TR> <TR><TD rowspan =4> Kлac 8-А</TD><TD>Математика</TD>

<TD>114</TD></TR> <TR><TD>Фізика</TD><TD>81</TD></TR> <TR><TD>Xiмiя </TD><TD>71</TD></TR> <TR><TD colspan =2>

<I>3агальний бал: 266</I></TD></TR> <TR><TD rowspan =4> Kлac 8-Б</TD><TD>Математика</TD>

<TD>157</TD></TR> <TR><TD>Фізика</TD><TD>79</TD></TR> <TR><TD>Xiмiя </TD><TD>101</TD></TR> <TR><TD colspan =2>

<I>3агальний бал: 337</I></TD></TR>

</TABLE>

</BODY>

</HTML>

На мал. 76.2 подано зображення цього документа в броузері Internet Ехрlorer. Таблиця має дві об'єднані комірки «Клас 8-А» і «Клас 8-Б», що отримані із суміжних комірок одного стовпця. Є також дві комірки «Загальний бал... », отримані об'єднанням двох суміжних комірок одного рядка.

 

Контрольні запитання

• Назвіть HTML -елементи, за до помогою яких створюються таблиці.

• Які параметри таблиці прийняті за умовчанням?

• Як вставити в Web -документ таблицю 3*3? Запишіть HTML -код.

• Як задати ширину таблиці?

• Як вирівняти таблицю по центру документа, по правому краю?

• Якими атрибутами задаються товщина і колір рамок таблиці?

• Як задати заливання комірок рядка визначеним кольором?

• Запишіть значення атрибутів для вирівнювання вмісту комірок по правому і верхньому краях.

• За допомогою яких атрибутів виконується об'єднання комірок таблиці?