2.9. Таблиці

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

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

Перш ніж створювати таблиці, необхідно зрозуміти призначення відповідних дескрипторів. Тег <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і комірок, які задаються за допомогою тегів <tr> і <td>. Усередині <table> припустимо використовувати наступні елементи: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> [7].

Дескриптори <table> відкриваючий і </table> закриваючий визначають відповідно початок і кінець таблиці. У складі дескриптора <table> можуть бути наявні наступні уточнюючі атрибути:

• align="x" задає тип вирівнювання таблиці у документі. х приймає значення left, center або right. За замовчуванням браузер здійснює вирівнювання по лівій границі, для вирівнювання таблиці по центру використовуються також інші дескриптори, наприклад <div>

<table align="left | center | right">...</table>;

• border="x" - задає товщину рамки навколо таблиці й навколо комірок таблиці;

• cols="10" – цей параметр задає кількість стовпців у таблиці й дозволяє дещо прискорити відображення вмісту таблиці;

• cellspacing="x" - задає розмір інтервалу між комірками таблиці;

• cellpadding="x" - визначає розмір вільного простору між текстом у комірці й границями комірки;

• width="x%" або width="x" - визначає ширину таблиці, яку можна задати або у відсотках від поточної ширини вікна браузера, або в пікселях. При розробці Web-сторінок бажане задавати ширину таблиці у відсотках, оскільки це дозволяє узгодити розміри таблиці з розмірами вікна, у якому вона відображається.

Дескриптори <tr> відкриваючий і </tr> закриваючий описують рядок таблиці. У складі дескриптора <tr> можуть бути наявні наступні уточнюючі атрибути:

• align="x" – атрибут, який визначає тип горизонтального вирівнювання всіх даних у межах рядка;

• valign="x" – атрибут, який визначає тип вертикального вирівнювання всіх даних у межах рядка.

<td>...</td>

Дескриптори <td>...</td> визначають комірку таблиці. Можливі атрибути дескриптора наведені нижче:

• align="x" – атрибут, який управляє горизонтальним вирівнюванням даних у поточній комірці таблиці;

• height="x"– атрибут, який задає висоту поточної комірки в пікселях або у відсотках від висоти вікна браузера. Усі комірки в рядку таблиці повинні мати однакову висоту, тому значення атрибута height визначає висоту всього рядка. Різні браузери опрацьовують цей атрибут по-різному. Найчастіше висота всіх комірок встановлюється рівною висоті найбільшої комірки в рядку;

• width="x%" або width="x" – атрибут, який задає ширину комірки у відсотках або в пікселях від ширини таблиці. Усі комірки в стовпці таблиці повинні мати однакову ширину. Звичайно ширина всіх комірок у стовпці встановлюється рівною ширині найбільшої комірки. Якщо ширина комірки, що задана за допомогою атрибута width, виявляється меншою, ніж ширина, обчислена для інших комірок у стовпці, приймається більше значення;

• colspan="число" - атрибут може бути наявним у будь-якій комірці таблиці. Цей атрибут визначає, скільки стовпців повинна займати комірка. За замовчуванням приймається значення colspan рівне 1;

• rowspan="число" – атрибут, що вказує, скільки рядків повинна займати комірка. Значення атрибута rowspan за замовчуванням дорівнює 1. Якщо, згідно з атрибутом rowspan, число рядків, зайнятих коміркою, перевищує число рядків у таблиці, значення rowspan усікається.

Нижче наведено приклад використання тегу <table>:

Результат даного прикладу показаний на рис. 8.

Рис. 8. Застосування таблиць для створення макета сторінки