Параметри рамки рамки. Створення рамок у CSS. Властивість border. приклад. Зміна кольору рамки при наведенні курсору миші

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

Кожен тег створює новий рядок. Далі у вкладених створюються стовпці. Можна створювати багато стовпців. При цьому слід стежити за кількістю стовпців у кожному рядку. Наприклад, якщо у першому рядку було 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. Тепер раджу перейти до наступного уроку.


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

    Засоби опису таблиць у HTML

    З розвитком WWW стало зрозуміло, що коштів, закладених у НТМL, недостатньо для якісного відображення різного типу документів. Недоліком НТМL була відсутність у його складі засобів відображення таблиць. Для цього зазвичай використовувався передформатований текст (тег 

    ), у якому таблиця описувалася символами АSСII.  Але така форма представлення таблиць була недостатньо високої якості та вибивалася із загального стилю документа.  Після введення таблиць в HTML у Web-майстрів з'явився непросто інструмент розміщення текстових і числових даних, а потужний засіб дизайну розміщувати у потрібному місці екрану графічних образів і тексту.
    

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

    Для опису таблиць використовується тег<ТАВLЕ>.  Тег<ТАВLЕ>, як і багато інших, автоматично переводить рядок до та після таблиці.
    

    Створення рядка таблиці - тег<ТR>
    

    Тег<ТR>(Таble Row, рядок таблиці) створює рядок таблиці.  Весь текст, інші теги та атрибути, які потрібно помістити в один рядок, повинні розміщуватись між тегами lt;.
    

    Визначення осередків таблиці - тег<ТD>
    

    Усередині рядка таблиці зазвичай розміщуються осередки з даними.  Кожен осередок, що містить текст або зображення, повинен бути оточений тегами<ТD>.  Число тегів<ТD>у рядку визначає кількість осередків
    
 

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

    Заголовки стовпців таблиці - тег<ТН>

    Заголовки для стовпців та рядків таблиці задаються за допомогою тега заголовка<ТН>(Таblе Неаder, заголовок таблиці). Ці теги подібні<ТD>. Відмінність полягає в тому, що текст, укладений між тегами<ТН>, автоматично записується жирним шрифтом і за умовчанням розташовується посередині комірки. Центрування можна скасувати та вирівняти текст по лівому або правому краю. Якщо скористатися<ТD>з тегом<В>та атрибутом<АLIGN=center>, текст також буде виглядати як заголовок. Однак слід мати на увазі, що не всі браузери підтримують у таблицях жирний шрифт, тому краще задавати заголовки таблиць за допомогою<ТН>.

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

    Використання заголовків таблиці - тег<САРТIОN>

    Тег

    дозволяє створювати заголовки таблиці. За замовчуванням заголовки центруються і розміщуються або над (<САРТION АLIGN=top>), або під таблицею (<САРТION ALIGN=bottom>). Заголовок може складатися з будь-якого тексту та зображень. Текст буде розбитий на рядки, які відповідають ширині таблиці. Іноді тег<САРТION>використовується для підпису під малюнком. І тому досить описати таблицю без кордонів.

    Заголовок над таблицею
    Текст чи дані Текст чи дані Текст чи дані Текст чи дані
    Заголовок під таблицею
    Текст чи дані Текст чи дані Текст чи дані

    Атрибут NOWRAP

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

    Атрибут СОLSPAN

    Теги<ТD>і<ТН>модифікуються за допомогою атрибуту СОLSPAN (Column Span, з'єднання стовпців). Якщо ви хочете зробити якийсь осередок ширшим, ніж верхній або нижній, можна скористатися атрибутом СОLSPAN, щоб розтягнути його над будь-якою кількістю звичайних осередків.

    Якщо ви хочете зробити якийсь осередок ширшим, ніж верхній або нижній, можна скористатися атрибутом СОLSPAN=2,
    щоб розтягнути її над будь-якою кількістю звичайних осередків.

    Атрибут ROWSPAN

    Атрибут ROWSPAN, який використовується в тегах<ТD>і<ТН>, Подібний до атрибуту СОLSPAN=, тільки він задає число рядків, на які розтягується комірка. Якщо ви вказали в атрибуті ROWSPAN=s число, більше одиниці, то відповідна кількість рядків повинна знаходитися під коміркою, що розтягується. Внизу таблиці її помістити не можна.

    Атрибут WIDТН

    Атрибут WIDТН застосовується у двох випадках. Можна помістити його у тег<ТАВLЕ>, щоб дати ширину всієї таблиці, а можна використовувати в тегах<ТD>або<ТН>, щоб встановити ширину осередку або групи осередків. Ширину можна вказувати у пікселах або у відсотках. Наприклад, якщо ви задали в тезі<ТАВLЕ>WIDTH=250, ви отримаєте таблицю шириною 250 пікселів, незалежно від розміру сторінки на моніторі. При завданні WIDТН=50% у тезі<ТАВLЕ>таблиця займатиме половину ширини сторінки за будь-якого розміру зображення на екрані. Отже, вказуючи ширину таблиці у відсотках, майте на увазі, що якщо користувач має вузьку область перегляду, ваша сторінка може виглядати дещо дивно. Якщо ви використовуєте пікселі, і таблиця виявляється ширшою за область перегляду, внизу з'явиться смуга прокручування для переміщення вправо і вліво по сторінці. Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці може бути корисним.

    Текст або дані – ширина 100%
    або
    Текст або дані – ширина 50%
    або
    Текст або дані – ширина 200 пікселів
    або
    Текст або дані – ширина 100 пікселів

    Застосування порожніх осередків

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

    Атрибут СЕLLРАDDING

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

    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані

    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані

    Атрибути АLIGN та VALIGN

    Теги<ТR>, <ТD>і<ТН>можна модифікувати за допомогою атрибутів ALIGN та VALIGN. Атрибут АLIGN визначає вирівнювання тексту та графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання може бути задано декількома способами:

    ALIGN=blееdleftпритискає вміст комірки впритул до лівого краю.

    ALIGN = leftвирівнює вміст комірки лівого краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

    АLIGN=сентермає у своєму розпорядженні вміст осередку по центру.

    АLIGN = rightвирівнює вміст комірки з правого краю з урахуванням відступу, заданого атрибутом СЕLLPADDING.

    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані

    Атрибут VALIGN здійснює вирівнювання тексту та графіки всередині комірки по вертикалі. Вертикальне вирівнювання може бути задано декількома способами:

    VALIGN=topвирівнює вміст комірки по її верхній межі.

    VALIGN=middleцентрує вміст осередку по вертикалі.

    VALIGN=bottomвирівнює вміст комірки по її нижній межі.

    Атрибут VALIGN здійснює вирівнювання тексту та графіки всередині комірки по вертикалі. верх, середина, низ.
    VALIGN=top Вирівнює вміст комірки по її верхній межі. верх, верх, верх.
    VALIGN=middle Центрує вміст осередку по вертикалі. середина, середина, середина.
    VALIGN=bottom Вирівнює вміст клітинки по її нижній межі. низ, низ, низ.

    Атрибут BORDER

    У тезі<ТАВLЕ>часто визначають, як виглядатимуть рамки, тобто лінії, що оточують осередки таблиці та саму таблицю. Якщо ви не поставите рамку, то отримаєте таблицю без ліній, але простір під них буде відведено. Того ж результату можна досягти, задавши<ТАВLЕ ВОRDER=0>. Іноді хочеться зробити кордон товстішим, щоб він краще виділявся. Можна привернути увагу до малюнку чи тексту задати виключно жирні кордону. p align="justify"> При створенні вкладених таблиць доводиться робити для різних таблиць кордону різної товщини, щоб їх легше було розрізняти.

    Атрибут CELLSPACING

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

    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані

    Атрибут BGCOLOR

    Цей атрибут дозволяє встановити колір тла. Залежно від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, рядка або окремої комірки. Значення цього атрибута є код RGB або стандартна назва кольору.

    Текст чи дані Текст чи дані Текст чи дані
    Текст чи дані Текст чи дані Текст чи дані

    Атрибут BACKGROUND

    Цей атрибут визначає фонове зображення для таблиць. Застосуємо до тегів TABLE та TD. Його значенням є URL файлу із фоновим зображенням. Використання цього атрибута розглядається нижче.

    Використання таблиць у дизайні сторінки

    Таблиці хороші тим, що за бажання можна зробити їх межі невидимими. Це дозволяє за допомогою тега<ТАВLЕ>красиво розміщувати на сторінці текст та графіку. Поки тег<ТАВLЕ>залишається єдиним потужним засобом форматування HTML. Дизайнери Web-сторінок зараз мають практично ту саму свободу щодо використання "порожнього простору", що і творці друкованих сторінок. Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на веб-сторінках.

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

    Уральський державний педагогічний університет

    Ласкаво просимо!

    Навчальний курс "Основи WEB-мастерингу"

    Створення різнокольорових таблиць

    Деякі браузери дозволяють відображати кольори. Є кілька способів розфарбувати таблицю, переважно вони залежить від використовуваного браузера.

    Кольорові кордони в Netscape Navigator. Ви не тільки можете оточити таблицю красивою рамкою, але й задати для неї колір, відмінний від кольорів тексту та фону. Створіть простий сірий GIF (або будь-який GIF, який ви хотіли б мати як тло) і визначте його в тезі<ВODY>як фон сторінки. Потім встановіть колір фону сторінки. В результаті ваш тег<ВОDY>виглядатиме приблизно так:

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

    Розділ 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) у вертикальному напрямку.

    Теги

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Параметр BORDER

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

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

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

    Наприклад,

    або
    .

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

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


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

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

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

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

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

    Параметр CELLSPACING

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


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

    Параметр CELLPADDING

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

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


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

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

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

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

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

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

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

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

    .

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

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

    Параметр ALIGN

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

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

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

    Таблиця з обтекаючим її текстом


    дорослого

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

  • Абрам
  • Олександр
  • Олексій
  • Альберт
  • Анатолій
  • Андрій

  • Аркадій
  • Борис
  • Вадим
  • Валентин
  • Валерій
  • Василь

  • Віктор
  • Віталій
  • Володимир
  • Владислав
  • В'ячеслав

  • Генадій
  • Георгій
  • Герман
  • Григорій
  • Дмитро

    		•

  • Євген
  • Юхим
  • Іван
  • Ігор
  • Ілля
  • Йосип
  • Костянтин

  • Лев
  • Леонід
  • Михайло
  • Микола
  • Олег
  • Павло
  • Петро

  • Роман
  • Семен
  • Сергій
  • Станіслав
  • Едуард
  • Юрій
  • Яків

    		•








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

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

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

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

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

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

      Таблиця без обтічного тексту

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

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

    • Абрам
    • Олександр
    • Олексій
    • Альберт
    • Анатолій
    • Андрій

    • Аркадій
    • Борис
    • Вадим
    • Валентин
    • Валерій
    • Василь

    • Віктор
    • Віталій
    • Володимир
    • Владислав
    • В'ячеслав

    • Генадій
    • Георгій
    • Герман
    • Григорій
    • Дмитро

      		•

    • Євген
    • Юхим
    • Іван
    • Ігор
    • Ілля
    • Йосип
    • Костянтин

    • Лев
    • Леонід
    • Михайло
    • Ніколай
    • Олег
    • Павло
    • Петро

    • Роман
    • Семен
    • Сергій
    • Станіслав
    • Едуард
    • Юрій
    • Яків

      		•

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

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

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

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

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

      ,
      ,

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

      до

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      або . Форма запису: COLSPAN = num, де num - числове значення, що визначає, на скільки стовпців слід розширити поточну комірку по горизонталі. Застосування параметра ROWSPAN аналогічне, тільки тут вказується кількість рядків, які має захопити поточний осередок по вертикалі. За промовчанням для цих параметрів встановлюється значення, що дорівнює одиниці. Допустимо одночасне завдання значень обох параметрів для однієї комірки. Правильне встановлення значень цих параметрів може виявитися не дуже простим завданням, тим більше, що більшість HTML-редакторів дозволяють візуально конструювати з наступною генерацією HTML-кодів лише найпростіші таблиці.

      На рис. 4.12 показаний приклад відображення таблиці, отриманий за наступним HTML-кодом:

      Використання параметрів COLSPAN та ROWSPAN

      Осередок, що захоплює два рядки Осередок, що захоплює два стовпці
      Осередок 3 Осередок 4
      Осередок 5 Осередок 6 Осередок 7


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

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

      Наведемо приклад коду HTML (відображення якого показано на рис. 4.13), у якому протяжні комірки сформовані некоректно.

      Неправильне використання протяжних осередків

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

      Осередок 3
      (поширена
      Ha три
      рядки)
      Комірка 4Осередок 5
      Осередок 6 Осередок 7 (поширена на два стовпці)

      Мал. 4.13.Результат некоректного визначення протяжних осередків (накладення тексту)

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

      , , не містить жодної інформації або однієї або більше прогалин, які не трактуються як дані. Осередки, що містять невидимі дані, наприклад, можуть містити код або код перекладу рядка
      , або будь-який текст, колір якого збігається з кольором фону комірки. Якщо комірки, що містять дані (нехай навіть невидимі), відображаються всіма браузерами однаково, порожні комірки будуть показані по-різному. Браузер Netscape порожню комірку не показує, тобто місце, де розташовується ця комірка, буде зафарбоване кольором фону сторінки, а не кольором фону комірки на відміну від осередків, що містять дані. Навколо порожніх осередків не промальовується рамка. Приклад таблиці з порожнім осередком наведено на рис. 4.15.


      Мал. 4.15.Пустий осередок таблиці відображається по-різному різними браузерами

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

      Вирівнювання даних у стовпцях таблиці

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

      . Однак частіше необхідно забезпечити однакове вирівнювання для всіх елементів одного стовпця, так як у більшості випадків стовпці розташовуються однорідні дані. У ранніх версіях HTML для цього пропонувалося використовувати параметр COLSPEC (COLumn SPECification), який ставився у тезі
      і . Ця можливість не передбачається специфікацією HTML, проте підтримується як Netscape, і Microsoft Internet Explorer. Форма запису така сама, як і для тега , а саме: BGCOLOR=значення, де як значення задається вміст кольору в форматі RGB або його назва.

      Приклад:

      		або .

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

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

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

      Міста Ленінградської області

      Міста Ленінградської області

      H - населення міста (тис.жит., 1992)

      P - відстань від Санкт-Петербурга (км)

      Міста, підпорядковані Санкт-Петербургу
      МістоHP
      Зеленогірськ 13.6

      50

      Колпіно144.6

      26

      Кронштадт 45.2

      48

      Ломоносів 42.0

      40

      Повлівськ 25.4

      30

      Петродворець 83.8

      29

      Пушкін 95.1

      24

      Сестрорецьк 34.9

      35

      Усі міста, підпорядковані
      адміністрації
      Санкт-Петербурга, мають
      прямі міські
      телефонні номери.

      Міста обласного підпорядкування
      МістоHP
      Бокситогорськ 21.6

      ALIGN = RIGHT> 245

      Болхов 50.3

      ALIGN = RIGHT> 122

      Всеволожськ 32.9

      24

      Виборг 80.9 130
      Висоцьк 1.0

      ALIGN = RIGHT> 159

      Гатчина 80.9 46
      Івангород 11.9

      ALIGN = RIGHT> 147

      Кам'яногірськ 5.9 157
      Кінгісепп 51.5

      ALIGN = RIGHT> 138

      Кіріші 53.8

      ALIGN = RIGHT> 115

      Кіровськ 23.8

      55

      Лодейне поле 27.3

      ALIGN = RIGHT> 244

      Луга 41.8139

      (продовження таблиці)
      МістоHP
      Любань 4.7

      85

      Нова Ладога 11.2

      ALIGN = RIGHT> 141

      Втішне 22. 9

      ALIGN=RIGHT>40

      Пікалево 25.1

      ALIGN = RIGHT> 246

      Підпорожжі 23.1285
      Приморськ 6.7137
      Приозерськ 20.5

      ALIGN = RIGHT> 145

      Світогорськ 15.8

      ALIGN = RIGHT> 201

      Сланці 42.6

      ALIGN = RIGHT> 192

      сосновий бір 57.6

      81

      Тихвін 72.0

      ALIGN=RIGHT>200

      Тосно 33.8

      53

      Ш лиcceльбypг 12.5

      64

      Мал. 4.14.Приклад вкладених таблиць

      Результат відображення цього прикладу показано на рис. 4.14.

      На погляд здається, що у прикладі немає вкладеності таблиць. Насправді весь документ є таблицею, що не має рамок і складається з заголовка і всього одного рядка, що містить п'ять осередків. Організація такої таблиці служить єдиною метою - розташування даних на сторінці. Усередині першого осередку розташовується інша таблиця, що має свій заголовок і складається з трьох стовпців, після якої йде текст, вирівняний посередині. Третій і п'ятий осередки також містять окремі таблиці. Другий і четвертий осередки - порожні, вони містять ніяких даних і мають єдиний параметр WIDTH, визначальний її ширину. Їх призначення - задати відступ між першим і третім, а також третім і п'ятим осередками, в яких розташовуються таблиці. Це один із можливих варіантів завдання такого відступу. Інший варіант - використання параметра CELLSPACING, що визначає відстань між осередками, проте цей параметр задає відступи одночасно і по горизонталі, і по вертикалі, що в даний момент не потрібно. Крім того, порожня комірка із заданою шириною при звуженні області перегляду скорочуватиметься на відміну від простору, заданого параметром CELLSPACING (як і CELLPADDING). Спробуйте на цьому прикладі зменшувати ширину області перегляду в браузері або, що призведе до тих же результатів, збільшувати розмір шрифту, яким відображається текст. Відстань між таблицями скоротиться до нуля, даючи можливість бачити одночасно всю інформацію якомога довше, проте подальша зміна не призведе до псування таблиці, а надасть можливість горизонтального прокручування. За аналогічною схемою можна організувати розміщення інформації, що складається як з таблиць, а й зображень, фрагментів тексту тощо.

      Особливості побудови таблиць

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

      Відображення порожніх осередків у таблицях

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

      		і
      і визначав вирівнювання та ширину кожної колонки таблиці. Для прикладу, завдання colspec="L40 R50 C80" визначало для трьох колонок таблиці вирівнювання даних у комірках: для першої колонки - LEFT, для другої - RIGHT і для третьої - CENTER, а також ширину кожної колонки. У міру розвитку мови HTML від використання цього параметра відмовилися, і в даний час вона не входить до специфікації мови і не підтримується більшістю браузерів. У результаті для вирішення такого завдання в Netscape Navigator немає спеціальних засобів, і єдиним варіантом залишається використання вирівнювання за замовчуванням, або завдання відповідних значень в кожному осередку, де це необхідно.

      У Microsoft Internet Explorer передбачені спеціальні теги -

      і . Ці теги повинні розташовуватися відразу ж за описом
      перед першою появою тега .

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

      і можуть бути SPAN, що визначає кількість суміжних колонок, на які поширюється дія значень параметрів, і ALIGN, що визначає горизонтальне вирівнювання даних у всіх осередках відповідного стовпця (або стовпців). Допустимими значеннями параметра ALIGN є LEFT, RIGHT та CENTER. Для параметра SPAN значення за замовчуванням дорівнює одиниці.

      Тег

      додатково дозволяє задавати параметр VALIGN, що визначає вертикальне вирівнювання даних у комірках. Допустимими значеннями параметра VALIGN є MIDDLE, TOP та BOTTOM.

      Відмінність між тэгами

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

      Наведемо приклад. Нехай необхідно побудувати таблицю, що містить 6 стовпців, причому дані перших трьох з них повинні бути вирівняні вправо, а наступних трьох - посередині. Для вирішення цього завдання слід записати такий фрагмент HTML-коду:

      (Дані для таблиці)

      Результат відображення цього коду показано на рис. 4.16.

      Мал. 4.16.Таблиця з різними параметрами вирівнювання даних у групах осередків

      Інший приклад. Нехай у попередній таблиці перші дві колонки мають бути вирівняні праворуч, а третя - посередині, причому всі три колонки необхідно об'єднати в групу. Наступні три колонки також повинні бути об'єднані в групу та мати вирівнювання, аналогічне першій групі. Для вирішення цього завдання слід записати такий фрагмент HTML-коду:

      (Дані для таблиці)

      У цьому прикладі після тегу

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

      Порада

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

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


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

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

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

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

      Примітка

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

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

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

      , і
      , , w

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

      Теги

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

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

      і
      .

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

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

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

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

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

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

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

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

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

      Приклад:

      .

      Примітка

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

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

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

      Виділення заголовка та підсумкового рядка

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


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

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

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

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

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

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

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

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

      Примітка

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

      • для тега
      параметр ALIGN може набувати значення LEFT або RIGHT, і означає розташування таблиці, притиснутої до лівого або правого краю відповідно;
    • для тега
      • ,
      параметр ALIGN приймає значення ТОР чи BOTTOM, і означає розташування заголовка таблиці над таблицею чи під нею;
    • для тегів
      • і параметр ALIGN приймає значення LEFT, RIGHT або CENTER, і означає вирівнювання вмісту відповідної комірки (або осередків) таблиці по горизонталі.

      Альтернатива табличного подання

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

      Деякі інші способи, які використовують поняття таблиць:

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

      Підготовка таблиць

      Для підготовки HTML-таблиць можуть бути використані будь-які редактори, більшість з яких мають засоби візуального створення таблиць. Наведемо приклад підготовки таблиці у редакторі HotDog Professional. Для створення таблиці достатньо вибрати пункт Tables із меню Insert, після чого буде видано діалогове вікно, показане на рис. 4.19. Створення таблиці полягає у заповненні відповідних полів у вікні. Після визначення кількості рядків і стовпців у таблиці можна перейти до безпосереднього заповнення окремих осередків таблиці, які будуть показані у цьому діалоговому вікні. Діалогове вікно має кнопку Preview, натискання якої дозволяє переглянути таблицю, що отримується, за допомогою вбудованого браузера (рис. 4.20).

      Мал. 4.19.Діалогове вікно для створення таблиць


      Мал. 4.20.Таблиця, показана за допомогою вбудованого браузера

      Після завершення підготовки даних до таблиці слід натиснути кнопку ОК. Тоді згенерований код опису таблиці буде вставлений в HTML-документ, що редагується. Наприклад, наведеного на рис. 4.19, буде згенеровано наступний код:

      (частина коду опущена)

      3головок таблиці
      Стовпець 1 Стовпець 2 Стовпець 3 Стовпець 4
      1 2 3 4

      Аналогічно це завдання вирішується під час використання компоненти Netscape Composer програми Netscape Communicator. На рис. 4.21 показано діалогове вікно, де необхідно заповнити потрібні поля. Для введення додаткових параметрів тега

      передбачено кнопку Extra HTML. Після заповнення полів діалогового вікна слід натиснути кнопку Apply і тоді буде надано можливість заповнення осередків таблиці (рис. 4.22).

      Мал. 4.21.Діалогове вікно для встановлення параметрів таблиці програми Netscape Composer


      Мал. 4.22.Вихідна позиція курсору введення в порожній таблиці



      ПОХОДЖЕННЯ СТАТТІ

      Рекомендуємо

      Copyright 2024 - Ремонт комп'ютерів та ноутбуків. Відеокарти, вінчестери, Інтернет, монітори.