Форматування тексту та оформлення рамок таблиці

Встановлення ширини таблиці та комірок

Розглянемо далі, як настроювати ширину всієї таблиці, а також окремих комірок. Зауважимо, що ширина всіх комірок в одному стовпці однакова, а в одному рядку може бути різною. Ширину таблиці задають атрибутом WIDTH у тегу < TABLE>, а комірки — за допомогою того самого атрибута у тегу < TD> або < ТН>. Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.

Приклад 2.6. HTML-документ, в якому задана ширина

таблиці та деяких комірок

< HTML>

< TITLE> Приклад встановлення ширини таблиці< /TITLE>

< BODY>

< TABLE BORDER=" 1" WIDTH=500>

< TR>

< TD ROWSPAN=" 2" WIDTH=50%> Класи< /TD>

< TD WIDTH=250> 10-A< /TD>

< /TR>

< TR>

< TD> 10-B< /TD>

< /TR>

< /TABLE>

< /BODY>

< /HTML>

Ha рис. 2.11 показано, який вигляд має цей документ у вікні браузера.

Рис. 2.11. Таблиця, ширину якої задано за допомогою атрибута WIDTH

Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом «Класи» становить 50 % від ширини всієї таблиці, а комірки з текстом «10-А» — 250 пікселів. Комірка з текстом «10-Б» теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.

Форматування тексту та оформлення рамок таблиці

Текст всередині комірок можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу < TR>; цей самий атрибут у тегах < TD> або < ТН> в окремих комірках виконує таку саму роль. Атрибут ALIGN може набувати значень center, right, lef t або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною.

Приклади тегів < TR> та < TD> із використанням вирівнювання:

< TR ALIGN=right>; < TD ALIGN=center> l. Алгебра< /TD>.

Вертикальне вирівнювання задають у тегах < TR>, < TD> або < ТН> за допомогою атрибута VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.

Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу < TABLE>. Його значення визначають, що браузер відображатиме:

• box — всі чотири сторони рамки;

• above — лише верхню межу рамки;

• below — лише нижню межу;

• lhs — лише ліву межу;

• rhs — лише праву межу;

• hside s — верхню й нижню межі рамки;

• vsides — ліву й праву межі рамки;

• void — зовнішня рамка не відображатиметься.

Відображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу < TABLE>.

Він може набувати таких значень:

• al l — відображати всі вертикальні та горизонтальні лінії;

4 rows — лише горизонтальні лінії між рядками;

• col s — лише вертикальні лінії між стовпцями;

• none — не показувати розділювальних ліній.