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

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

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

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

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

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

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

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

  Таблиця може мати заголовок, який полягає в пару тегів

  . Опис заголовка таблиці буде проходити через всередині тегів

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

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

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

  .

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

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

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

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

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

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

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

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

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

  знаходиться тіло таблиці. Тіло складається з рядків і стовпців. Таблиця заповнюється за рядком.

  кожен тег

  і

  - тег, який створює осередок заголовка таблиці. Зовні її вміст відрізняється від контенту в інших осередках - зазвичай текст всередині	оглядач виділяє жирним і розміщує по центру.	- контейнер, за допомогою якого створюється проста осередок. Скільки таких тегів буде містити рядок (тег
створюються стовпці. Можна створювати безліч стовпців. При цьому потрібно стежити за кількістю стовпців в кожному рядку. Наприклад, якщо в першому рядку було 5 стовпців, то і в наступних рядках повинно бути 5 стовпців. Інакше таблиця попливе. Є можливість об'єднувати осередки. Як зробити таблицю в html Наведемо приклад, html код: приклад таблиці стовпець 1 стовпець 2 Зверніть увагу на осередок	. Ми використовуємо спеціальний атрибут colspan для об'єднання осередків по горизонталі. Його числове значення вказує число поєднуваних стовпців. Також існує аналог цього атрибута: тег		(Заголовок таблиці), де потрібно також прописати colspan. Результат буде таким же. Але найчастіше використовують звичайний td. Тепер розглянемо докладно всі атрибути тега . Атрибути і властивості тега До відкриває тегу можна прописувати різні атрибути. 1. Властивість align = "параметр" - задає вирівнювання таблиці. Може приймати наступні значення: У розібраному вище прикладі ми вирівнювали таблицю по центру align = "center". Цей атрибут можна застосовувати не тільки до таблиці, але і до окремих осередків таблиці . Таким чином, в різних осередках вирівнювання буде різний. наприклад , , , або cols - лінія відображається між колонками none - всі межі ховаються rows - межа малюється між рядками таблиці, створеними через тег 12. Властивість width = "число" - задає ширину таблиці: або в пікселях, або у відсотках. 13. Властивість class = "ім'я_класу" - можна вказати ім'я класу, якому належить таблиця. 14. Властивість style = "стилі" - стилі можна задати індивідуально для кожної таблиці. Тепер настав час зануритися всередину таблиці і розглянути атрибути елементів таблиці. Ці атрибути треба писати в відкриваючому тезі і доступні такі ж параметри, що і для будуть ієрархічно застосовані до всіх (Table Row) і завершується тегом. Окрема осередок в рядку обрамляється парою тегів (Table Data) або (Table Header). тег . завершальні коди, іможуть бути опущені. В цьому випадку кінцем опису рядка або комірки є початок наступного рядка або комірки, або кінець таблиці. Завершальний тег таблиці або рядках ... ... ... 2. Властивість background = "URL" - задає фонової малюнок. Замість URL повинен бути написана адреса фонового зображення. приклад приклад таблиці стовпець 1 стовпець 2 Перетвориться на сторінці в наступне: У розглянутому прикладі наше фонове зображення знаходиться в папці img (яка знаходиться в тій же директорії, що і html-сторінка), а називається зображення fon.gif. Зверніть увагу на те, що в тезі ми додали style = "color: white;" . Оскільки фон майже чорний, то для того, щоб текст не злився з фоном, ми зробили текст білим. 3. Властивість bgcolor = "колір" - задає колір фону таблиці. Як кольору можна вибрати будь-який з усієї палітри (див. Коди і назви html квітів) 4. Властивість border = "число" - задає товщину рамки таблиці. У попередніх прикладах ми вказували border = "1", що означає товщина рамки - 1 піксель. 5. Властивість bordercolor = "колір" - задає колір рамки. Якщо border = "0", то рамки не буде і колір рамки не матиме сенсу. 6. Властивість cellpadding = "число" - відступ від рамки до вмісту осередку в пікселях. 7. Властивість cellspacing = "число" - відстань між осередками в пікселях. 8. Властивість cols = "число" - число стовпців. Якщо його не поставити, то браузер сам визначить число стовпців. Різниця лише в тому, що вказівка ​​цього параметра, швидше за все, прискорить завантаження таблиці. 9. Властивість frame = "параметр" - як відображати межі навколо таблиці. Може приймати наступні значення: void - НЕ малювати кордону border - межа навколо таблиці above - межа по верхньому краю таблиці below - межа знизу таблиці hsides - додати тільки горизонтальні кордону (зверху і знизу таблиці) vsides - малювати тільки вертикальні кордону (зліва і праворуч від таблиці) rhs - межа тільки на правій стороні таблиці lhs - межа тільки на лівій стороні таблиці 10. Властивість height = "число" - задає висоту таблиці: або в пікселях, або у відсотках. 11. Властивість rules = "параметр" - де відображати кордону між осередками. Може приймати наступні значення: all - лінія малюється навколо кожного елементу таблиці groups - лінія відображається між групами, які утворюються тегами . Атрибути і властивості 1. Властивість align = "параметр" - задає вирівнювання окремої комірки таблиці. Може приймати наступні значення: left - вирівнювання по лівому краю center - вирівнювання по центру right - вирівнювання по правому краю 2. Властивість background = "URL" - задає фонове зображення осередки. Замість URL повинен бути написана адреса фонового зображення. 3. Властивість bgcolor = "колір" - задає колір фону комірки. 4. Властивість bordercolor = "колір" - задає колір рамки осередку. 5. Властивість char = "буква" - задає букву, від якої потрібно зробити вирівнювання. Значення атрибута align має бути встановлено як char. 6. Властивість colspan = "число" - задає число поєднуваних горизонтальних осередків. 7. Властивість height = "число" - задає висоту таблиці: або в пікселях, або у відсотках%. 8. Властивість width = "число" - задає ширину таблиці: або в пікселях, або у відсотках%. 9. Властивість rowspan = "число" - задає число поєднуваних вертикальних осередків. 10. Властивість valign = "параметр" - вирівнювання вмісту комірки по вертикалі. top - вирівнювання вмісту комірки по верхньому краю рядка middle - вирівнювання по середині bottom - вирівнювання по нижньому краю baseline - вирівнювання по базовій лінії Примітка 1 для тега . Параметри для одного тега всередині нього Як зробити, щоб кордони осередків в таблиці не склеювалися У разі використання border (межа осередків) і нульових відступів між осередками, вони все одно склеюються і виходить подвоєний border. Щоб це уникнути потрібно прописати в стилях таблиці border-collapse: collapse: ... Шановний читач, тепер Ви дізналися набагато більше про html тезі table. Тепер раджу перейти до наступного уроку. глава 4 Таблиці в HTML Одним з найбільш потужних і широко застосовуваних у HTML коштів є таблиці. Поняття табличного представлення даних не потребує додаткового пояснення. В HTML таблиці використовуються не тільки традиційно, як метод представлення даних, а й як засіб форматування Web-сторінок. Наведемо приклади реально існуючих документів, в яких табличне представлення є зручним способом побудови документа. На рис. 4.1 показаний типовий приклад використання таблиць для представлення числових даних, розбитих по рядках і стовпцях. На рис. 4.2 використання таблиці служить лише цілям форматування документа, завдання взаємного розташування елементів сторінки. При перегляді такого документа відразу не видно, що для його побудови використовується таблиця, так як рамки навколо її вічок не промальовувалися. Перша версія мови HTMLне передбачала спеціальних засобів для відображення таблиць, так як була в основному призначена для написання простого тексту. З розвитком сфер застосування HTML-документів стала актуальною задача представлення даних, для яких характерна наявність ряду рядків і стовпців. Створення документів, що містять вирівняні по колонках дані, на перших порах здійснювалося використанням преформатірованного тексту, всередині якого необхідне вирівнювання забезпечувалося введенням потрібної кількості прогалин. Нагадаємо, що текст всередині пари тегів І виводиться моноширінним шрифтом, і всі прогалини і символи табуляції є значущими. Робота з вирівнювання такого тексту виконувалася вручну, що істотно уповільнювало створення документів. Підтримка табличного представлення даних стала стандартом де-факто, оскільки спочатку була реалізована у всіх провідних браузерах і лише після значного часу була закріплена в специфікації HTML 3.2. Спеціальні засоби для створення таблиць, втім, не скасовують можливості використання преформатірованного тексту. Використання таблиць не обмежується тільки даними, що складаються з рядів і колонок. Одним із застосувань є організація розташування різноманітних даних на сторінці, які можуть складатися з простого тексту, зображень, інших таблиць і т. Д. Правил створення таблиць і прикладів їх використання присвячена дана глава. Мал . 4.1. Типовий приклад HTML-таблиці Мал . 4.2. Приклад таблиці без рамок Створення найпростіших HTML-таблиць Розглянемо спочатку мінімальний набіртегів і їх параметрів, необхідний і достатній для створення нескладних таблиць, а потім перейдемо до їх детального опису. Опис таблиць має розташовуватися всередині розділу документа . Документ може містити довільне число таблиць, причому допускається вкладеність таблиць одна в одну. Кожна таблиця повинна починатися тегом і завершуватися тегом. Усередині цієї пари тегів розташовується опис вмісту таблиці. Будь-яка таблиця складається з однієї або декількох рядків, в кожній з яких задаються дані для окремих осередків. Кожен рядок починається тегом і і використовується зазвичай для осередків-заголовків таблиці, а - для осередків-даних. Різниця в використанні полягає лише в типі шрифту, який використовується за умовчанням для відображення вмісту комірок, а також розташуванню даних усередині осередку. Вміст осередків типу відображається напівжирним (Bold) шрифтом і розташовується по центру (ALIGN = CENTER, VALIGN = MIDDLE). Осередки, певні тегом за замовчуванням відображають дані, вирівняні вліво (ALIGN = LEFT) і посередині (VALIGN = MIDDLE) в вертикальному напрямку. Теги і не можуть з'являтися поза описом рядка таблиці не може бути опущений. Кількість рядків в таблиці визначається числом відкривають тегів
або	серед всіх рядків. Частина осередків можуть не містити ніяких даних, такі осередки описуються парою наступних поспіль тегів -	,

  ів будь-якому місці, проте поза області опису будь-якого з тегів

  ,	або

  і до першого . Ми рекомендуємо дотримуватися цього правила.

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

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

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

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

  
  

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

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

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

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

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

  Тема, наявний внизу тaбліци

  якщо дане описзаголовка додати до наведеного вище прикладу, то таблиця буде відображатися так, як показано на рис. 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.

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

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

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

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

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

  

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

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

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

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

  ,
  ,

  ---

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

  до

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

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

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

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

  осередок 1	Ячeйкa 2	осередок 3
  Ячeйкa 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 три рядки) Ячeйкa 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 Зeлeнoгopcк 13.6 50 Koлпінo 144.6 26 Кронштадт 45.2 48 Ломоносов 42.0 40 Пaвлoвcк 25.4 30 Петродворец 83.8 29 Пушкін 95.1 24 Сестрорецк 34.9 35 Всі міста, підлеглі адміністрації Санкт-Петербурга, мають прямі гopoдcкіe тeлeфoнниe номера. Міста обласного підпорядкування Місто H P Бокситогорск 21.6 ALIGN = RIGHT> 245 Boлxoв 50.3 ALIGN = RIGHT> 122 Bceвoлoжcк 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 Лyгa 41.8 139 (продовження таблиці) Місто H P Любань 4.7 85 Нова Ладога 11.2 ALIGN = RIGHT> 141 Відрадне 22. 9 ALIGN = RIGHT> 40 Поклав 25.1 ALIGN = RIGHT> 246 Пoдпopoжьe 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, і означає розташування таблиці, притиснутою до лівого або правого краю відповідно;

  для тега

  , іякі використовуються для створення рядків, і парні теги, що відповідають за створення осередків. ( Причому закривають теги рядків і осередків можуть бути відсутніми)

  Отже, з огляду на те, що ми вже знаємо, як створити найпростішу HTMLтаблицю, давайте застосуємо наведені вище відомості, і створимо просту таблицю, як показано на (Рис.1).

  Найпростіша таблиця рис.1
  

  Код найпростішої таблиці, Яка показана на малюнку 1 (вище)

  параметр 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, буде згенеровано наступний код: (Частина коду опущена) 3aгoлoвoк тaбліци Cтoлбeц 1 стовпець 2 Cтoлбeц 3 стовпець 4 1 2 3 4 Аналогічним чином дана задача вирішується при використанні компоненти Netscape Composer програми Netscape Communicator. На рис. 4.21 показано діалогове вікно, в якому необхідно заповнити потрібні поля. Як ввести додаткові установки тега передбачена кнопка Extra HTML. Після заповнення полів діалогового вікна слід натиснути кнопку Apply і тоді буде надана можливість заповнення елементів таблиці (рис. 4.22). Мал. 4.21.Діалогове вікно для завдання параметрів таблиці програми Netscape Composer Мал. 4.22.Вихідна позиція курсору введення в порожній таблиці Таблиці в HTML, є найбільш потужним і часто вживаним засобом. В основному веб-майстри застосовують таблиці не тільки як метод угруповання відображення даних, але і для форматування веб-сторінок. Давайте розглянемо обидва способи використання HTML таблиць. Але для початку ми дізнаємося, як додати таблиці в HTML документ, а також розглянемо можливості, які нам надає HTML для роботи з таблицями. Створення найпростішої HTML таблиці Кожна таблиця в HTML складається з безлічі осередків, які розташовуються в рядках. А вже всі ці рядки і утворюють цілу таблицю. Для позначення таблиці застосовується парний тег і. Як вам уже відомо, що таблиці складаються з рядків і осередків. І для того, щоб створити найпростішу таблицю, нам знадобляться ще два тега: це парні теги
  і

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  1-Осередок таблиці	2-Осередок таблиці	3-Осередок таблиці	4-Осередок таблиці
  5-Осередок таблиці	6-Осередок таблиці	7-Осередок таблиці	8-Осередок таблиці
  9-Осередок таблиці	10-Осередок таблиці	11-Осередок таблиці	12-Осередок таблиці

  Код складної таблиці, приклад на малюнку 2

  
  
  
  
  
  
  
  
  
  
  
  

  Об'єднання стовпців Атрибут " colspan"		Об'єднання рядків Атрибут " rowspan"
  Атрибут " valign"" Top "	Атрибут " valign" "bottom"

  Отримана таблиця на малюнку 1 . виглядає негарно. Все це тому, що теги, які ми використовували для створення найпростішої таблиці (

  , , і

  1) Атрибут тега

  "Height". Зверніть увагу, що у тега немає атрибута "width" (ширина), так як тег відповідає за рядок, і, відповідно, за висоту. А за ширину вже відповідають стовпці. Хоч і є у тега атрибут "height", але він практично вже ніде не використовується.

  атрибути тега

  ).

  3) Атрибут тега

  Другий рядок складається з шести стовпців:

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

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

  Тег rowspan - об'єднання рядків

  А якщо нам знадобиться ось така розмітка?

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

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

  Розглянемо ще один приклад:

  ), Можуть мати різні атрибути, які необхідно вказувати: це може бути фон, межі, розміри і так далі. Давайте зараз розглянемо атрибути, які застосовуються для тега і. Для того, щоб побачити як буде змінюватися таблиця з застосовуваними до тегу атрибутами, скопіюйте код таблиці і помістіть його в текстовий документ, З расшіреніем.html і відкрийте браузером, додаючи атрибути в код таблиці і оновлюючи сторінку, ви побачите, як буде виглядати ваша таблиця в браузері. Атрибути тега: 1) Атрибут "border", задає ширину рамки всієї таблиці в пікселях, записується так: . 2) Атрибути "width" і "height" - цей атрибут задає рекомендовану ширину і висоту вашої таблиці, записується так: 3) Атрибут "bordercolor" - задає колір рамки всієї таблиці, записується так: . 4) Атрибут "align" - вирівнювання таблиці, align = left - таблиця буде вирівнюватися по лівому краю, align = right - по правому, записується так: 5) Атрибут "bgcolor" - задає колір фону таблиці, записується так: Думаю, що атрибутів вам досить! Тепер розглянемо атрибути тега:
  атрибути тега
  2) Атрибут тега	"Width", атрибута "height" (висота) у тега	немає, так як тег	відповідає за елемент таблиці і її ширину, а за висоту відповідає рядок (тег
  "Colspan". Значення цього атрибута означає кількість стовпців, яке займає ця група. Іншими словами цей атрибут дозволяє об'єднати декількох суміжних вічок по вертикалі в одну. 4) Атрибут тега	"Rowspan". Значення цього атрибута означає кількість рядків, яке займає ця група. Відповідно цей атрибут дозволяє об'єднати кілька осередків в одну по горизонталі. 5) Атрибут тега	"Align". Цей атрибут дозволяє вирівнювати елементи всередині осередку по горизонталі. Має три значення: "left" (по лівому краю комірки), "center" (по центру), "right" (по правому краю комірки). Якщо нічого не вказано, вирівнювання буде по лівому краю. 6) Атрибут тега	"Valign". Цей атрибут дозволяє вирівнювати елементи всередині осередку по вертикалі. Також як і "align" має всього три значення: "top" (по верху), "middle" (по середині), "bottom" (по низу). За замовчуванням має значення "middle" по середині. Давайте застосуємо те, що ми зараз дізналися. На малюнку 2 зображено наша складна таблиця. Складна таблиця рис.2 Ось в принципі і все, то що необхідно знати про HTML таблиці і успішно ними користуватися. Створення html таблиці в редакторі Joomla. Для створення таблиці в Joomla можна використовувати редактор TinyMce який знаходиться в Joomla за замовчуванням. Тепер використовуючи візуальний редактора Jооmla - Ви можете створювати прості, або складні варіанти таблиць, але будьте уважні і не забувайте про ширину області для контенту на Вашому сайті, щоб при створенні таблиці її ширина не перевищує це значення. Завантажити файли: Відеокурс по HTML від Євгена Попова Безкоштовний відеокурс містить 33 уроку по HTML. Відеокурс, розкриває базові знання з HTML і буде корисний не тільки для початківців сайтостроителей, які ще не знайомі з HTML, але і для більш досвідчених вебмайстрів. Тег colspan - об'єднання стовпців Найпоширенішим застосуванням таблиць складних структур є розмітка web-сторінки. Подивіться на малюнок: Виходить, що нам потрібно, щоб в першій і третій рядках було по одному стовпцю. Це досягається за допомогою параметра colspanтега	. Цей параметр вказує браузеру об'єднати декілька стовпців в один. Значення цього параметра є число, яке вказує скільки стовпців буде об'єднано. наприклад,	Цей стовпець включає в себе два стовпці. Для нашого прикладу: заголовок документа шапка сайту меню контент низ сайту Зверніть увагу, що перший і третій рядки тепер містять по однім стовпці. Розглянемо ще один приклад розмітки web-сторінки: шапка сайту меню меню меню меню меню меню новини контент Порахуйте - скільки рядків і стовпців в цій таблиці? Для цього накладіть подумки сітку на малюнок. Вийде три рядки і шість стовпців. Перший рядок складається з одного стовпця, що включає в себе шість стовпців. Запишемо це:
  шапка сайту
  меню	меню	меню	меню	меню	меню
  новини		контент

  шапка	меню
  контент
  низ сайту

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

  шапка меню

  Другий рядок - це один стовпець (просто його частина прихована другим стовпцем першого рядка):

  контент

  Нарешті, третій рядок - це один стовпець, що включає в себе три стовпці:

  низ сайту

  Використовуючи ці два параметри rowspanі colspanможна створювати таблиці будь-якої складності. Потренуйтеся.

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

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

  Отже, у нас є ось такий код.