Основи мови розмітки гіпертексту

3.3. Форматування табличних даних

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

Таблиці в HTML визначаються за допомогою контейнера

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

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

. Вирівнювання найменування задається за допомогою атрибута ALIGN. який може набувати значень TOP (зверху таблиці) і BOTTOM (знизу таблиці).

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

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

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

і тегів осередків-даних (Допускається форма запису без закривають тегів). Як і для рядків таблиці за допомогою спеціальних атрибутів тегів
.
. . і можна управляти форматуванням конкретних елементів таблиці.

- початок контейнера таблиці

... - перший рядок / шапка
... - 1 рядок
... - i рядок
... - останній рядок
назва таблиці
1 заголовок N заголовок
осередок 1/1 осередок N / 1
осередок 1 / i осередок N / i
осередок 1 / M осередок N / M
- кінець контейнера таблиці

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

А ось, що у нас вийде в вікні броузера:

Список друзів і подруг

Висота комірки таблиці в пікселях або відсотках від ширини таблиці.

Управління лініями сітки таблиць

Для управління лініями сітки таблиць використовується атрибут BORDER контейнера

. який задає товщину рамки таблиці в пікселях (за умовчанням рамки немає, BORDER = 0). У стандарті HTML 4, з'явилися нові атрибути таблиць, рядків і осередків: FRAME для більш гнучкого управління лініями сітки таблиць і RULES для створення додаткових ліній роздільників груп в таблицях.

Дані атрибути підтримуються сучасними броузерами і можуть набувати наступних значень:

  • VOID - без рамки;

  • ABOVE - верхня сторона рамки;

  • BELOW - нижня сторона рамки;

  • LHS - ліва сторона рамки;

  • RHS - права сторона рамки;

  • VSIDES - вертіккальние лінії;

  • HSIDES - горизонтальні лінії;
  • NONE - без роздільника груп;

  • GROUPS - вертикальні і горизонтальні лінії роздільники груп;

    • .
    рівнозначно .

    .
    рівнозначно .

    Управління кольором елементів таблиць

    Атрибути управління кольором елементів таблиць з'явилися в HTML як розширення стандарту, пропоновані основними постачальниками Web-браузерів (Microsoft і Netscape).

    Розширення управління кольором: BORDERCOLOR - колір рамки і BGCOLOR - колір фону, використовуються як атрибути для тегів:

    , , - рядок.

    - комірка.

    Об'єднання елементів таблиць.

    Для створення складних таблиць не обійтися без об'єднання рядків і стовпців. Для об'єднання осередків сусідніх рядків і стовпців таблиці, в HTML використовуються атрибути ROWSPAN і COLSPAN тегів

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

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

    . і . але в разі використання одного з них, необхідно застосовувати контейнерну форму):

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

    .
    - таблиця.

    і . Дані атрибути задають кількість об'едінемих осередків в рядку (ROWSPAN = N) або стовпці (COLSPAN = N). Розглянемо використання даних атрибутів на прикладі таблиці.

    HTML код таблиці:

















    ДРУЗІ І ПОДРУГИ
    ДРУЗІКоля44-44-44
    Вася33-33-33
    ПОДРУГИМарійка11-11-11
    Глаша22-22-22

    Зовнішній вигляд таблиці:

    ДРУЗІ І ПОДРУГИ

    У стандарті HTML 4 повились нові теги для угруповання (не об'єднання, а саме угруповання) рядків і стовпців таблиці в групи з загальними властивостями. це теги





    .

    .

    .

    .
    .
    .

    .
    1 заголовокN заголовок
    1 стовпецьN стовпець
    1 стовпецьN стовпець
    1 підсумковий стовпецьN підсумковий стовпець

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

    А ось результат обох наших діянь:

    Схожі статті