глава 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 \u003d CENTER, VALIGN \u003d MIDDLE). Осередки, певні тегом за замовчуванням відображають дані, вирівняні вліво (ALIGN \u003d LEFT) і посередині (VALIGN \u003d MIDDLE) в вертикальному напрямку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Браузер Microsoft Internet Explorer надає додаткові можливості для вибору розташування заголовка. Параметр ALIGN допускає значення LEFT, CENTER і RIGHT для горизонтального вирівнювання поряд з описаними вище значеннями. Відзначимо, що це один з рідкісних випадків, коли широко поширений параметр ALIGN може використовуватися і для горизонтального вирівнювання, і для вертикального. Наприклад, запис ALIGN \u003d RIGHT забезпечить розташування заголовка, притиснутого до правого боку і розміщеного над таблицею. Якщо записати ALIGN \u003d 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 або його наявності не змінюється (винятком є \u200b\u200bвипадок завдання BORDER \u003d 0). Таким чином, мінімальна відстань між двома сусідніми осередками в цих випадках дорівнюватиме подвоєною товщині рамки, т. Е. Двом пикселам. Розташувати осередку якомога ближче один до одного можливо завданням BORDER \u003d 0, що означає відсутність рамок. Деякі браузери можуть не підтримувати завдання чисельного значення параметра BORDER, тоді значення, рівне нулю, буде проігноровано, і таблиця буде промальована з рамками.

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

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

параметр CELLSPACING

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

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

параметр CELLPADDING

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

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

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

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

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

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

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

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

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

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

.

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

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

параметр ALIGN

Даний параметр тега

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

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

дорослого

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

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

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

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

Мал. 4.9. Таблиця без рамок з оточуючий текстом

Цей документ складається з таблиці без рамок з параметром вирівнювання ALIGN \u003d 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 \u003d GROUPS в тезі

або

. Форма запису: COLSPAN \u003d 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 \u003d значення, де в якості значення задається зміст кольору в 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 \u003d RIGHT\u003e 245 Boлxoв 50.3 ALIGN \u003d RIGHT\u003e 122 Bceвoлoжcк 32.9 24 Виборг 80.9 130 Висоцьк 1.0 ALIGN \u003d RIGHT\u003e 159 Гатчина 80.9 46 Івангород 11.9 ALIGN \u003d RIGHT\u003e 147 Каменногорск 5.9 157 Кингисепп 51.5 ALIGN \u003d RIGHT\u003e 138 Кіриші 53.8 ALIGN \u003d RIGHT\u003e 115 Кіровськ 23.8 55 Лодєйне Поле 27.3 ALIGN \u003d RIGHT\u003e 244 Лyгa 41.8 139 (продовження таблиці) Місто H P Любань 4.7 85 Нова Ладога 11.2 ALIGN \u003d RIGHT\u003e 141 Відрадне 22. 9 ALIGN \u003d RIGHT\u003e 40 Поклав 25.1 ALIGN \u003d RIGHT\u003e 246 Пoдпopoжьe 23.1 285 Приморськ 6.7 137 Приозерськ 20.5 ALIGN \u003d RIGHT\u003e 145 Святогірськ 15.8 ALIGN \u003d RIGHT\u003e 201 сланці 42.6 ALIGN \u003d RIGHT\u003e 192 сосновий бір 57.6 81 Тихвін 72.0 ALIGN \u003d RIGHT\u003e 200 Тосно 33.8 53 Ш ліcceльбypг 12.5 64 Мал. 4.14.Приклад вкладених таблиць Результат відображення даного прикладу показаний на рис. 4.14. На перший погляд здається, що в прикладі немає вкладеності таблиць. Насправді весь документ являє собою таблицю, яка не має рамок і складається з заголовка і всього одного рядка, що містить п'ять осередків. Організація такої таблиці служить єдиній меті - розташуванню даних на сторінці. Всередині першого осередку розташовується інша таблиця, що має свій заголовок і складається з трьох стовпців, після якої йде текст, вирівняний посередині. Третя і п'ята осередки також містять окремі таблиці. Друга і четверта комірки - порожні, вони не містять ніяких даних і мають єдиний параметр WIDTH, що визначає її ширину. Їх призначення - ви хочете зробити відступ між першою і третьою, а також третьої і п'ятої осередками, в яких розташовано таблицю. Це один з можливих варіантів завдання такого відступу. Інший варіант - використання параметра CELLSPACING, що визначає відстань між осередками, однак цей параметр задає відступи одночасно і по горизонталі, і по вертикалі, що в даний момент не потрібно. Крім того, порожня клітинка із заданою шириною при звуженні області перегляду буде скорочуватися на відміну від простору, заданого параметром CELLSPACING (так само як і CELLPADDING). Спробуйте на даному прикладі зменшувати ширину області перегляду в браузері або, що призведе до тих жерезультатам, збільшувати розміри шрифту, яким відображається текст. Відстань між таблицями скоротиться до нуля, даючи можливість бачити одночасно всю інформацію якомога довше, однак подальша зміна не призведе до псування таблиці, а надасть можливість горизонтальної прокрутки. За аналогічною схемою можна організувати розміщення інформації, що складається не тільки з таблиць, а й зображень, фрагментів тексту і т. Д. Особливості побудови таблиць В даному розділі розглядаються деякі специфічні можливості окремих браузерів, а також окремі тонкощі побудови і відображення таблиць. Відображення порожніх клітинок в таблицях Однією з особливостей подання таблиць різними браузерами є відображення порожніх клітинок. Відповідно до опису мови всі браузери повинні доповнювати рядки порожніми осередками, якщо в якій-небудь рядку їх кількість задано меншим, ніж в інших рядках. Крім того, в будь-якому місці таблиці можуть перебувати осередки, що не містять даних. Існує відмінність між порожніми осередками та осередками, що містять невидимі дані. У порожніх клітинках всередині пари тегів і і визначав вирівнювання і ширину кожної колонки таблиці. Для прикладу, завдання colspec \u003d "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 \u003d S) тільки з верхньої та нижньої сторони (FRAME \u003d HSIDES). Усередині таблиці малюються лінії сітки, що розділяють групи даних (RULES \u003d 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, буде згенеровано наступний код: (Частина коду опущена) 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. Вихідна позиція курсору введення в порожній таблиці знаходиться тіло таблиці. Тіло складається з рядків і стовпців. Таблиця заповнюється за рядком. кожен тег створює новий рядок. Далі у вкладених створюються стовпці. Можна створювати безліч стовпців. При цьому потрібно стежити за кількістю стовпців в кожному рядку. Наприклад, якщо в першому рядку було 5 стовпців, то і в наступних рядках повинно бути 5 стовпців. Інакше таблиця попливе. Є можливість об'єднувати осередки. Як зробити таблицю в html Наведемо приклад, html код: приклад таблиці стовпець 1 стовпець 2 Зверніть увагу на осередок . Ми використовуємо спеціальний атрибут colspan для об'єднання осередків по горизонталі. Його числове значення вказує число поєднуваних стовпців. Також існує аналог цього атрибута: тег (Заголовок таблиці), де потрібно також прописати colspan. Результат буде таким же. Але найчастіше використовують звичайний td. Тепер розглянемо докладно всі атрибути тега . Атрибути і властивості тега До відкриває тегу можна прописувати різні атрибути. 1. Властивість align \u003d "параметр" - задає вирівнювання таблиці. Може приймати наступні значення: У розібраному вище прикладі ми вирівнювали таблицю по центру align \u003d "center". Цей атрибут можна застосовувати не тільки до таблиці, але і до окремих осередків таблиці . Таким чином, в різних осередках вирівнювання буде різний. наприклад , , , або cols - лінія відображається між колонками none - всі межі ховаються rows - межа малюється між рядками таблиці, створеними через тег 12. Властивість width \u003d "число" - задає ширину таблиці: або в пікселях, або у відсотках. 13. Властивість class \u003d "ім'я_класу" - можна вказати ім'я класу, якому належить таблиця. 14. Властивість style \u003d "стилі" - стилі можна задати індивідуально для кожної таблиці. Тепер настав час зануритися всередину таблиці і розглянути атрибути елементів таблиці. Ці атрибути треба писати в відкриваючому тезі і доступні такі ж параметри, що і для будуть ієрархічно застосовані до всіх або рядках ... ... ... 2. Властивість background \u003d "URL" - задає фонової малюнок. Замість URL повинен бути написана адреса фонового зображення. приклад приклад таблиці стовпець 1 стовпець 2 Перетвориться на сторінці в наступне: У розглянутому прикладі наше фонове зображення знаходиться в папці img (яка знаходиться в тій же директорії, що і html-сторінка), а називається зображення fon.gif. Зверніть увагу на те, що в тезі ми додали style \u003d "color: white;" . Оскільки фон майже чорний, то для того, щоб текст не злився з фоном, ми зробили текст білим. 3. Властивість bgcolor \u003d "колір" - задає колір фону таблиці. Як кольору можна вибрати будь-який з усієї палітри (див. Коди і назви html квітів) 4. Властивість border \u003d "число" - задає товщину рамки таблиці. У попередніх прикладах ми вказували border \u003d "1", що означає товщина рамки - 1 піксель. 5. Властивість bordercolor \u003d "колір" - задає колір рамки. Якщо border \u003d "0", то рамки не буде і колір рамки не матиме сенсу. 6. Властивість cellpadding \u003d "число" - відступ від рамки до вмісту осередку в пікселях. 7. Властивість cellspacing \u003d "число" - відстань між осередками в пікселях. 8. Властивість cols \u003d "число" - число стовпців. Якщо його не поставити, то браузер сам визначить число стовпців. Різниця лише в тому, що вказівка \u200b\u200bцього параметра, швидше за все, прискорить завантаження таблиці. 9. Властивість frame \u003d "параметр" - як відображати межі навколо таблиці. Може приймати наступні значення: void - НЕ малювати кордону border - межа навколо таблиці above - межа по верхньому краю таблиці below - межа знизу таблиці hsides - додати тільки горизонтальні кордону (зверху і знизу таблиці) vsides - малювати тільки вертикальні кордону (зліва і праворуч від таблиці) rhs - межа тільки на правій стороні таблиці lhs - межа тільки на лівій стороні таблиці 10. Властивість height \u003d "число" - задає висоту таблиці: або в пікселях, або у відсотках. 11. Властивість rules \u003d "параметр" - де відображати кордону між осередками. Може приймати наступні значення: all - лінія малюється навколо кожного елементу таблиці groups - лінія відображається між групами, які утворюються тегами . Атрибути і властивості 1. Властивість align \u003d "параметр" - задає вирівнювання окремої комірки таблиці. Може приймати наступні значення: left - вирівнювання по лівому краю center - вирівнювання по центру right - вирівнювання по правому краю 2. Властивість background \u003d "URL" - задає фонове зображення осередки. Замість URL повинен бути написана адреса фонового зображення. 3. Властивість bgcolor \u003d "колір" - задає колір фону комірки. 4. Властивість bordercolor \u003d "колір" - задає колір рамки осередку. 5. Властивість char \u003d "буква" - задає букву, від якої потрібно зробити вирівнювання. Значення атрибута align має бути встановлено як char. 6. Властивість colspan \u003d "число" - задає число поєднуваних горизонтальних осередків. 7. Властивість height \u003d "число" - задає висоту таблиці: або в пікселях, або у відсотках%. 8. Властивість width \u003d "число" - задає ширину таблиці: або в пікселях, або у відсотках%. 9. Властивість rowspan \u003d "число" - задає число поєднуваних вертикальних осередків. 10. Властивість valign \u003d "параметр" - вирівнювання вмісту комірки по вертикалі. top - вирівнювання вмісту комірки по верхньому краю рядка middle - вирівнювання по середині bottom - вирівнювання по нижньому краю baseline - вирівнювання по базовій лінії Примітка 1 для тега . Параметри для одного тега всередині нього Як зробити, щоб кордони осередків в таблиці не склеювалися У разі використання border (межа осередків) і нульових відступів між осередками, вони все одно склеюються і виходить подвоєний border. Щоб це уникнути потрібно прописати в стилях таблиці border-collapse: collapse: ... Шановний читач, тепер Ви дізналися набагато більше про html тезі table. Тепер раджу перейти до наступного уроку. За допомогою атрибутів COLSPAN, ROWSPAN можна об'єднувати кілька сусідніх комірок стовпчика або рядка в одну велику клітинку. Атрибут COLSPAN тегів і . Текст, розміщений між тегами , Не буде наслідувати цей стиль, оскільки тег , Ні тега . Горизонтальне вирівнювання тексту в певному стовпці таблиці можна змінити, вказавши стиль text-align для псевдокласу td: nth-child (n) , Де n - номер стовпчика. Однак, цей метод не спрацює, якщо серед елементів таблиці присутній атрибут colspan. приклад , дозволяє зробити злиття осередків кількох стовпців в межах одного рядка. Атрибут ROWSPAN - осередків з декількох рядків в межах одного стовпчика. Цифра, що вказується в цих атрибутах, вказує кількість осередків, які будуть піддані злиття. Оскільки при виконанні операцій злиття дуже легко заплутатися, то настійно рекомендую зробити попередній ескіз таблиці на папері. приклад: і Найпростіше зрозуміти, як можна використовувати угруповання рядків і стовпців на прикладі таблиці Судоку. Тег col встановлює параметри окремо для кожного стовпчика. При цьому неважливо, як написати в вихідному коді: або приклад HTML-код: 1111 22222 33333 44444 55555 66666 77777 88888 99999 Відображення в браузері: 1111 22222 33333 44444 55555 66666 77777 88888 99999 Поліпшення зовнішнього вигляду таблиці html-сторінки Атрибут CELLSPACING дає можливість задавати розмір смуги чистого простору, що обрамляють таблицю ззовні. За замовчуванням браузер розділяє елементи таблиці смугою в 2 пікселя. Атрибут CELLPADDING задає розміри смуг чистого простору всередині осередку, відокремлюючи її вміст від зовнішніх кордонів. За замовчуванням ця величина дорівнює 1 пікселю. Щоб графічні зображення, поміщені в сусідні осередки таблиці, виглядали як єдине ціле, треба задати атрибутам CELLSPACING, CELLPADDING нульові значення. Відображення меж таблиці html-сторінки Якщо значення атрибута BORDER тега відмінно від нуля, то браузер укладає таблицю в рамку і розмежовує сусідні рядки і стовпці таблиці. За допомогою атрибутів FRAME, RULES можна вказати які саме частини обрамлень таблиці слід показувати. Атрибут FRAME служить для визначення фрагментів зовнішнього обриси таблиці. Атрибут RULES - вказує набір внутрішніх розділових ліній. Нижче наведені допустимі значення цих атрибутів. FRAME Значення Результат void Всі лінії відсутні above Лінія над таблицею below Лінія під таблицею rhs Лінія праворуч від таблиці lhs Лінія зліва від таблиці hsides Лінії над і під таблицею vsides Лінії зліва і праворуч від таблиці border Всі лінії присутні (за замовчуванням) RULES none Всі лінії відсутні cols лінії між стовпцями rows лінії між рядками groups лінії між групами стовпців і рядків all Всі лінії присутні (за замовчуванням) приклад: HTML-код: 111 111 111 111 111 111 Відображення в браузері: 111 111 111 111 111 111 Перенесення слів в осередках таблиці html-сторінки За замовчуванням браузер робить автоматичний перенос слів тексту всередині комірки таблиці. Атрибут NOWRAP примусово відключає функцію перенесення слів усередині таблиці і відображає текст в один рядок. Тому цей атрибут рекомендують застосовувати по відношенню до елементів таблиці, що містить короткий текст, тому що в іншому випадку він вийде за межі вікна браузера. Слід сказати, що цей атрибут не робить вплив на текст комірки, відформатований за допомогою тегів , . Вкладені таблиці html-сторінки Вкладення таблиць одну в іншу - дуже поширений прийом оформлення зовнішнього вигляду Веб-сторінки. Перш за все треба побудувати головну таблицю, а потім в її осередках розмістити дочірні таблиці. Визначаючи таблиці, треба не забувати включати в їх опис все закривають теги, що містять символ косою риси, тому що пропуск всього одного такого дескриптора спотворить таблицю кардинальним чином. Не слід, також, зловживати вкладенням, тому що в цьому випадку істотно сповільнюється завантаження сторінки браузером. Форматування вкладених таблиць здійснюється за загальними правилами, що, власне і робить сторінку привабливою. приклад: . Закриває тег обов'язковий. Увага: без використання всіх цих тегів таблицю створити неможливо. Тепер спробуємо скористатися теорією і створимо таблицю на практиці. завдання: створити таблицю з одного ряду, де буде три стовпчика. HTML-код: 111 111 01 01 01 01 111 111 111 Відображення в браузері: 111 111 01 01 01 01 111 111 111 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 результат: Ось і закінчили з таблицями. Ви тепер зможете самостійно створити таблицю будь-якої складності. Закріпіть даний урок. Спробуйте самостійно створити будь-яку таблицю. Зв'яжіться зі мною в наступному уроці. Підписуйтесь на оновлення мого блогу. Попередній запис Наступний запис Таблиця c рамками ім'я Прізвище Лариса Ісаєва Дмитро Колесніков РЕЗУЛЬТАТ: Таблиця без рамок Таблиця c рамками атрибути тегів і для об'єднання осередків приклад тхори вага розмір самці 1.2 - 2.5 кг до 70см самки 0.7 - 1.0 кг до 40см РЕЗУЛЬТАТ: тхори вага розмір самці 1.2 - 2.5 кг до 70см самки 0.7 - 1.0 кг до 40см За стандартом HTML5 все раніше використовувані атрибути таблиці, такі як border, cellspacing, cellpadding і ін. більше не підтримуються і їх використання валідатор вважає помилками в коді. Для оформлення таблиць потрібно використовувати CSS-стилі, з допомогою яких можна замінити всі застарілі атрибути таблиць. Наприклад, замість атрибута cellspacing для зміни відстані між елементами таблиці використовується властивість border-spacing, А для вирівнювання вмісту в осередках таблиці - властивості text-align і vertical-aling. CSS-стилі для оформлення таблиць Теги групування рядків html таблиці Для створення більш складних таблиць можна використовувати теги: приклад споживання пива П.І.Б. літрів Разом 250 Іванов Іван Іванович 133 Петров Петро Петрович 117 РЕЗУЛЬТАТ: Теги групування стовпців html таблиці Атрибут тегів жовтий червоний РЕЗУЛЬТАТ: Не намагайтеся встановити стиль text-align для тегів ... не є нащадком ні тега Найменування Ціна, руб.) Похвилинна оплата солярію (від 4 хвилин) 15 50 хвилин солярію (14 руб / хв, 1 міс.) 700 100 хвилин солярію (13 руб / хв, 2 міс.) 1300 200 хвилин солярію (12 руб / хв, 3 міс.) 2400 РЕЗУЛЬТАТ: Однак, цей метод не спрацює, якщо серед елементів таблиці присутній атрибут colspan. Чи не знайшли відповідь на своє питання? Подивіться тут Глобальні атрибути Атрибути форм HTML5 Введення в JSON Що за файл json txt Регулярні вирази (об'єкт RegExp) Перевірка форми регулярні вирази javascript приклади