- •Тема 2 Структура й елементи гіпертекстових документів
- •Загальна характеристика і структура html-документа
- •2.Тіло документа та оформлення його основних фрагментів
- •2.1. Тіло документа
- •2.2. Теги логічного форматування тексту
- •2.3. Теги фізичного форматування тексту
- •3. Оформлення списків термінів і визначень
- •3.1. Марковані списки
- •3.2. Створення нумерованих списків
- •3.3. Списки визначень
- •3.4. Багаторівневі спискові структури
- •4. Використання графіки при оформленні електронного видання
- •5.Включення до видання посилань та коментарів
- •6. Оформлення таблиць
- •7.Фреймова структура електронного видання
- •8. Html-форми
- •9. Поняття про динамічний html і його компоненти
6. Оформлення таблиць
Таблиці досить широко застосовуються в електронній документації, причому для Web-сторінок вони використовуються не тільки в традиційному ссмислі, як метод впорядкованого подання даних, але і для форматування самих цих сторінок. Опис таблиці мовою HTML розміщується всередині тіла документа, тобто в контейнері <BODY> і </ BODY>. Усередині документа допускається будь-яке число таблиць, причому деякі з них можуть бути вкладеними. Кожна таблиця створюється в межах контейнера <ТАВLЕ> та </ ТАВLЕ>, де розміщується опис структури самої таблиці і її вміст.
Кожен рядок таблиці розміщується після тегу <TR> (Table Row). Кожна клітинка таблиці в межах рядка оформляється тегом <ТН> (Table Header) - для заголовної частини таблиці або <TD> (Table Data) - для комірок, у яких розміщуються дані. У заголовній частині за умовчанням застосовується напівжирний шрифт та вирівнювання по центру. Для відображення даних за умовчанням використовується нормальне (світле) накреслення і вирівнювання вліво. Можна відзначити, що для всіх тегів, названих у цьому абзаці, закриваючий тег не обов'язковий, тобто він може бути опущений.
Кількість рядків у таблиці визначається кількістю малих тегів <TR>, а число стовпців - максимальною кількістю тегів <ТН> або <TD> в одному з рядків. Рядком вважається все те, що йде після чергового тегу <TR> і до наступного такого тегу. Для комірки таблиці, що не містить даних, треба використовувати порожній контейнер <TD> і </ TD>. Якщо порожні клітинки розташовані в кінці рядка, то їх опис може бути опущено - браузер самостійно залишить необхідне число комірок порожніми.
Таблиця може мати назву - те, що в редакційній практиці називається тематичним заголовком (на відміну від нумераційного), причому якщо в друкованому виданні заголовок обов'язково розташований над таблицею, то в електронному він може бути розташований як зверху, так і знизу. Заголовок розташований всередині контейнера <CAPTION> і </ CAPTION>. Зазначений контейнер повинен бути поміщений всередину тег-контейнера <ТАВLЕ>, але поза областю опису тегів <TR>, <TH> або
<TD>. Остання специфікація HTML рекомендує розміщувати тег-контейнер <CAPTION> відразу після відкриття таблиці, тобто після тега <TABLE> і до першого тегу <TR>.
У тегові <CAPTION> спочатку був передбачений один необов'язковий параметр ALIGN, який призначався для вертикального вирівнювання і міг приймати одне з двох значень ТОР (за замовчуванням) або BOTTOM. Потім з'ясувалася необхідність і горизонтального вирівнювання стремено стандартними параметрами LEFT, RIGHT і CENTER. Проте не можна в одному тегу двічі використовувати один і той же параметр. Тому в сучасних версіях мови HTML параметр ALIGN (за замовчуванням ALIGN = LEFT) залишений для вирівнювання по горизонталі, а вертикальне вирівнювання (точніше - розміщення заголовка над або під таблицею) здійснюється за допомогою параметра VALIGN.
У тегові <TABLE> можуть використовуватися такі параметри: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN, HEIGHT і BACKGROUND. Параметр BORDER управляє відображенням рамки навколо кожної клітинки таблиці (тобто задає вертикальні і горизонтальні лінії сітки) і навколо всієї таблиці, причому його значення задає товщину рамки в пікселях навколо всієї таблиці, а сама наявність цього параметра задає лінії сітки. Значення параметра BORDER з'явилося лише у версії 3.2 специфікації HTML, до цього товщина рамки навколо таблиці не регулювалася.
Параметр CELLSPACING задає відстань між суміжними по горизонталі й вертикалі осередками, причому ця відстань задається в пікселях, тобто усередині кожного осередку створюється щось на зразок рамки і лише при CELLSPACING = 0 ці рамки окремих осередків зливаються в єдину сітку. Параметр CELLPADDING визначає відстань між рамкою навколо осередку і даними всередині її, тобто величину відступу символів від рамки. При значенні CELLPADDING = 0 текст може стосуватися рамки, що в плані дизайну навряд чи можна вітати. За умовчанням значення CELLSPACING = 2, a CELLPADDING = 1, у цьому випадку відстань між даними в сусідніх комірках дорівнюватиме б пікселям.
Параметри WIDTH і HEIGHT дозволяють задати ширину і висоту таблиці як в абсолютних одиницях - пікселях, так і у відносних - відсотках щодо розміру вікна браузера. У більшості випадків ці розміри не потрібні браузеру, адже він автоматично обчислює розміри таблиці, враховуючи багато факторів, включаючи параметри документа в цілому, кількість комірок у таблиці та їх заповнення. Браузер прагне встановити таку ширину таблиці, щоб вона містилася в вікні перегляду браузера і не було необхідності в прокрутці таблиці по горизонталі, тобто щоб горизонтальний слайдер був відсутній.
Треба відзначити, що і при завданні значень параметрів WIDTH і HEIGHT немає гарантії в тому, що вони будуть витримані браузером. Якщо ширина таблиці більша за ширину вікна перегляду, браузер зробить спробу зменшити ширину до необхідної, пропорційно зменшуючи розміри колонок, і тільки якщо це не вдасться, встановить задану ширину таблиці, забезпечивши вікно слайдером.
Параметр ALIGN задає горизонтальне вирівнювання таблиці у вікні перегляду браузера. Можливі два значення цього параметра: LEFT і RIGHT, кожен з яких забезпечує обтікання таблиці текстом документа з протилежного боку. За замовчуванням параметр ALIGN приймає значення LEFT. Якщо параметр ALIGN пропущено, то тексту поряд з таблицею не буде взагалі, тобто таблиця буде форматною або смуговою (коли вона займає всю сторінку по вертикалі), якщо використовувати терміни, прийняті в друкованих виданнях. Значення параметра ALIGN = CENTER не передбачено. Проте якщо ми хочемо орієнтувати таблицю по центру, можна піти іншим шляхом: укласти контейнер <TABLE> n </ TABLE>, що описує всю таблицю цілком, в контейнер <CENTER> і </ CENTER>. Нагадаємо, що останній має рівень блоку, тобто форматує будь-яку кількість даних, розміщених всередині його.
Зазначимо, що параметр ALIGN може використовуватися і для форматування даних усередині кожної клітинки таблиці, наприклад:
<TABLE ALIGN=LEFT WIDTH=40% BORDER=5>
<TR> <TH ALIGN=RIGHT> Прізвище </ ТН> <TH ALIGN=RIGHT> Оцінка </ TH>
<TR> <TD ALIGN=RIGHT> Іванов A.H. </ TD> <TD ALIGN=RIGHT>
4 </ TD>
<TR> <TD ALIGN=RIGHT> Сергєєв І.Д. </ TD> <TD ALIGN=RIGHT> 5 </ TD>
<TR> <TD ALIGN=RIGHT> Лавров В.В. </ TD> <TD ALIGN=RIGHT> 3 </ TD>
</ TABLE>
Для якісного дизайну шпальти дані у всіх комірках стовпця таблиці повинні вирівнюватися однаково.
Параметр BACKGROUND також може використовуватися як у тегу <ТАВLЕ>, так і в тегах <ТН> і <TD>, що визначають характеристики окремих елементів таблиці. У всіх випадках він визначає фоновий малюнок за допомогою параметра HREF. В останній версії специфікації HTML в тегові <ТАВLЕ> з'явився параметр COLS, що задає загальне число колонок в таблиці. Ця додаткова інформація прискорює процес побудови таблиці браузером.
При створенні заголовної частини таблиці, рідше боковика і прографки (основної частини таблиці, де розміщуються дані), виникає потреба в об'єднанні кількох комірок по горизонталі (у рядку) або по вертикалі в єдине ціле. Для цього використовуються параметри ROWSPAN і COLSPAN, перший з яких об'єднує кілька рядків, а другий - стовпців в одну клітинку.
<TABLE BORDER=10 SELLSPACING=3 CELLPADDING=4 WIDTH=80%>
<CAPTION> <H4> Об'єднання осередків у заголовної частини </ Н4>
<TR> <TH ROWSPAN=2> 3aголовок </ TH> <TH COLSPAN=2> Заголовок 2 </ ТН>
<TR> <TH> Заголовок 2-1 </ ТН> <ТН> Заголовок 2-2 </ ТН>
<TR ALIGN=CENTER> <TD> 1 <TD> 2 <TD> 3
</ TABLE>
Використовуючи параметри ROWSPAN і COLSPAN можна скласти багаторівневі заголовки таблиць будь-якого ступеня складності.