Таблиці в HTML-документах

МІНІСТЕРСТВО ОСВІТИ І  НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ  «ЛЬВІВСЬКА ПОЛІТЕХНІКА»

 

 

Кафедра «Cоціальних комунікацій

 та  інформаційної  діяльності»

 

 

 

 

Лабораторна робота №1

з дисципліни «Internet-технології опрацювання інформаційних ресурсів»

на тему: «Таблиці в HTML-документах»

         

 

 

Виконала:

ст. групи ДЗІз-11с                                                   

Козак М.

Перевірив:                                                                                  

 ст.викл. Серов Ю.О.

 

 

 

ЛЬВІВ – 2012

 

 

План

 

Введення……………………………………………………………………………3

1. Елементи конструювання таблиць
1. Елемент TABLE………………………………………………………………..4
2. Напрямок в таблиці……………………………………………………………6
3. Заголовок таблиці: елемент CAPTION……………………………………….6
4. Групи рядів: елементи THEAD, TFOOT і TBODY…………………………..7
5. Групи стовпців: елементи COLGROUP і COL……………………………….9
6. Ряди: елемент TR………………………………………………………………15
7. Осередки: елементи TH і TD………………………………………………….16
2. Подання таблиць невізуальними ПА
1. Асоціювання заголовної інформації з осередками даних…………………..21
2. Категоризація осередків……………………………………………………....24
3. Алгоритм пошуку заголовної інформації…………………………………....28
4. Зразок таблиці………………………………………………………………….28

Висновок………………………………………………………………………….....32

Використана література………………………………………………………….....34

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введення

HyperText Markup Language (надалі HTML) - це мова гіпертекстової розмітки документа. У нашому випадку цим документом є web сторінка. Простіше кажучи, це мова для написання web сторінок. Читаючи код HTML, Ваш улюблений веб-браузер виводить на екран Вашого монітора вміст web сторінки. Ви запитаєте; «А що таке веб-браузер?». Це програма для перегляду web сторінок, якими є «Microsoft Internet Explorer", «Netscape Navigator», «Opera», «Mozila» та ін.

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

Кожна таблиця може мати асоційований заголовок (див. елемент CAPTION), що представляє короткий опис призначення таблиці. Повний опис також  може бути представлено (атрибутом summary) для використання в ПА за системою Брайля.

Ряди таблиці можуть бути згруповані в розділи head, foot і body (елементами THEAD, TFOOT і TBODY відповідно). Групи рядів  додатково структурують інформацію і можуть відображатися в ПА так, щоб підкреслити цю структуризацію. ПА можуть використовувати поділ head / body / foot для підтримки прокрутки  розділу body незалежно від розділів head і foot. Якщо роздруковуються великі таблиці, head і foot інформація може повторюватися  на кожній сторінці з даними таблиці.

Автори можуть також групувати  стовпці, щоб надавати додатково  структуровану інформацію, яка може бути використана ПА. Крім того, автори можуть оголошувати властивості  стовпців на початку визначення таблиці (елементами COLGROUP і COL) таким чином, щоб  дати ПА можливість переглядати таблицю  частинами, а не примушувати користувача  чекати завантаження всіх даних таблиці, перш ніж почати її відображення.

Осередки таблиці можуть містити або "header" інформацію (див. елемент TH), або "data" (див. елемент TD). Осередки можуть займати кілька рядів або стовпців. Модель таблиць HTML 4 дозволяє авторам позначати  кожну клітинку так, що невізуальні  ПА можуть легше зраджувати заголовну  інформацію про осередку користувачеві. Ці механізми не тільки істотно допомагають  користувачам з вадами зору, вони роблять  також можливим показ таблиць  під багаторежимних бездротових  браузерах з обмеженими можливостями відображення (наприклад, пейджер і  телефони з можливістю відображення Web).

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

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

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

 Наступне визначення  таблиці:

<TABLE border="1"

          summary="This table gives some statistics about fruit

                   flies: average height and weight, and percentage

                   with red eyes (for both males and females).">

<CAPTION><EM>A test table with merged cells</EM></CAPTION>

<TR><TH rowspan="2"><TH colspan="2">Average

    <TH rowspan="2">Red<BR>eyes

<TR><TH>height<TH>weight

<TR><TH>Males<TD>1.9<TD>0.003<TD>40%

<TR><TH>Females<TD>1.7<TD>0.002<TD>43%

</TABLE>

може відображатися на ньому tty приблизно так:

A test table with merged cells

    /----------------------------------------\

    |          |      Average      |   Red       |

    |          |-------------------|  eyes       |

    |          |  height |  weight |              |

    |-----------------------------------------|

    |  Males   | 1.9     | 0.003   |   40%  |

    |-----------------------------------------|

    | Females | 1.7     | 0.002   |   43% |

    \-----------------------------------------/

або так в графічному ПА:

 

1. Елементи конструювання таблиць
1. Елемент TABLE

<!ELEMENT TABLE - -

     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

<!ATTLIST TABLE                        -- элемент table --

  %attrs;                              -- %coreattrs, %i18n, %events --

  summary     %Text;         #ПРЕДПОЛАГАЕТСЯ  -- назначение/структура для речевого вывода --

  width       %Length;          #ПРЕДПОЛАГАЕТСЯ  -- ширина таблицы --

  border      %Pixels;           #ПРЕДПОЛАГАЕТСЯ  -- толщина рамки вокруг таблицы --

  frame       %TFrame;        #ПРЕДПОЛАГАЕТСЯ  -- какие части фрэйма отображать --

  rules       %TRules;           #ПРЕДПОЛАГАЕТСЯ  -- линии между рядами и столбцами --

  cellspacing %Length;       #ПРЕДПОЛАГАЕТСЯ  -- расстояние между ячейками --

  cellpadding %Length;       #ПРЕДПОЛАГАЕТСЯ  -- расстояние между

рамкой ячейки и  её содержимым --

 

Початковий тег: необхідний, Кінцевий тег: необхідний

 

Визначення атрибутів

summary = text [CS]

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

align = left | center | right [CI]

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

• left: вліво;.
• center: по центру документа;.
• right: праворуч.

width = length [CN]

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

Атрибути, визначені в  іншому місці

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (заголовок элемента)
• style (инлайн-стиль)
• onclick, ondblclick,  onmousedown, onmouseup,  onmouseover, onmousemove,  onmouseout, onkeypress,  onkeydown, onkeyup (внутренние события)
• bgcolor (цвет фона)
• frame, rules, border (рамки и сетка разметки)
• cellspacing, cellpadding (поля ячейки)

Елемент TABLE містить всі інші елементи, що визначають заголовок таблиці, ряди, вміст і форматування.

• Наступна інформація описує, які операції ПА можуть виконувати при відображенні таблиць:
• Робити загальну інформацію / summary доступною для користувача. Автори повинні надавати загальну інформацію про вміст і структуру таблиці так, щоб люди, які використовують невізуальні ПА могли краще зрозуміти її.
• Показувати заголовок таблиці, якщо він визначений.
• Показувати "шапку" / header, якщо визначений. Показувати футер / footer таблиці, якщо визначений. ПА повинні знати, де відображати шапку і футер. Наприклад, якщо носій виводу - сторінковий, ПА можуть розміщувати шапку угорі кожної сторінки, а футер - внизу. Так само, якщо ПА надає механізм прокрутки рядів, шапка може знаходитися зверху, а футер - знизу від прокручувати області.
• Підраховувати кількість стовпців у таблиці. Зауважте, що кількість рядів у таблиці дорівнює кількості елементів TR, що містяться в елементі TABLE.
• Групувати стовпці у відповідності зі специфікацією груп стовпців.
• Відображати осередку ряд за рядом, згрупованими у відповідні стовпці, між шапкою і футером. Візуальні ПА форматують таблицю у відповідності зі специфікацією атрибутів і таблиць стилів HTML.

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

Для того, щоб ПА форматували таблиці в один етап, автори повинні повідомити ПА:

Кількість стовпців в таблиці. Див підрахунок кількості стовпців таблиці.

Ширину цих стовпців. Див  підрахунок ширини стовпців.

Більш точно ПА може відображати  таблицю в один етап, якщо ширина стовпців визначена комбінацією  елементів COLGROUP і COL. Якщо які-небудь стовпці  визначені в відносних одиницях або відсотках (див. розділ підрахунок ширини стовпців), автори повинні також  визначити ширину всієї таблиці.

 

2.  Напрямок в таблиці

Напрямок в таблиці  або успадковується прямо (за замовчуванням  зліва-направо), або визначається атрибутом dir елемента TABLE.

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

Коли ПА додає додаткові  осередки в ряд (див. розділ підрахунок кількості стовпців таблиці), нові осередки у низці додаються праворуч для  таблиць з напрямком зліва-направо  і ліворуч - для таблиць з напрямком  справа-наліво.

Зверніть увагу, що TABLE це єдиний елемент, в якому dir резервує візуальний порядок стовпців; окремий ряд (TR) група стовпців (COLGROUP) не можуть бути незалежно зарезервовані.

При установці для елемента TABLE, атрибут dir також впливає на напрямок тексту всередині комірки таблиці (оскільки атрибут dir успадковується елементами рівня блоку).

Для визначення таблиці з  напрямком справа-наліво, встановіть атрибут dir так:

<TABLE dir="RTL">

...таблица...

</TABLE>

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

 

3.  Заголовок таблиці: елемент CAPTION

<!ELEMENT CAPTION  - - (%inline;)*     -- заголовок таблицы -->

 

<!ATTLIST CAPTION

  %attrs;                              -- %coreattrs, %i18n, %events --

  >

Початковий тег: необхідний, Кінцевий тег: необхідний

 

Визначення атрибуту