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

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

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

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

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

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

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

• bgcolor – задає колір фону. Цей атрибут можна застосовувати до тегів <TABLE>, <TR>, <TH> або <TD>. Наприклад, <TABLE bgcolor="red"> – створює червоний фон всієї таблиці, а тег <TD bgcolor="yellow"> – задає жовтий фон комірки.

• bordercolor - колір рамок таблиці. Цей атрибут діє лише в тому випадку, якщо таблиця має рамки. Наприклад, <TABLE border bordercolor=”red”>, де border – задає рамку таблиці шириною в 1 піксел, bordercolor - задає колір рамок таблиці червоним кольором.

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

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

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

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

ЗАВДАННЯ №2. Створіть файл ROWSPAN.HTM та побудуйте в ньому таблицю:

Код таблиці	Зображення в браузері
<TABLE> <TR><TD rowspan=2>1<TD>2 <TR><TD>3 </TABLE>	1 2 3

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

ЗАВДАННЯ №3. Створіть файл COLSPAN.HTM та побудуйте в ньому таблицю:

Код таблиці	Зображення в браузері
<TABLE> <TR><TD colspan=2>1 <TR><TD>2<TD>3 </TABLE>	1 2 3

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

ЗАВДАННЯ №4. Створіть файл TABLE2.HTM Побудуйте в ньому за цим шаблоном таблицю з об’єднаними комірками:

Код таблиці

Зображення в браузері

<H1> Результати шкільних олімпіад</H1> <TABLE border> <TR><TH>Учасник</TH><TH>Предмет</TH> <TH>Бали</TH></TR> <TR><TD rowspan=4>Клас 8-А</TD><TD>Математика</TD> <TD>114</TD></TR> <TR><TD>Фізика</TD><TD>81</TD></TR> <TR><TD>Хімія</TD><TD>71</TD></TR> <TR><TD colspan=2><i>Загальний бал: 266</i></TD></TR> <TR><TD rowspan=4>Клас 8-Б</TD><TD>Математика</TD> <TD>157</TD></TR> <TR><TD>Фізика</TD><TD>79</TD></TR> <TR><TD>Хімія</TD><TD>101</TD></TR> <TR><TD colspan=2><I>Загальний бал: 337</I></TD></TR> </TABLE>

ЗАВДАННЯ №5. Створіть файл TABLE3.HTM Побудуйте в ньому самостійно таблицю з об’єднаними комірками: