Створення таблиць

Таблиці дозволяють більш ефективно розмістити на Web сторінці текст і графіку. Вони використовуються також для представлення інформації у виді логічної схеми, що значно спрощує її пошук. В HTML-таблицях може міститись інформація любого виду. З їх допомогою можна створити чітку структуру матеріалу на Web сторінці. Тому таблиці дуже часто використовуються як інструмент макетування для якісного форматування сторінки а також це практично єдиний засіб замальовки всієї таблиці або її окремих частин кольором. Весь цифровий матеріал, поданий на сторінці, як правило, може бути оформлений у вигляді таблиць. Таблиця складається з рядків і стовпців (див. рис. 4.6).

Рис. 4.6. Структура побудови таблиці

Кожна таблиця (якщо вона подана в явному виді, а не як інструмент форматування) повинна мати назву, яку розміщують над таблицею і друкують симетрично до тексту. Назву і слово "Таблиця" починають з великої літери. Назву не підкреслюють. Заголовок граф повинні починатися з великих літер, підзаголовки - з маленьких, якщо вони складають одне речення із заголовком, і з великих, якщо вони є самостійними. Висота рядків повинна бути не меншою 8 мм. Графу з порядковими номерами рядків до таблиці включати не треба.

Код таблиці в HTML міститься в контейнері <TABLE>. Дескриптори <TR>… </TR> описують один рядок, а за допомогою дескрипторів <TD> - комірку таблиці з даними та <TH> - комірка заголовку таблиці. Максимальна кількість комірок в таблиці не може перевищувати добутку кількості рядків на кількість стовпців. Закриваючі дескриптори </TD> та </TH> можуть не використовуватись якщо є в кінці опису рядка є закриваючий дескриптор </TR>. Всі рядки повинні містити однакову кількість комірок. Виключенням може бути об’єднання за допомогою атрибуту COLSPAN=? декількох комірок сусідніх стовпців в одну, а за допомогою атрибуту ROWSPAN=? – декількох комірок сусідніх рядків (де? – кількість об’єднаних елементів). Ці атрибути описуються всередині дескрипторів <TD> та <TH>.

Рис. 4.7. Лістинг програми таблиці з об’єднанням комірок (рядків і стовпців)

Рис. 4.8. Приклад побудови таблиці з об’єднанням комірок (рядків і стовпців)

З цього прикладу видно, що функція об’єднання комірок описується в описі першої коміри зліва (для рядків) та в першій комірці зверху (для стовпців) а опис використаних для об’єднання інших комірок не проводиться (просто ігнорується). Дескриптор <TH> на відміну від дескриптора <TD> виділяє і центрує вміст контейнера.

Найбільш широко вживані дескриптори і атрибути табличних дескрипторів:

• Визначити таблицю <TABLE>…</TABLE>;
• Окантовка (рамка) таблиці <table border=?>...</TABLE>;
• Відстань між комірками <TABLE CELLSPACING=?>;
• Доповнення комірками <TABLE CELLPADDING=?>;
• Бажана ширина <TABLE WIDTH=?> (у пікселях - формат абсолютного розміру таблиці);
• Ширина у відсотках <TABLE WIDTH="%"> (відсотки від ширини сторінки - формат відносного розміру таблиці);
• Рядок таблиці <TR>...</TR>;
• Вирівнювання <TR ALIGN=LEFT| RIGHT |CENTER| MIDDLE| BOTTOM>;
• Комірка таблиці <TD>...</TD> (повинна бути всередині рядка);
• Заголовок таблиці <TH>...</TH> (як дані, але жирний шрифт і центрування);
• Вирівнювання по горизонталі та по вертикалі (VALIGN) <TD (<TH) ALIGN=LEFT| RIGHT| JUSTIFY| CENTER| MIDDLE| TOP| BOTTOM| CHAROFF> ALIGN=”CHAROFF” CHAROFF=х Вирівнювання по зміщенню на “ х ” символів;
• Без переходу на новий рядок <TD (<TH) NOWRAP>;
• Розтягування по стовпчику <TD (<TH) COLSPAN=?>;
• Розтягування по рядку <TD (<TH) ROWSPAN=?>;
• Бажана ширина <TD (<TH) WIDTH=?> (у пікселях);
• Ширина у відсотках <TD (<TH) WIDTH="%"> (відсотки від ширини сторінки);
• Колір рамки <TABLE BORDERCOLOR=”#$$$$$$” BORDERLIGHT=”#$$$$$$” Для зміни кольору всередині – <TD (<TR) BORDERCOLOR=”#$$$$$$”;
• Заголовок таблиці <CAPTION>...</CAPTION>;
• Вирівнювання <CAPTION ALIGN=TOP| BOTTOM> (зверху/знизу таблиці);

Вкладені таблиці

Створення вкладених таблиць – це приклад творчого підходу до питань макетування Web сторінки, це популярний метод використовується для організації на всій площині сторінки великої кількості різноманітних елементів (графіка, текст, списки і т.д.). Для цього необхідно визначити таблицю для всього вмісту сторінки з атрибутом WIDTH=100% без рамки в одній з комірок якої розмістити, наприклад, карту посилань, а в іншій комірці – вкладену таблицю з рамками для розміщення, наприклад, новин. Вкладена таблиця розміщується в середині контейнера <TD>:

Рис. 4.9. Лістинг програми вкладеної таблиці

Рис. 4.10. Приклад програми вкладеної таблиці

Але не забувайте, що і в одній таблиці можна розмістити різноманітні елементи Web сторінки в різних місцях робочого поля.

Рис. 4.11. Лістинг програми побудови таблиці з заданням кольору комірок

Рис. 4.12. Приклад побудови таблиці із заданням кольору комірок

Завдяки великій кількості властивостей комірок, можна змінювати вигляд і оформлення таблиць.

Дата добавления: 2015-08-18