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

Теги та атрибути таблиць

Ось основні елементи, які потрібні для створення таблиць:

• - контейнер, всередині якого розташовується таблиця (такий, як
  для маркованих або
  для нумерованих списків).
  1. border- атрибут, що визначає товщину рамок. Замість цього краще використовувати властивість border CSS.
  .

  По-друге, цей код може не спрацювати як належить у певних випадках. При натисканні на кнопку submitформа може не вирушати.

  Саме з такою ситуацією зіткнувся у процесі роботи. Розмістив форму всередині рядка

  . Все працювало чудово. Валідно, не валідно, я не розбирався. Але, річ у тому, що в цю таблицювиводилися результати пошуку за технологією ajax, тобто без перезавантаження усієї сторінки. У рядок пошуку вводяться дані, а таблицю виводяться знайдені результати, у своїй оновлюється лише вміст таблиці. Так от коли таблиця завантажувалась після ajax-запиту, то submit форми, Впроваджена таким неправильним способом в таблицю, переставав працювати.

  Для розміщення форми в таблицю пропоную використовувати наступний спосіб.

  Форму оголосити перед таблицею, і обов'язково задати їй ідентифікатор id (у моєму прикладі id=”myform”). Інпут розмістіть всередині таблиці де планували, але у кожен input потрібно додати атрибут form=”myform”значення якого буде вказувати, до якої форми відноситься даний елемент.

  Для нашого прикладу код зміниться таким чином:

  задає підпис таблиці. Контейнер можна не використовувати, але якщо ви все-таки вирішили назвати таблицю, то ставте його відразу після тега , поза осередками та рядками.

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

  , стільки осередків у ній і буде: один тег - один осередок.

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

  , якщо його немає, то після .

  використовується для тієї ж мети, що і . може містити але не навпаки.

  span- атрибут, що задає кількість стовпців, до яких застосовуються властивості контейнера

  .

  , і - Контейнери, які дозволяють розділити таблицю відповідно на верхню (заголовки), основну (тіло) і нижню (підсумкову) частини. У HTML-таблиці послідовність цих тегів така сама, як послідовність контейнерів , і

  Інструменти створення сайтів

  Призначення	Інструмент
Розмітка	HTML	XHTML
Оформлення	CSS
Розробка	PHP	Python

  У браузері документ виглядатиме так:

  Розберемо, які рядки коду за що відповідають.

  • - Відкрили таблицю, задаючи їй товщину рамок.
    - озаглавили її.
    – відкрили рядок.
    - Створили осередок з оформленням заголовка.
    - створили другий заголовний осередок у рядку. Параметром colspan вказали, що цей осередок повинен займати по горизонталі два.
    - закрили рядок. Аналогічно створили решту рядків.
    - додали другий рядок таблиці вже зі звичайними, а не заголовними, комірками. Аналогічно вставили наступні рядки та осередки.

    Інструменти створення сайтів

    Призначення	Інструмент
  Розмітка	HTML	XHTML

    - Закрили таблицю.

  Добридень!

  Іноді виникає ситуація, коли потрібно розмістити html-форму (form) усередині html-таблиці (table).

  Наприклад, є таблиця з деякими даними, а в першому рядку цієї таблиці ми хочемо розташувати інпути для введення та додавання нової інформації.

  Швидше за все, перший код, який ви напишите з цього приводу, буде наступним:

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

  < tr > < form method = "post" action = "" > < td > < input type = "text" name = "first_name" / > < / td > < td > < input type = "text" name = "second_name" / > < / td > < td > < input type = "submit" name = "add" / > < / td > < / form > < / tr >

  Це неправильний варіант!

  По-перше, цей код не є валідним. Форма не може бути прямим нащадком table, tbodyі tr . Щоправда, може бути розташована всередині окремого осередку таблиці, тобто між тегами

  < form method = "post" id = "myform" > < / form > < table > < tr > < td > < input type = "text" name = "first_name" form = "myform" > < / td > < td > / > < / td > < / tr > < / table >

  Даний варіант розміщення елементів форми всередині таблиці – валідний та головне – повинен працювати у будь-яких ситуаціях.

  У моєму випадку, після ajax-запиту, відправка форми запрацювала! Чого й вам бажаю!

  До речі, раніше не доводилося стикатися з цим атрибутом form. Хоча вже досить довго займаюся веб-програмуванням. Завдань таких, мабуть, не траплялося. Але, зверніть увагу, як багато всього передбачено та враховано у мовах для розробки. Можна вирішити, напевно, будь-яке поставлене завдання та знайти вихід із будь-якої ситуації.

  Бажаю вам, щоб помилки швидко виявлялися та виправлялися!

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

  Таблиці в мові HTML мають прямокутний вигляд і складаються з рядків, які у свою чергу складаються з осередків. Усі мовні конструкції, що описують компоненти створюваної таблиці, полягають між тегами

  і.

  Заповнення таблиці відбувається рядково; для позначення рядка використовується пара тегів .... Рядок складається з осередків, для завдання яких використовують або теги ...якщо ці осередки містять заголовки стовпців, або теги .... Заголовки виводяться жирним шрифтом і розташовуються по центру осередку. Дані мають звичайний шрифт і вирівнюються з лівого боку осередку. Для завдання заголовка всієї таблиці використовуються теги і.

  приклад

  Заголовок таблиці

  Заголовок 1Заголовок 2

  Осередок 1Осередок 2

  Осередок 3Осередок 4

  

  Наявність в осередках даних необов'язково. Створити порожню комірку можна двома способами: нічим не заповнювати її контейнер ( ), або помістити в неї символ нерозривної пробілу, що задається спеціальною послідовністю символів - (тобто створити комірку виду ).

  Немає потреби окремо створювати порожні комірки, якщо планується, що всі комірки, що залишилися в рядку, не будуть заповнені. Оскільки тег сигналізує про початок нового рядка, порожні комірки будуть додані браузером автоматично.

  Основні атрибути тега

  Призначення основних атрибутів тега

  та значення, які вони можуть набувати перераховані в таблиці.

  Атрибут	Призначення
  	Визначає ширину рамки таблиці (у пікселах), наприклад BORDER=1; значення, що дорівнює нулю, означає відсутність рамки
  	Визначає ширину всієї таблиці у пікселах, або у відсотках від ширини вікна браузера
  	Визначає висоту всієї таблиці у пікселах, або у відсотках від висоти вікна браузера
  	Задає горизонтальне вирівнювання таблиці у вікні браузера; має значення left, center і right (за замовчуванням - left)
  	Додає вільний простір між даними всередині комірки та її межами; за замовчуванням значення дорівнює 2
  	Додає вільний простір між осередками усередині всієї таблиці; за замовчуванням значення дорівнює 2
  	Задає області вільного простору зазначеної ширини (у пікселах) зліва та праворуч від таблиці
  	Задає області вільного простору заданої висоти (у пікселах) зверху та знизу від таблиці
  BGCOLOR=колір	Встановлює колір фону всієї таблиці
  	Вказує фонове зображеннядля таблиці, де URL - адреса джерела (ім'я файлу із зображенням)

  прикладЗмінимо вміст документа, створеного в попередньому прикладі, додавши атрибутиBORDERіALIGNв тег

  :

  Тепер комірки таблиці будуть обрамлені рамкою, а таблиця вирівняна по центру вікна браузера.

  

  09.11.2015

  
  

  Всім привіт!
  Продовжуємо вивчати основи HTML. У цьому уроці я розповім і на прикладах покажу, як зробити таблицю в HTML. А також розглянемо, як можна задати колір осередкам таблиці, як відцентрувати таблицю, навчимося робити межу таблиці і т.д.
  Таблиці HTML часто використовують HTML для перерахувань деяких відомостей. Раніше таблиці використовували для створення каркасу веб-сторінок:

  

  …але це вже в минулому, тому що на сьогоднішній день є більше ефективні способистворення каркасів для сайту с. Я частенько використовую таблицю на своєму блозі або на сайті, наприклад, як в .

  Я думаю, ви розібралися, навіщо потрібно вчитися створювати таблицю.

  Які основні теги складаються з таблиці?

  ○ тег TABLE
  Це головний контейнер для створення таблиці, всередині якого містяться інші елементи таблиці, такі як стовпчики та ряди.
  Закриваючий тег є обов'язковим.

  ○ тег TR

  Усередині контейнера

  …… розміщуються ряди:

  Стовпчики створюються за допомогою тега .
  Закриваючий тег є обов'язковим.

  Увага:без використання цих тегів таблицю створити неможливо.

  Тепер спробуємо скористатися теорією та створимо таблицю на практиці.

  Завдання:створити таблицю з одного ряду, де буде три стовпчики.

  ряд -1 / стовпчик 1

  стовпчик 2

  стовпчик 3

  Завдання:створити таблицю з трьох рядів та трьох стовпчиків.

  ряд -1 / стовпчик 1	стовпчик 2	стовпчик 3
  ряд -2 / стовпчик 1	стовпчик 2	стовпчик 3
  ряд -3 / стовпчик 1	стовпчик 2	стовпчик 3

  До цього моменту вам все ясно? Хто не зрозумів, підніміть руку! Ага, зрозуміли всі, отже, йдемо далі.

  Тепер розглянемо атрибути таблиці.

  *Атрибути

  ○ Межі таблиці у HTML

  Щоб було видно таблицю, до тега

  застосовується атрибут «border» .
  

  Якщо значення атрибуту « border» «0» кордону видно не буде, якщо не прописати до тегу

  атрибут "border", кордон у таблиці теж видно не буде.

  ряд -1 / стовпчик 1

  стовпчик 2

  стовпчик 3

  Результат:

  Спробуйте змінити значення в атрибуті "border"на «10» .

  ○Як поєднати осередки в таблиці

  Щоб об'єднати осередки у таблиці використовують атрибути «colspan»та «rowspan» до тегу < td> .

  • colspan – об'єднання осередків по горизонталі;
  • rowspan – об'єднання осередків по вертикалі.

  У значеннях вказуєте скільки потрібно об'єднати осередків.

  ряд 1 стовпчик 1
  ряд 2 стовпчик 1	ряд 2 стовпчик 2

  Результат:

  ряд 1 стовпчик 1	ряд 1 стовпчик 2
  	ряд 2 стовпчик 1

  Результат:

  Більш складний приклад:

  ряд -1 / стовпчик 1	стовпчик 2			стовпчик 3
  ряд -2 / стовпчик 1	стовпчик 2	стовпчик 3	стовпчик 4

  Результат:

  ○ Як збільшити відстань між осередками таблиці

  Щоб збільшити відстань між текстом та межею осередку, прописують атрибут «cellpadding»до тега

  У значеннях атрибуту «cellpadding» вказуєте відстань відступу

  ряд 1 стовпчик 1

  стовпчик 2

  Результат:

  Щоб збільшити відстань між осередками у таблиці, використовують атрибут «cellspacing»до тега

  У значеннях атрибут «cellspacing»вказуєте відстань між осередками

  ряд 1 стовпчик 1

  стовпчик 2

  Результат:

  ○ Як зробити фон таблиці HTML

  Щоб зробити фон таблиці HTML використовують до тега

  і

  такі атрибути: BGCOLOR – колір фону всієї таблиці або до кожної комірки окремо. Колір задається кодом чи словом. BACKGROUND –фон у таблиці заповнюється малюнком. ряд -1 / стовпчик 1 стовпчик 2 стовпчик 3 ряд -2 / стовпчик 1 стовпчик 2 стовпчик 3 стовпчик 4 Результат: ○ Як вставити картинку в таблицю HTML Щоб вставити картинку в HTML таблицю, між тегом

  вставлятися тег .

  ряд 1 комірка 1

  осередок 2

  Результат:

  Значення задаються у пікселях (px) або у відсотках (%)

  ○ Вирівнювання вмісту в таблиці HTML

  Щоб вирівняти вміст у таблиці HTML, використовують до тегу атрибут "align"і Valign :

  ALIGN– горизонтальне вирівнювання вмісту у таблиці.
  Значення:

  • left - притиснути вміст до лівої частини (за замовчуванням);
  • center – встановити по центру;
  • right - притиснути вміст до правої частини

  VALIGN– вертикальне вирівнювання вмісту у таблиці.
  Значення:

  • top – притиснути вміст догори;
  • bottom – притиснути вміст донизу;
  • middle – встановити вміст посередині
  текст

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

  Результат:

  ○ Як вирівняти таблиці HTML по центру

  Щоб вирівняти таблицю центром, потрібно обхопити таблицю тегом

  :
  Код таблиці

  ряд -1 / стовпчик 1

  стовпчик 2

  стовпчик 3

  Додаткові та основні теги до таблиці

  Таблиця для сайту

  Назва 1	Назва 2
  1	2

  Результат:

  Ось і закінчили із таблицями. Ви зможете самостійно створити таблицю будь-якої складності. Закріпіть цей урок. Спробуйте самостійно створити будь-яку таблицю.
  Чекаю на вас у наступному уроці. Передплатіть оновлення мого блогу.

  Попередній запис
  Наступний запис
  

  Розділ 4

  Таблиці в HTML

  Одним з найбільш потужних і широко застосовуваних HTML засобів є таблиці. Поняття табличного подання даних не потребує додаткового пояснення. У HTML таблицівикористовуються як традиційно, як метод представлення даних, а й як форматування Web-страниц. Наведемо приклади реально існуючих документів, у яких табличне подання є зручним способом побудови документа. На рис. 4.1 показаний типовий приклад використання таблиць для представлення числових даних, розбитих по рядках та шпальтах. На рис. 4.2 використання таблиці служить лише цілям форматування документа, завдання взаємного розташування елементів сторінки. Під час перегляду такого документа відразу видно, що його побудови використовується таблиця, оскільки рамки навколо її осередків не промальовуються.

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

  І

  виводиться моноширинним шрифтом, і всі прогалини та символи табуляції є значущими. Робота з вирівнювання такого тексту виконувалася вручну, що суттєво уповільнювало створення документів. Підтримка табличного подання даних стала стандартом де-факто, оскільки спочатку була реалізована у всіх провідних браузерах і лише після значного часу була закріплена в специфікації HTML 3.2.

  Спеціальні засоби створення таблиць, втім, не скасовують можливості використання преформатованого тексту. Використання таблиць не обмежується лише даними, які з рядів і колонок. Одним із застосувань є організація розташування різноманітних даних на сторінці, які можуть складатися з простого тексту, зображень, інших таблиць і т. д. Правил створення таблиць і прикладів їх використання присвячена дана глава.

  

  Мал . 4.1. Типовий приклад HTML-таблиці

  
  

  Мал . 4.2. Приклад таблиці без рамок

  Створення найпростіших HTML-таблиць

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

  Опис таблиць має розташовуватися всередині розділу документа . Документ може містити довільне число таблиць, причому допускається вкладеність таблиць один одного. Кожна таблиця має починатись тегом

  та завершуватися тегом. Всередині цієї пари тегів міститься опис вмісту таблиці. Будь-яка таблиця складається з одного або кількох рядків, у кожному з яких задаються дані для окремих осередків.

  Кожен рядок починається тегом (Table Row) і завершується тегом. Окремий осередок у рядку обрамляється парою тегів і(Table Data) або і(Table Header). Тег використовується зазвичай для осередків-заголовків таблиці, а - для осередків-даних. Відмінність у використанні полягає лише в типі шрифту, який використовується за умовчанням для відображення вмісту осередків, а також розташування даних всередині осередку. Вміст клітинок типу відображається напівжирним (Bold) шрифтом та розташовується по центру (ALIGN=CENTER, VALIGN=MIDDLE). Осередки, визначені тегом за промовчанням відображають дані, вирівняні вліво (ALIGN=LEFT) та посередині (VALIGN=MIDDLE) у вертикальному напрямку.

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

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

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

  іу будь-якому місці, проте поза областю опису будь-якого з тегів , або . Відповідно до специфікації мови HTML розташування опису заголовка регламентовано суворо: воно має розташовуватися відразу після тега і до першого . Ми рекомендуємо дотримуватись цього правила.

  За замовчуванням текст заголовка таблиці розташовується над нею (ALIGN=TOP) і центрується горизонтально.

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

  Цих відомостей цілком достатньо побудови елементарних таблиць. Наведемо приклад найпростішої таблиці, що складається з двох рядків та двох стовпців, відображення якої показано на рис. 4.3.

  Осередок 1 рядка 1	Осередок 2 рядки 1
  Осередок 1 рядка 2	Осередок 2 рядка 2

  
  

  Мал. 4.З.Приклад найпростішої таблиці

  Подання таблиць на сторінці

  Розглянемо призначення різних параметрів, які можуть використовуватись у тегах, що описують таблиці.

  Заголовок таблиці

  Тег заголовка таблиці має єдиний допустимий параметр ALIGN, що набирає значення ТОР (заголовок над таблицею) або BOTTOM (заголовок під таблицею). Параметр ALIGN може бути опущений, що відповідає значення ALIGN=TOP. У горизонтальному напрямку заголовок таблиці завжди розташовується по її центру. Таблиця може мати заголовка. Як заголовок таблиці в більшості випадків використовується простий текст, що регламентується специфікацією HTML, проте насправді між тэгами ідопустимо записувати будь-які HTML-елементи, які у розділі . Наведемо приклад запису заголовка таблиці:

  Заголовок, що знаходиться внизу таблиці

  Якщо цей опис заголовка додати до наведеного вище прикладу, таблиця буде відображатися так, як показано на рис. 4.4.

  
  

  Мал. 4.4.Таблиця із заголовком

  Браузер Microsoft Internet Explorerнадає додаткові можливостідля вибору розташування заголовка. Параметр ALIGN допускає значення LEFT, CENTER та RIGHT для горизонтального вирівнювання поряд з описаними вище значеннями. Зазначимо, що це один із рідкісних випадків, коли широко поширений параметр ALIGN може використовуватися і для горизонтального вирівнювання, і вертикального. Наприклад, запис ALIGN=RIGHT забезпечить розташування заголовка, притисненого до правої сторони та розміщеного над таблицею. Якщо записати ALIGN=BOTTOM, то як і, як у наведеному вище прикладі, заголовок буде розташований під таблицею. Однак подвійне використання в одному заголовку ALIGN неприпустимо. Тому додатково введено спеціальний параметр для вертикального вирівнювання - VALIGN, який набирає значення ТОР або BOTTOM. Наприклад, для заголовка, розташованого внизу таблиці з вирівнюванням вліво, опис має такий вигляд:

  Заголовок, розташований внизу з вирівнюванням вліво

  Таблиця з цим описом заголовка в Microsoft Internet Explorer буде відображена так (рис. 4.5). Якщо цей приклад переглядати в Netscape, то заголовок буде розміщено за замовчуванням, тобто над таблицею і в горизонтальному напрямку.

  
  

  Мал. 4.5.Горизонтальне вирівнювання заголовка таблиці браузером Microsoft Internet Explorer

  Можливості горизонтального вирівнювання заголовка таблиці є розширенням специфікації HTML, що не підтримуються браузером Netscape Navigator, і тому ними слід користуватися лише в крайній необхідності.

  Параметри тега

  Основним тегом, застосовуваним під час створення таблиць, є тег

  . Він може використовуватися з низкою параметрів, кожен з яких можна опускати. Набір допустимих параметрівзалежить від браузера. Відповідно до специфікації HTML у тезі можуть використовуватись такі параметри: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузери NetScape і Microsoft Internet Explorer дозволяють окрім перерахованих п'яти параметрів використовувати параметри HEIGHTта BGCOLOR. Окремі браузери дозволяють також задавати інші параметри. Розглянемо призначення загальновживаних параметрів тега .

  Параметр BORDER

  Параметр BORDER управляє зображенням рамки навколо кожної комірки, які, по суті, дають лінії сітки таблиці та навколо всієї таблиці. За умовчанням рамки не малюються, і на екрані користувач побачить лише розташований текст осередків таблиці. Існує чимало ситуацій, коли використання таблиць без рамок є цілком виправданим, наприклад, для багатоколонних списків, реалізованих за допомогою таблиць, або завдання точного взаємного розташування малюнків та тексту. Однак у більшості випадків для традиційного використання таблиць її комірки корисно відокремити один від одного лініями сітки, що полегшує сприйняття та розуміння інформації, що міститься в таблиці.

  Для додавання до таблиці рамок необхідно включити код

  параметр BORDER, який може мати чисельне значення.

  Наприклад,

  або .

  Чисельне значення параметра визначає товщину рамки в пікселах, що малюється навколо всієї таблиці, проте на товщину рамок навколо кожної комірки це значення не впливає. За відсутності чисельного значення зазвичай воно набуває рівного мінімального значення (1), хоча для різних браузерів стиль показу рамок може відрізнятися. Можливість незалежного керування відображенням рамки навколо всієї таблиці та рамками навколо осередків відсутня.

  Приклад таблиці з рамкою завтовшки 10 пікселів наведено на рис. 4.6.

  
  

  Мал. 4.6.Таблиця з рамкою завтовшки 10 пікселів

  У специфікації HTML 3.0 не було увімкнено значення для параметра BORDER. Це зроблено лише у HTML 3.2. Так, зокрема, ранні версії Microsoft Internet Explorer не дозволяв завдання чисельного значення.

  Зазначимо, що за відсутності параметра BORDER рамкине промальовуються, але місце під них залишається (це стосується лише Netscape). Загальний розмір таблиці за відсутності параметра BORDER чи його наявності не змінюється (виняток є випадок завдання BORDER=0). Таким чином, мінімальна відстаньміж двома сусідніми осередками в цих випадках дорівнюватиме подвоєній товщині рамки, тобто двом пікселам. Розмістити осередки якомога ближче один до одного можливо завданням BORDER=0, що означає відсутність рамок. Деякі браузери можуть не підтримувати завдання чисельного значення параметра BORDER, тоді значення, що дорівнює нулю, буде проігноровано та таблиця буде промальована з рамками.

  Наведемо кілька прикладів:

  Усі три наведені приклади браузером Netscape будуть відображені по-різному. Зауважимо, що тут є досить унікальний випадок, коли не можна говорити про значення за умовчанням. Третій приклад, у якому параметр BORDER опущений, відрізняється від будь-якого прикладу, де цей параметр є. Для Microsoft Internet Explorer другий і третій приклади ідентичні, тому для цього браузера значення за промовчанням BORDER дорівнює нулю .

  Параметр CELLSPACING

  Форма запису параметра: CELLSPACING=num, де num - чисельне значення параметра пікселів, яке може бути опущено. Величина num визначає відстань між суміжними осередками (точніше між рамками осередків) як по горизонталі, так і по вертикалі. За замовчуванням значення приймається рівним двом. Зауважимо, що у видавничих системах суміжні осередки таблиці мають спільну границю. У HTML-таблицях за умовчанням з-поміж них залишається місце, що добре видно на наведеному вище малюнку (рис. 4.6). При завданні CELLSPACING=0 рамки суміжних осередків зіллються і створять враження єдиної сітки таблиці (рис. 4.7).

  
  

  Мал. 4.7.Таблиця зі значенням CELLSPACING=0

  Параметр CELLPADDING

  Форма запису параметра аналогічна CELLSPACING. Величина num визначає розмір вільного простору (відступу) між рамкою комірки та даними всередині комірки. За замовчуванням значення приймається рівним одиниці. Встановлення параметра CELLPADDING рівним нулю може призвести до того, що деякі частини тексту комірки можуть стосуватися її рамки, що виглядає не дуже естетично.

  На рис. 4.8 показаний приклад таблиці значення CELLPADDING=10.

  
  

  Мал. 4.8.Таблиця зі значенням CELLPADDING=10

  Дія параметрів CELLPADDING та CELLSPACING дуже схожа одна на одну. Для таблиці без рамок зміна того чи іншого параметра призводить до того самого результату. Обидва параметри впливають на відповідні відступи одночасно по горизонталі та по вертикалі. На жаль, роздільного управління горизонтальними та вертикальними відступами так, як це зроблено, наприклад, для відступів від зображень (параметри HSPACE та VSPACE тега ), не передбачено.

  Усі три параметри - BORDER, CELLPADDING і CELLSPACING діють незалежно друг від друга, якщо якийсь із них опущений, то береться його значення, прийняте за умовчанням. Зокрема, якщо опущені всі перелічені параметри, то мінімальна відстань між даними із суміжних осередків дорівнюватиме 6 пікселів (для Netscape). Це значення складається з двох пікселів для CELLSPACING, одного піксела для CELLPADDING та одного пікселя для рамки кожної з осередків. Найбільш компактна таблиця буде отримана завданням такого опису:

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

  Параметри WIDTH та HEIGHT

  При відображенні таблиць їх ширина і висота автоматично обчислюються браузером і залежать від багатьох факторів: значень параметрів, заданих в описі всього документа, даної таблиці, окремих її рядків та осередків, вмісту осередків, а також параметрів, що задаються під час перегляду документа в тому чи іншому браузері наприклад, типу і розмірів шрифту, розмірів вікна перегляду та ін. При відображенні розрахунок розмірів таблиць виконується автоматично з урахуванням цих факторів, при цьому робиться спроба подати таблицю в найбільш зручному вигляді - розмістити таблицю так, щоб вона містилася і вікні перегляду. Загальна схемаПерегляд великих документів, як правило, зводиться до лінійного прокручування вмісту документа по вертикалі і читання тексту, що перемежовується різними таблицями, зображеннями і т. п. Це відноситься як до HTML-документів, так і до звичайних документів, створюваних у будь-яких текстових редакторах. Більшість текстових редакторів (наприклад, Microsoft Word), і HTML-браузерів автоматично форматують текст так (якщо можливо), щоб довжина рядків не перевищувала ширину вікна перегляду. Це дозволяє уникнути необхідності горизонтального прокручування документа. Аналогічні дії робляться браузерами з таблицями - по можливості форматувати їх таким чином, щоб ширина таблиці не перевищувала ширину вікна перегляду. Можна зробити висновок, що ширина таблиць є найважливішим, першорядним параметром, розрахунок якого виконується насамперед проти висотою.

  Найчастіше динамічне визначення розмірів таблиці дає у результаті естетично пропорційне зображення з ефективним використанням реальної площі вікна перегляду. Однак необхідно примусово вказувати ширину або висоту таблиці. Для цієї мети використовуються параметри WIDTH (ширина таблиці) та HEIGHT (висота таблиці) тега

  . Форма запису: WIDTH=num чи WIDTH=num%, де num - чисельне значення ширини всієї таблиці у пікселах чи відсотках від розміру вікна. Зауважимо, що допустимо задавати значення, більші за 100%, хоча важко уявити собі випадок, де це необхідно. Приклад:
  .

  Аналогічні параметри можуть задаватися і окремих осередків. Зауважимо, що завдання конкретного значення параметра, наприклад WIDTH=200, не означає, що таблиця в будь-якому випадку матиме вказану ширину, а лише визначає ширину, що рекомендується, яка буде витримана по можливості. Пояснимо це на прикладах. Нехай є таблиця, яка в умовах за умовчанням мала б ширину, меншу заданої. У цьому випадку браузер збільшить ширину таблиці до необхідної пропорційного розширення всіх колонок таблиці. При звуженні вікна перегляду ширина таблиці не буде змінюватися, і, можливо, для її перегляду буде потрібно горизонтальне прокручування. Якщо ж таблиця за замовчуванням має ширину, більшу за задану, то браузер зробить спробу зменшити її ширину за рахунок, по-перше, скорочення ширини окремих колонок, для яких задана ширина більша за необхідну, по-друге, розбиття тексту в окремих осередках на кілька рядків. збільшення висоти таблиці. Ці дії можуть не забезпечити необхідний розмір таблиці, і тоді вона матиме мінімально можливу ширину. Такі ж дії робляться для таблиць, які не вказані розміри, при звуженні вікна перегляду.

  Конкретні алгоритми налаштування таблиць для різних браузерів можуть відрізнятися.

  Параметр ALIGN

  Цей параметр тегу

  визначає горизонтальне розташування таблиці області перегляду. Допустимі значення - LEFT (вирівнювання вліво) та RIGHT (вирівнювання вправо). За промовчанням таблиці вирівняні по лівому краю. Зауважимо, що з допустимих значень немає типового значення параметра вирівнювання - CENTER. У деяких джерелах з мови HTML значення CENTER (по центру) наводиться як допустиме в даному випадку. Це відповідає специфікації HTML, але практично і Netscape Navigator, і Microsoft Internet Explorer реалізують лише два значення. Справа в тому, що наявність параметра ALIGN в тезі як визначає місце розташування таблиці, а й дозволяє здійснити обтікання таблиці текстом з протилежного боку аналогічно обтіканню картинок. Обтікання таблиці текстом з обох сторін не передбачається в жодному разі. Для більш точного керування обтіканням слід використовувати тег
  з параметром CLEAR так само, як це виконується для . Якщо параметр ALIGN опущений, місце праворуч і/або ліворуч від таблиці завжди буде порожнім незалежно від її ширини. Якщо таблиця не вимагає обтікання текстом, можна домогтися її розташування по центру вікна перегляду. Для цього, наприклад, можна весь опис таблиці помістити всередині пари тегів і.

  Наведемо приклад таблиці з обтічним текстом, відображення якої показано на рис. 4.9.

  дорослого

  населення Санкт-Петербурга

  Абрам Олександр Олексій Альберт Анатолій Андрій Аркадій Борис Вадим Валентин Валерій Василь Віктор Віталій Володимир Владислав В'ячеслав Генадій Георгій Герман Григорій Дмитро

  Євген Юхим Іван Ігор Ілля Йосип Костянтин Лев Леонід Михайло Микола Олег Павло Петро Роман Семен Сергій Станіслав Едуард Юрій Яків

  
  
  
  
  
  
  

  
  Зазначені 43 найчастіше зустрічаються імені охоплюють 92% вибірки.
  

  

  Мал. 4.9.Таблиця без рамок з текстом, що обтікає

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

  . Використання таблиці для виведення списку - це один із способів примусового розташування списку кілька колонок, що також ілюструє даний приклад. Текст, розташований праворуч від таблиці, може весь там не поміститися, при цьому він продовжиться після таблиці. Спробуйте зменшити ширину вікна перегляду браузера на цьому прикладі, і в якийсь момент весь текст виявиться знизу таблиці. Нагадаємо, що для примусового переривання обтікання тексту вздовж таблиці (наприклад, якщо наступний текст логічно не пов'язаний з таблицею і повинен розташовуватися нижче за неї) слід скористатися кодом
  із встановленим параметром CLEAR. Для цього прикладу потрібно записати
  або
  . Деякі браузери дозволяють записувати параметр CLEAR без значення, але цього робити не рекомендується. Для здійснення того ж завдання завдання кількох перекладів рядка
  без параметра CLEAR (як це зроблено у прикладі перед текстом для його зсуву вниз на кілька рядків) або кількох кодів початку нового абзацу

  Неправильне рішення.

  Наведемо дещо інший приклад для створення подібної сторінки, відображення якої показано на рис. 4.10.

  Найбільш уживані чоловічі імена

  дорослого населення Санкт-Петербурга

  Абрам Олександр Олексій Альберт Анатолій Андрій Аркадій Борис Вадим Валентин Валерій Василь Віктор Віталій Володимир Владислав В'ячеслав Генадій Георгій Герман Григорій Дмитро

  Євген Юхим Іван Ігор Ілля Йосип Костянтин Лев Леонід Михайло Ніколай Олег Павло Петро Роман Семен Сергій Станіслав Едуард Юрій Яків

  Наведені дані отримані на основі аналізу репрезентативної вибірки, що містить відомості про 5000 чоловіків віком від 18 років, які проживають у Санкт-Петербурзі. Зазначені 43 найчастіше зустрічаються імені охоплюють 92% вибірки. Частота народження кожного з інших імен не перевищує 0.3%

  

  Мал. 4.10.Таблиця без рамок, що містить три стовпці

  На відміну від попереднього прикладу, тут немає тексту, що обтікає таблицю. Весь документ складається з однієї таблиці із заголовком, що містить три осередки в одному рядку. Перші два осередки повністю повторюють попередній приклад. У третьому осередку розташовується текст, який коментує зміст перших двох осередків. Тут не потрібно задавати примусове обривання тексту, як це описано в попередньому випадку. Весь текст, що стосується таблиці, повинен розташовуватися всередині третього осередку, а наступний текст - після закінчення опису всієї таблиці. Обидва приклади при перегляді на повному екрані виглядають однаково, за винятком заголовка, який у першому випадку розташований посередині двоколонного списку, а в другому - посередині всіх трьох колонок таблиці. Однак при зменшенні області перегляду в останньому прикладі ніяка частина тексту не може перейти нижче за таблицю, порушивши її структуру.

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

  Кожну окрему комірку всередині таблиці можна розглядати як область незалежного форматування. Усі правила, які діють для керування відображенням тексту, можуть бути використані для форматування тексту всередині комірки. Всередині комірки допустимо використання практично всіх елементів HTML, які можуть з'являтися всередині тіла документа , у тому числі теги, що керують розташуванням тексту -

  ,
  ,

  ---

  , коди заголовків - від

  до

  , теги форматування символів -<В>, , , , , , , тегівставки графічних зображень , гіпертекстових посилань<А>і т. д. Відразу підкреслимо, що область дії тегів, заданих всередині окремого осередку, обмежується межами цього осередку незалежно від наявності завершального тега. Наприклад, якщо всередині комірки визначено колір тексту - , то навіть за відсутності завершального кодуабо розташування його через кілька осередків або рядків таблиці, текст наступного осередку буде відображено кольором за промовчанням.

  Для форматування даних усередині осередків таблиці передбачені такі параметри.

  Параметри вирівнювання вмісту осередків - ALIGN та VALIGN. Можуть застосовуватись у кодах , і . Параметр горизонтального вирівнювання ALIGN може приймати значення LEFT, RIGHT та CENTER (за замовчуванням LEFT для та CENTER для ). Параметр вертикального вирівнювання VALIGN може набувати значення ТОР (по верхньому краю), BOTTOM (по нижньому краю), MIDDLE (посередині), BASELINE (по базовій лінії). За замовчуванням – MIDDLE. Вирівнювання базової лінії забезпечує прив'язку тексту окремого рядка у всіх осередках до єдиної лінії. Встановлення параметрів вирівнювання на рівні коду визначає вирівнювання для всіх осередків даного рядка, при цьому в кожному окремому осередку рядка може бути визначено свої параметри, що перевизначають дію параметрів, заданих у .

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

  Осередок 1	Осередок 2	Осередок 3
  Комірка 4	Осередок 5	Осередок 6

  Відображення цього прикладу браузером показано на рис. 4.11.

  
  

  Мал. 4.11.Вирівнювання даних у осередках таблиці

  Параметр NOWRAP вимикає можливість автоматичного розбиття тексту комірки на рядки. Може застосовуватись у кодах , і . Слід уникати невиправданого застосування цього параметра, оскільки це може значно скоротити можливості динамічної зміни розмірів таблиць та погіршити їхнє сприйняття. У більшості випадків достатньо застосувати NOWRAP для окремих осередків, які дійсно вимагають заборони перенесення слів на новий рядок. Перенесення слів здійснюється тільки за роздільниками між словами (пробілами), і в ряді випадків для заборони розриву тексту в окремих місцях слід замість символу пробілу задавати код нерозривної пробілу (NonBreaking Space). Як приклади можна навести випадки, де розрив не рекомендується - між числовим значенням та одиницями виміру даної величини; між прізвищем та ініціалами. Так, текст 650 км. або Єльцин Б.М. рекомендується записувати у вигляді 650 км та Єльцин Б.М.

  Параметри WIDTH та HEIGHT можуть застосовуватись у кодах і . Їх синтаксис аналогічний синтаксису цих параметрів для тега

  . Їх значення визначає ширину або висоту комірки, на яку записані дані параметри. Значення можуть задаватися у пікселах або у відсотках від розмірів усієї таблиці. Microsoft Internet Explorer дозволяє задавати значення WIDTH лише у пікселах. Оскільки таблиця є зв'язною структурою, що складається з рядків і колонок, то завдання ширини для будь-якої комірки впливає на ширину всієї колонки, в якій розташована комірка, а завдання висоти впливає на всю рядок. Якщо в колонці значення ширини вказано лише в одному осередку, то це значення стає шириною всієї колонки. Якщо таких вказівок кілька, вибирається максимальне значення. Ті ж характеристики характерні і для рядків.

  Для складних таблиць характерна потреба в об'єднанні кількох суміжних осередків по горизонталі або по вертикалі в одну. Ця можливість реалізується за допомогою параметрів COLSPAN (COLiimn SPANning) і ROWSPAN (ROW SPANning), що задаються в кодах

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

  На рис. 4.17 показаний результат реалізації наведеного вище коду, а також варіант відображення такої таблиці із записом RULES=GROUPS у тезі

  або

  . Форма запису: COLSPAN = num, де num - числове значення, що визначає, на скільки стовпців слід розширити поточну комірку по горизонталі. Застосування параметра ROWSPAN аналогічне, тільки тут вказується кількість рядків, які має захопити поточний осередок по вертикалі. За промовчанням для цих параметрів встановлюється значення, що дорівнює одиниці. Допустимо одночасне завдання значень обох параметрів для однієї комірки. Правильне встановлення значень цих параметрів може виявитися не дуже простим завданням, тим більше, що більшість HTML-редакторів дозволяють візуально конструювати з наступною генерацією HTML-кодів лише найпростіші таблиці. На рис. 4.12 показаний приклад відображення таблиці, отриманий за наступним HTML-кодом: Осередок, що захоплює два рядки Осередок, що захоплює два стовпці Осередок 3 Осередок 4 Осередок 5 Осередок 6 Осередок 7 Мал. 4.12.Таблиця з осередками, що розповсюджуються на кілька рядків або стовпців Неуважне завдання значень параметрів розсунення осередків може призвести до взаємного перекриття та конфліктів, при яких результат непередбачуваний. Характерне застосування протяжних осередків - загальний заголовок для кількох суміжних колонок чи рядків. Наведемо приклад коду HTML (відображення якого показано на рис. 4.13), у якому протяжні комірки сформовані некоректно. Осередок 1 Осередок 2 Осередок 3 (поширена Ha три рядки) Комірка 4 Осередок 5 Осередок 6 Осередок 7 (поширена на два стовпці) Мал. 4.13.Результат некоректного визначення протяжних осередків (накладення тексту) Параметр BGCOLOR визначає колір підкладки всієї таблиці, окремих рядків або осередків. Може зустрічатися у тегах , , не містить жодної інформації або однієї або більше прогалин, які не трактуються як дані. Осередки, що містять невидимі дані, наприклад, можуть містити код або код перекладу рядка , або будь-який текст, колір якого збігається з кольором фону комірки. Якщо комірки, що містять дані (нехай навіть невидимі), відображаються всіма браузерами однаково, порожні комірки будуть показані по-різному. Браузер Netscape порожню комірку не показує, тобто місце, де розташовується ця комірка, буде зафарбоване кольором фону сторінки, а не кольором фону комірки на відміну від осередків, що містять дані. Навколо порожніх осередків не промальовується рамка. Приклад таблиці з порожнім осередком наведено на рис. 4.15. Мал. 4.15.Пустий осередок таблиці відображається по-різному різними браузерами Microsoft Internet Explorer і ті, й інші осередки відображає кольором фону осередків. Такий браузер, як NSCA Mosaic, надає користувачеві можливість самому визначити характер видачі порожніх осередків таблиці за допомогою вибору відповідних опцій. Знання таких особливостей дозволить розробляти таблиці, які будуть відображені відповідним чином, незалежно від обраного користувачем браузера. У ряді випадків достатньо для цього замість деяких порожніх осередків створювати осередки, що містять єдиний код. Вирівнювання даних у стовпцях таблиці Характерною проблемою під час створення таблиць є завдання параметрів вирівнювання окремих рядків чи стовпців. Для вирівнювання вмісту всіх осередків поточного рядка достатньо задати необхідні параметри коду . Однак частіше необхідно забезпечити однакове вирівнювання для всіх елементів одного стовпця, так як у більшості випадків стовпці розташовуються однорідні дані. У ранніх версіях HTML для цього пропонувалося використовувати параметр COLSPEC (COLumn SPECification), який ставився у тезі і . Ця можливість не передбачається специфікацією HTML, проте підтримується як Netscape, і Microsoft Internet Explorer. Форма запису така сама, як і для тега , а саме: BGCOLOR=значення, де як значення задається вміст кольору в форматі RGB або його назва. Приклад: або . Вкладені таблиці Окремі осередки таблиці можуть містити практично будь-які теги мови та дані, дозволені у розділі документа. У тому числі, всередині осередку таблиці може бути повністю розміщена інша таблиця. Такі таблиці називаються вкладеними. Правила їх побудови не відрізняються від побудови таблиць і не потребують окремого опису. Зазначимо лише, що не всі браузери, що підтримують таблиці, правильно відображають складні таблиці з кількома рівнями вкладеності, тому їхнє використання вимагає обережності. Наведемо приклад таблиці, яка використовує один рівень вкладеності. Міста Ленінградської області H - населення міста (тис.жит., 1992) P - відстань від Санкт-Петербурга (км) Міста, підпорядковані Санкт-Петербургу Місто H P Зеленогірськ 13.6 50 Колпіно 144.6 26 Кронштадт 45.2 48 Ломоносів 42.0 40 Повлівськ 25.4 30 Петродворець 83.8 29 Пушкін 95.1 24 Сестрорецьк 34.9 35 Усі міста, підпорядковані адміністрації Санкт-Петербурга прямі міські телефонні номери. Міста обласного підпорядкування Місто H P Бокситогорськ 21.6 ALIGN = RIGHT> 245 Болхов 50.3 ALIGN = RIGHT> 122 Всеволожськ 32.9 24 Виборг 80.9 130 Висоцьк 1.0 ALIGN = RIGHT> 159 Гатчина 80.9 46 Івангород 11.9 ALIGN = RIGHT> 147 Кам'яногірськ 5.9 157 Кінгісепп 51.5 ALIGN = RIGHT> 138 Кіріші 53.8 ALIGN = RIGHT> 115 Кіровськ 23.8 55 Лодейне поле 27.3 ALIGN = RIGHT> 244 Луга 41.8 139 (продовження таблиці) Місто H P Любань 4.7 85 Нова Ладога 11.2 ALIGN = RIGHT> 141 Втішне 22. 9 ALIGN=RIGHT>40 Пікалево 25.1 ALIGN = RIGHT> 246 Підпорожжі 23.1 285 Приморськ 6.7 137 Приозерськ 20.5 ALIGN = RIGHT> 145 Світогорськ 15.8 ALIGN = RIGHT> 201 Сланці 42.6 ALIGN = RIGHT> 192 сосновий бір 57.6 81 Тихвін 72.0 ALIGN = RIGHT> 200 Тосно 33.8 53 Ш лиcceльбypг 12.5 64 Мал. 4.14.Приклад вкладених таблиць Результат відображення цього прикладу показано на рис. 4.14. На погляд здається, що у прикладі немає вкладеності таблиць. Насправді весь документ є таблицею, що не має рамок і складається з заголовка і всього одного рядка, що містить п'ять осередків. Організація такої таблиці служить єдиною метою - розташування даних на сторінці. Усередині першого осередку розташовується інша таблиця, що має свій заголовок і складається з трьох стовпців, після якої йде текст, вирівняний посередині. Третій і п'ятий осередки також містять окремі таблиці. Другий і четвертий осередки - порожні, вони містять ніяких даних і мають єдиний параметр WIDTH, визначальний її ширину. Їх призначення - задати відступ між першим і третім, а також третім і п'ятим осередками, в яких розташовуються таблиці. Це один із можливих варіантів завдання такого відступу. Інший варіант - використання параметра CELLSPACING, що визначає відстань між осередками, проте цей параметр задає відступи одночасно і по горизонталі, і по вертикалі, що в даний момент не потрібно. Крім того, порожня комірка із заданою шириною при звуженні області перегляду скорочуватиметься на відміну від простору, заданого параметром CELLSPACING (як і CELLPADDING). Спробуйте на цьому прикладі зменшувати ширину області перегляду в браузері або, що призведе до тих же результатів, збільшувати розмір шрифту, яким відображається текст. Відстань між таблицями скоротиться до нуля, даючи можливість бачити одночасно всю інформацію якомога довше, проте подальша зміна не призведе до псування таблиці, а надасть можливість горизонтального прокручування. За аналогічною схемою можна організувати розміщення інформації, що складається як з таблиць, а й зображень, фрагментів тексту тощо. Особливості побудови таблиць У цьому розділі розглядаються деякі специфічні можливості окремих браузерів, а також окремі тонкощі побудови та відображення таблиць. Відображення порожніх осередків у таблицях Однією з особливостей подання таблиць різними браузерами є відображення порожніх осередків. Згідно з описом мови всі браузери повинні доповнювати рядки порожніми осередками, якщо в будь-якому рядку їх кількість менша, ніж в інших рядках. Крім того, в будь-якому місці таблиці можуть знаходитися осередки, які не містять даних. Існує різницю між порожніми осередками і осередками, що містять невидимі дані. У порожніх осередках усередині пари тегів і і визначав вирівнювання та ширину кожної колонки таблиці. Для прикладу, завдання colspec="L40 R50 C80" визначало для трьох колонок таблиці вирівнювання даних у комірках: для першої колонки - LEFT, для другої - RIGHT і для третьої - CENTER, а також ширину кожної колонки. У міру розвитку мови HTML від використання цього параметра відмовилися, і в даний час вона не входить до специфікації мови і не підтримується більшістю браузерів. У результаті для вирішення такого завдання в Netscape Navigator немає спеціальних засобів, і єдиним варіантом залишається використання вирівнювання за замовчуванням, або завдання відповідних значень в кожному осередку, де це необхідно. У Microsoft Internet Explorer передбачені спеціальні теги - і . Ці теги повинні розташовуватися відразу ж за описом перед першою появою тега . Параметрами тегів і можуть бути SPAN, що визначає кількість суміжних колонок, на які поширюється дія значень параметрів, і ALIGN, що визначає горизонтальне вирівнювання даних у всіх осередках відповідного стовпця (або стовпців). Допустимими значеннями параметра ALIGN є LEFT, RIGHT та CENTER. Для параметра SPAN значення за замовчуванням дорівнює одиниці. Тег додатково дозволяє задавати параметр VALIGN, що визначає вертикальне вирівнювання даних у комірках. Допустимими значеннями параметра VALIGN є MIDDLE, TOP та BOTTOM. Відмінність між тэгами і полягає в тому, що перший із них, крім завдання параметрів вирівнювання даних для стовпців, виконує також умовне об'єднання кількох стовпців у групу. Ефект такого об'єднання виявляється при використанні параметра RULES, що описується нижче. За замовчуванням усі стовпці таблиці вважаються однією групою. Тег повинен використовуватися тільки для визначення вирівнювання даних в окремих стовпцях групи. Наведемо приклад. Нехай необхідно побудувати таблицю, що містить 6 стовпців, причому дані перших трьох з них повинні бути вирівняні вправо, а наступних трьох - посередині. Для вирішення цього завдання слід записати такий фрагмент HTML-коду: (Дані для таблиці) Результат відображення цього коду показано на рис. 4.16. Мал. 4.16.Таблиця з різними параметрами вирівнювання даних у групах осередків Інший приклад. Нехай у попередній таблиці перші дві колонки мають бути вирівняні праворуч, а третя - посередині, причому всі три колонки необхідно об'єднати в групу. Наступні три колонки також повинні бути об'єднані в групу та мати вирівнювання, аналогічне першій групі. Для вирішення цього завдання слід записати такий фрагмент HTML-коду: (Дані для таблиці) У цьому прикладі після тегу

  , з якого видно сенс об'єднання у групи.

  Порада

  Оскільки сфера застосування тегів

  і обмежується єдиним браузером Microsoft Internet Explorer, слід користуватися ними з обережністю. Зручність використання цих тегів очевидна, але на практиці більшість таблиць будується з використанням відповідного параметра вирівнювання ALIGN для кожного осередку таблиці, де це необхідно, що значно збільшує обсяг вихідного коду таблиці, проте забезпечує можливість перегляду в будь-якому браузері.

  
  

  Мал. 4.17.Таблиця з групованими стовпцями

  Завдання кольору рамок таблиці

  Ще кілька параметрів, притаманних лише Microsoft Internet Explorer, дозволяють вибирати колір рамок таблиць - BORDERCOLOR, BORDERCOLORLIGHT і BORDERCOLORDARK. Ці параметри можуть задаватися у тегах

  , . Як значення цих параметрів може використовуватися назва кольору або його шістнадцяткове значення. Параметр BORDERCOLOR визначає колір всіх елементів рамок таблиці, інші два параметри задають колір окремих складових рамок, перевизначаючи значення BORDERCOLOR. Параметр BORDERCOLORLIGHT забарвлює в заданий колір лівий і верхній краї всієї таблиці і правий і нижній краї кожної комірки. Другий параметр BORDERCOLORDARK визначає кольори протилежних країв. За рахунок поєднання дії цих параметрів таблиця виглядатиме дещо піднятою над поверхнею сторінки або заглибленою. Все залежить від обраного поєднання кольорів.

  Примітка

  Браузер Netscape версії 4.x також підтримує параметр BORDERCOLOR.

  Завдання фонового малюнка для таблиці

  Браузер Microsoft Internet Explorer (і навіть браузер Netscape версії 4.x) дозволяє використовувати параметр BACKGROUND, визначальний фоновий малюнок для таблиці оскільки це може бути зроблено всього HTML-документа. Цей параметр може бути задано в тегах

  ,	і

  , , w

  Браузер Microsoft Internet Explorer дозволяє використовувати низку нових тегів для структурування таблиць та гнучкого управління промальовуванням рамок та ліній сітки.

  Теги

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

  і	. Теги структурування таблиці

  і.

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

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

  При використанні нових тегів з'являється можливість гнучкіше керувати рамками та лініями сітки таблиці.

  Управління промальовуванням рамок навколо таблиці здійснюється параметром FRAME тега

  , а ліній сітки таблиці – параметром RULES. Наприклад, стає можливим провести тільки вертикальні лінії між колонками та замість рамки навколо всієї таблиці дати горизонтальні лінії зверху та знизу таблиці.

  Параметр FRAME може приймати такі значення:

  • BOX або BORDER - рамка малюється з усіх чотирьох сторін
  • ABOVE - Тільки з верхнього боку
  • BELOW - тільки з нижнього боку
  • HSIDES - малюється нижня та верхня сторона
  • VSIDES - малюється ліва та права сторона
  • LHS - Тільки з лівого боку
  • RHS - тільки з правого боку
  • VOID - таблиця без зовнішніх рамок

  Параметр RULES керує промальовуванням внутрішніх ліній сітки таблиці і може приймати такі значення:

  • ALL - Малюються всі внутрішні лінії
  • GROUPS - малюються лише лінії, які розділяють групи
  • ROWS - малюються лінії, що розділяють рядки
  • COLS - малюються лінії, що розділяють стовпці
  • NONE - Внутрішні лінії не малюються

  Приклад:

  .

  Примітка

  Промальовування ліній сітки таблиці та рамок буде здійснюватись лише за наявності параметра BORDER тега

  . За відсутності цього параметра або його нульового значення лінії сітки та рамки будуть відсутні при будь-яких значеннях параметрів FRAME та RULES.

  Наведемо приклад повного HTML-коду, який створює таблицю з використанням описаних можливостей:

  Приклад гнучкого керування лініями
  сітки таблиці

  Заголовок стовпця 1	Заголовок стовпця 2	Заголовок стовпця 3
  Дані	Дані	Дані
  Дані	Дані	Дані
  Дані	Дані	Дані
  Дані	Дані	Дані
  Дані	Дані	Дані
  Дані	Дані	Дані
  Підсумок	Підсумок	Підсумок

  
  

  Мал. 4.18.Гнучка промальовування ліній сітки таблиці браузером Microsoft Internet Explorer

  У цьому прикладі відображення якого браузером представлено на рис. 4.18 показується один з можливих варіантів управління лініями сітки та рамками навколо таблиці. Навколо таблиці малюється рамка товщиною 5 пікселів (BORDER=S) тільки з верхньої та нижньої сторони (FRAME=HSIDES). Усередині таблиці малюються лінії сітки, які розділяють групи даних (RULES=GROUPS). Групи даних визначено, по-перше, наявністю трьох тегів , кожний з яких оголошує окремий стовпець таблицігрупою. По-друге, теги , і<тгоот>також розбивають дані таблиці на групи, що визначає промальовування внутрішніх горизонтальних ліній.

  Завдання числа стовпців таблиці

  Microsoft Internet Explorer (а також браузер Netscape версії 4.x) дозволяє задавати в тезі

  параметр COLS, значення якого визначає число стовпців таблиці. Запис цього параметра дозволяє прискорити процедуру верстки таблиці під час відображення у браузері, оскільки з'являється можливість визначити кількість стовпців до закінчення завантаження коду опису таблиці. На даний момент увімкнення цього параметра ніяк не впливає на процес завантаження документа.

  Вертикальне вирівнювання таблиць

  Останній параметр тега

  , властивий лише Microsoft Internet Explorer, це - VALIGN, що визначає вертикальне вирівнювання таблиці щодо тексту. Його дія подібна до такого ж параметра для зображень.

  Примітка

  Зазначимо, що використання одного й того самого параметра може суттєво відрізнятися як за призначенням, так і за можливими значеннями для різних тегів навіть для одного браузера та в рамках специфікації мови. Тому неможливе складання зведеної таблиціщодо використання різних параметрів поза контекстом їх застосування. Наприклад, параметр ALIGN тільки в таблицях використовується у трьох різних варіантах:

  • для тега

  параметр ALIGN може набувати значення LEFT або RIGHT, і означає розташування таблиці, притиснутої до лівого або правого краю відповідно;

  для тега

  ,

  параметр ALIGN приймає значення ТОР чи BOTTOM, і означає розташування заголовка таблиці над таблицею чи під нею;

  для тегів

  і

  параметр ALIGN приймає значення LEFT, RIGHT або CENTER, і означає вирівнювання вмісту відповідної комірки (або осередків) таблиці по горизонталі. Альтернатива табличного подання Підтримка таблиць стала широко поширеною властивістю Web-браузерів, так що практично не залишилося причин, через які слід уникати їх використання. Проте розглянемо можливі варіанти альтернативного представлення даних, які можна використовувати замість таблиць або на додаток до них. Деякі інші способи, які використовують поняття таблиць: Використання преформатованого тексту. Цей спосіб традиційно використовувався в ранніх версіяхмови HTML, коли підтримки таблиць ще не існувало. Його вживання і до теперішнього часу не втратило актуальності, оскільки такі тексти будуть правильно відображатися будь-якими браузерами, в тому числі чисто текстовими. Використання зображення, що містить таблицю. Таблиця може бути створена будь-яким текстовим редакторомабо навіть відображена Web-браузером і потім збережена як картинка в одному з графічних форматів. Це не найкращий варіант, тому що при цьому втрачається вся гнучкість динамічного налаштування відображення таблиць. Крім того, виникає необхідність зберігання додаткового файлуіз зображенням, розмір якого до того ж, як правило, буде значно більшим, ніж розмір тексту, що описує HTML-таблицю. Можлива сфера застосування - таблиці строго певних розмірів, для яких неприпустима залежність її відображення від будь-яких зовнішніх факторів (шрифтів, режимів роботи браузера тощо). Використання списків замість таблиць. Для найпростіших випадків замість організації таблиць цілком можливо обійтися однією з видів списків, що у мові HTML. Підготовка таблиць Для підготовки HTML-таблиць можуть бути використані будь-які редактори, більшість з яких мають засоби візуального створення таблиць. Наведемо приклад підготовки таблиці у редакторі HotDog Professional. Для створення таблиці достатньо вибрати пункт Tables із меню Insert, після чого буде видано діалогове вікно, показане на рис. 4.19. Створення таблиці полягає у заповненні відповідних полів у вікні. Після визначення кількості рядків і стовпців у таблиці можна перейти до безпосереднього заповнення окремих осередків таблиці, які будуть показані у цьому діалоговому вікні. Діалогове вікно має кнопку Preview, натискання якої дозволяє переглянути таблицю, що отримується, за допомогою вбудованого браузера (рис. 4.20). Мал. 4.19.Діалогове вікно для створення таблиць Мал. 4.20.Таблиця, показана за допомогою вбудованого браузера Після завершення підготовки даних до таблиці слід натиснути кнопку ОК. Тоді згенерований код опису таблиці буде вставлений в HTML-документ, що редагується. Наприклад, наведеного на рис. 4.19, буде згенеровано наступний код: (частина коду опущена) 3головок таблиці Стовпець 1 Стовпець 2 Стовпець 3 Стовпець 4 1 2 3 4 Аналогічно це завдання вирішується під час використання компоненти Netscape Composer програми Netscape Communicator. На рис. 4.21 показано діалогове вікно, де необхідно заповнити потрібні поля. Для введення додаткових параметрівтега передбачено кнопку Extra HTML. Після заповнення полів діалогового вікна слід натиснути кнопку Apply і тоді буде надано можливість заповнення осередків таблиці (рис. 4.22). Мал. 4.21.Діалогове вікно для встановлення параметрів таблиці програми Netscape Composer Мал. 4.22.Вихідна позиція курсору введення в порожній таблиці Програми Безпека Новини Цікаве Поради Новини Огляди Приєднуйтесь! Вже підписано понад 6 000 осіб. Отримуйте найсвіжіші статті. ПІДПИСАТИСЯ