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

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

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

• align – вирівнює вміст у комірках. Вводиться в теги <ТR> або <TD>. Цей атрибут може набувати значень: left, right, center і justifу (вирівнювання по ширині).

• valign – вирівнює вміст по вертикалі. Цей атрибут застосовується з такими значеннями:

top – вирівнювання по верхньому краю комірок;

bottom – по нижньому краю;

middle – центрування по вертикалі.

Наприклад, <TR valign= "middle"> призначає центрування вмісту комірки по вертикалі.

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

Колір таблиць визначається такими атрибутами:

• bgcolor – колір фону в таблиці.

• bordercolor – колір рамок таблиці.

Залежно від того, до якого тегу (<TABLE>, <TR>, <TH> або <TD>) вводиться атрибут, задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних.

Наприклад,

<TABLE bgcolor="red"> - призначає червоний фон всієї таблиці;

<ТD bgcolor="yellow"> - задає жовтий фон комірки даних;

<TR bordercolor="FF0000"> - задає червоні межі всіх комірок рядка.

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

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

• rowspan – об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок.

• сolspan – об'єднує комірки суміжних стовпців.

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

Наприклад:

<TD rowspan=2> - встановлює об'єднання двох комірок із суміжних рядків;

<TD colspan=3> - формує одну комірку даних із трьох комірок суміжних стовпців;

<TD rowspan=2 colspan=4> - задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

Хід роботи

1. У текстовому редакторі Блокнот набрати запропонований текст для створення таблиці.

<HTML>

<HEAD>

<TITLE> Телефони </TITLE>

</HEAD>

<BODY>

<TABLE>

<TR> <TH>Прізвище, ім'я </TH> <TH> Телефон </TH> </TR>

<TR> <TD>Андреєва Інна </TD> <TD>626262</TD> </TR>

<TR> <TD>Борисенко Ольга </TD> <TD>122115</TD> </TR>

<TR> <TD>Вакуленко Світлана </TD> <TD>262445</TD> </TR>

</TABLE>

</BODY>

</HTML>

2. Зберегти файл, вказавши назву таблиця.html в своїй папці. Відкрити створену Web-сторінку у броузері Internet Explorer.

3. В HTML-код сторінки в відповідні теги додати атрибути для зміни параметрів таблиці:

1. встановити ширину таблиці у вікні броузера 50%;

2. встановити товщину меж таблиці 6 пікселів;

3. рядок заголовку виділити будь-яким кольором;

4. змінити колір меж рядків таблиці;

5. в ирівняти вміст другого стовпця по центру.

Результат зміни параметрів показано на малюнку.

4. Використовуючи атрибути рядків та стовпців таблиці, об’єднання комірок та задання кольору, створити Web-сторінку для відображення результатів предметних олімпіад (див. мал.).