5. Основні атрибути таблиці

За допомогою атрибута WIDTH= можна встановлювати будь-яку бажану ширину таблиці. Наприклад, якщо ми напишемо

<TABLE WIDTH="50" BORDER="2">

то браузер відобразить таблицю шириною в 50 пікселів. При цьому у фразі Це вже таблиця! останнє слово, швидше за все, не поміститься в довжину таблиці й автоматично перенесеться на інший рядок. А якщо встановити WIDTH="50%", то таблиця розтягнеться на половину ширини вікна браузера.

Існує спеціальний атрибут — CELLPADDING=. Його значення визначає, на скільки крапок текст буде відступати від краю комірки (від будь-якого краю!). Для кращої ілюстрації цього атрибута виберемо в якості його значення яке-небудь велике число наприклад, 20:

<TABLE WIDTH="50%" BORDER="2" CELLPADDING="20">

<TR>

<TD> Це вже таблиця! </TD>

</TR>

</TABLE>

Величину CELLPADDING= установлюють приблизно рівною 3-5 крапок, щоб просто небагато відступити від краю комірки.

Крім того, є ще атрибут CELLSPACING=, який задає відстань між комірками таблиці. У цьому випадку ми можемо побачити дію цього атрибута по зміні відстані між границями нашої єдиної комірки й рамки таблиці. Зробимо товщину табличної рамки побільше:

<TABLE WIDTH="50%" BORDER="2" CELLSPACING="6" CELLPADDING="20"> <TR>

<TD> Це вже таблиця! </TD>

</TR>

</TABLE>

Атрибут BORDERCOLOR= задає колір рамки. Замість одного атрибута BORDERCOLOR= рекомендується вживати два: BORDERCOLORLIGHT= і BORDERCOLORDARK=, що задають колір, відповідно, світлої й темної сторін рамки. Ці атрибути підтримуються тільки браузером Internet Explorer.

Приклад:

<TABLE WIDTH="50%" BORDER="2" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime" BORDERCOLORDARK="green">

<TR>

<TD> Це вже таблиця! </TD>

</TR>

</TABLE>

Колір фону таблиці (або окремих її елементів, таких як стовпці або рядки) можна задати за допомогою атрибута BGCOLOR=.

Приклад:

<TABLE WIDTH="50%" BORDER="2" CELLSPACING="1" CELLPADDING="5" bgcolor="#00CC99">

<TR>

<TD align="center"> Це вже таблиця! </TD>

</TR>

</TABLE>

Щоб вирівняти таблицю по центру або правому краю (усю таблицю відносно "аркуша" браузера), можна встановити в тезі <TABLE> атрибут ALIGN=. Проілюструємо це та додамо ще одну комірку в нашу таблицю:

<TABLE WIDTH="75%" BORDER="2" CELLSPACING="1" CELLPADDING="5"

bgcolor="#00CC99" align="center">

<TR>

<TD> Це перший стовпчик у першому рядку! </TD>

<TD> Це другий стовпчик у першому рядку! </TD>

</TR>

</TABLE>

Додамо ще один рядок:

<TABLE WIDTH="85%" BORDER="2" CELLSPACING="1" CELLPADDING="5" bgcolor="#00CC99" align="center">

<TR>

<TD> Це перший стовпчик у першому рядку! </TD>

<TD> Це другий стовпчик у першому рядку! </TD>

</TR>

<TR>

<TD>Це перший стовпчик у другому рядку!</TD>

</TR>

</TABLE>

Оскільки в другому рядку всього одна комірка, на місці відсутньої другої комірки другого рядка залишився порожній простір. Іноді це буває корисно, але частіше потрібно залишити порожню рамку незаповненої комірки. Якщо ми просто додамо в таблицю пари тегів <TD> </TD>, то нічого не зміниться — навколо порожньої комірки рамка не відображається! Додавання пробілу між тегами комірки також нічого не дає, оскільки в HTML зайві пробіли ігноруються... Звичайно в комірку, що пустує ( тобто в контейнер <TD></TD>) поміщають "щось" невидиме для ока, але "видиме" для браузера. Як правило - це або прозора картинка у форматі .gif розміром 1x1 або символ нерозривного пробілу   .

Ми розглядали тільки атрибути тегу <TABLE>. Однак теги <TR> і <TD> теж можуть мати власні атрибути, такі, як BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK= і ALIGN=. Їхні значення поширюються тільки на один рядок або комірку таблиці. Крім того, є атрибут VALIGN=, за допомогою якого можна управляти вертикальним вирівнюванням тексту рядка або комірки. Цей атрибут може приймати значення top (вирівняти по верхньому краю), middle ( по середині) і bottom ( по нижньому краю). Крім того, у деяких браузерах, підтримується також атрибут NOWRAP, що забороняє перенос тексту комірки на наступний рядок.