Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
21 ошибка прогр... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Пример работы с... 65535
Содержание сайт... 65535
ТЕХНОЛОГИИ ДОСТ... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Создание отчето... 65535
Имитационное мо... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Реклама
Сейчас на сайте
Гостей: 59
На сайте нет зарегистрированных пользователей

Пользователей: 13,361
новичок: uehuat
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Моделирование работы ЭВМ на GPSS + Пояснительная записка
Моделирование вычислительного центра на GPSS + Отчет + Блок схема
Диплом RSA, ЭЦП, сертификаты, шифрование на C#

Связывание данных с помощью атрибутов axis и id
При работе с таблицами не следует забывать о том, что в языках HTML и XHTML они предназначены для структурирования информации. Строки и столбцы чисел или данных похожи на электронные таблицы. Чтобы придать информации некоторый смысл, их следует определенным образом связать. Обычно для этого используют систему подзаголовков (как, например, при создании страницы календаря). Но как поступить, если в таблице сотни строк или если пользователь не может просмотреть табличные данные, а лишь прослушать их с помощью речевого синтезатора? Каким образом строка заголовков способна помочь в этой ситуации?
Средства языка XHTML имеют несколько атрибутов (в частности, th и td), предоставляющих информацию для идентификации элементов.
Пример. Чтобы продемонстрировать такую возможность, построим небольшую таблицу, в которой отсортируем данные, соответствующие заказам членов некоторой семьи во время последнего посещения ресторана. Здесь указан выбор блюд: холодные закуски, напитки, десерт. Таблица начинается с обязательных элементов: table
и caption.
<table border="l" summary="Заказ блюд семьей Наварро в ресторане Los Amigos">
<caption>yXMH в ресторане Los Amigos </caption>
Следующий сегмент документа представляет первую строку таблицы - заголовки ячеек. Каждый элемент th включает атрибут id, имеющий, как любой идентификатор, уникальное значение:
<tr>
<th id="cl">MMH</th>
<th id="c2">XonoflHbie закускж/tb
<th id="c3">HarraTKM</th>
<th id="c4">flecepT</th>
</tr>
С этого момента в каждой следующей строке атрибут headers добавляется к элементам td, связывая их с соответствующим заголовком столбца:
<tr>
<td headers="cl">fleMB</td>
<td headers^"c2">4MMM4aHra</td>
<td headers^"c3">MaprapMTa</td>
<td headers="c4">nMpor</td>
</tr>
<tr>
<td headers="cl">3HH</td>
<td headers="c2">Энчиладос</^>
<td headers="c3">CaHrpMH</td>
<td headers="c4">Conanranac</td>
</tr>
<tr>
<td headers="cl">nMHfla</td> <td headers="c2">TocTafla</td> <td headers="c3">nencM</td> <td headers^"c4">Mopoжeнoe</td> </tr> </table>
Если вы используете обычный браузер, документ будет без атрибутов id и headers (рис. 5.10).
Реальные изменения происходят при прослушивании информации через устройства, синтезирующие речь. Включение описанных атрибутов дает слабовидящим пользователям возможность получить необходимую информацию. Без вспомогательных элементов сообщение, вероятно, будет таким: «Ужин в ресторане Los Amigos. Имя, холодные закуски, напитки, десерт, Дейв, чимичанга, Маргарита, пирог, Энн, энчиладос, сангрия, сопапиллас, Линда, тостада, пепси, мороженое».
Слушателю вряд ли будет понятно значение каждого названия из перечня. После размещения дополнительных атрибутов id и headers записанное сообщение будет выглядеть так: «Ужин в ресторане Los Amigos. Имя: Дейв. Холодные закуски:
чимичанга. Напитки: Маргарита. Десерт: пирог. Имя: Энн. Холодные закуски: эн-чиладас. Напитки: сангрия. Десерт: сопапиллас. Имя: Линда. Холодные закуски: тостада. Напитки: пепси. Десерт: мороженое».
Совет Если название для заголовка получается слишком длинным, исполь-
зуйте атрибут abbr, чтобы в процессе отображения в браузере иметь альтернативную короткую запись того же наименования. Например, заголовок «Место обратного отправления» можно заменить коротким определением abbr= "Отправление ".
Прослушивая последнюю запись, легко понять, что «Маргарита» принадлежит к элементам категории «Напитки», а не «Холодные закуски». Если же приходится воспринимать на слух данные, смысл которых не столь очевиден (например, числа), то расстановка необходимых заголовков поможет вычленить полезную информацию.
В сложных таблицах пользователю обычно требуется лишь часть информации, поэтому необходим доступ к заголовку и содержимому конкретной ячейки. В качестве примера можно привести электронную таблицу, где отражены данные различных категорий расходов либо расширенный отчет о командировке сотрудника, посетившего целый ряд географических пунктов.
На рис. 5.11 представлена демонстрационная форма отчета о командировочных расходах, составленная бизнесменом, который за время деловой поездки побывал в трех городах. Посещения различных населенных пунктов распределены по датам, расходы на отдельные поездки - по соответствующим категориям: питание, проживание в отелях, расходы на проезд в местном транспорте, презентационные подарки (образцы продукции). Таблица начинается с обычных в таком случае элементов: caption и summary.
<table border="l"
summary="Отчет о командировочных расходах Маршалла Йенсена за период с 2 0 по 2 6 сентября 2 000 года">
<caption>OT4eT о расходах с 20/09/00 по 2 б/09/00</caption>
В первой строке таблицы, содержащей заголовки, кроме атрибута id описывается новый - axi s, значение которого соответствует категории данных в этой ячейке. Поскольку для строки заголовков такой тип определен как expense (расходы), то значение атрибута будет записано следующим образом: axis=" expense".
<tr>
<th> </th>
<th id="cl" axis=" expense" >Питание</^>
<th id="c2" axis="expense^Проживание <br>
<th id="c3" axis="expense" abbr="transport">Транспортные pacxoflbi</th>
<th id="c4" axis=" expense" abbr= " samples " >Розданные o6pa3nbi</th>
<1с1>Промежуточные pacxoflbi</td>
</tr>
Каждая новая строка создается для отдельной даты и для каждого города, в котором в тот день находился бизнесмен. Определение города в строке таблицы вводится с помощью атрибута axis, которому присваивается значение " city":
<tr>
<th id="cityl" axis="city">OpnaHflo</th>
<th colspan="5"> </th>
</tr>
Обратимся к первой строке записи расходов за первый день командировки. Этот день бизнесмен провел в городе Орландо, что отражено в атрибуте headers для элемента td. Расходы на питание в первые сутки необходимо связать с графой «Питание», с городом, где находился сотрудник, и датой оплаты счета за ресторан. Процесс связывания данных для строки завершается, когда перечислены все значения атрибута id для этих категорий (даты, города, типа расхода) в разделенной пробелами записи значений атрибута headers - причем для всех ячеек, принадлежащих строке. Таким образом, значение атрибута headers - это запись через пробел значений атрибутов id, определяющих координаты ячейки, где указывается величина расходов. Графа «Питание» представлена id со значением cl, Орландо - id со значением cityl, а 20 сентября - id со значением dl. Следовательно, значение атрибута headers для данной ячейки принимает вид cl cityl dl. Далее процесс повторяется для каждого столбца:
<tr>
<td id="dl" axis="date">20 сентября 2000 r.</td> <td headers="cl cityl dl">52.91</td>
cityl cityl
<td headers="c4 cityl dl">15</td> <td> </td>
cityl cityl cityl
<td headers="c4 cityl dl">12</td>
<td> </td>
</tr>
В третьей строке подводятся итоги:
<tr>
<td>Пpoмeжyтoчныe pacxoflbi</td> <td>95.81</td>
<td>396.86</td>
<td>13.90</td> <td>27</td> <td>506.57</td> </tr>
Процесс полностью повторяется для остальных городов, которые посетил бизнесмен:
<tr>
<th id="city2" axis ="city">Чарлстон</1Ь
<th colspan="5"> </th>
</tr>
<tr>
<td id="d3" axis="date">22 сентября 2000 r.</td>
<td headers="cl city2 d3">35.78</td>
<td headers="c2 city2 d3">173.55</td>
<td headers="c3 city2 d3">6.50</td>
<td headers="c4 city2 d3">25</td>
<td> </td>
</tr>
<tr>
<td id="d4" axis="date">23 сентября 2000 r.</td>
<td headers="cl city2 d4">51.15</td>
<td headers="c2 city2 d4">173.55</td>
<td headers="c3 city2 d4">11.30</td>
<td headers="c4 city2 d4">19</td>
<td> </td>
</tr>
<tr>
<td>npoMe>KyT04Hbie pacxoflbi</td>
<td>86.93</td>
<td>347.10</td>
<td>17.30</td>
<td>44</td>
<td>451.33</td>
</tr>
<tr>
<th id="city3" axis="city">Mo6Mn</th>
<th colspan="5"> </th>
</tr>
<tr>
<td id="d5" axis="date">24 сентября 2000 r.</td>
<td headers="cl city3 d5">57.14</td>
<td headers="c2 city3 d5">149.44</td>
<td headers="c3 city3 d5">8.00</td>
<td headers="c4 city3 d5">13</td>
<td> </td>
</tr>
<tr>
<td id="d6" axis="date">25 сентября 2000 r.</td>
<td headers="cl city3 d6">52.99</td>
<td headers="c2 city2 d6">149.44</td>
<td headers="c3 city3 d6">6.70</td>
<td headers="c4 city3 d6">22</td>
<td> </td>
</tr>
<tr>
<td>Пpoмeжyтoчныe pacxoflbi</td>
<td>110.13</td>
<td>298.88</td>
<td>14.70</td>
<td>35</td>
<td>423.71</td>
</tr>
Завершает процесс определение общих расходов по всем категориям, которые записываются в соответствующие колонки:
<tr>
<th>MToroBbie pacxonbi</th>
<td>292.87</td>
<td>1042.84</td>
<td>45.90</td>
<td>106</td>
<td>1381.61</td>
</tr>
</table>
Для улучшения визуального отображения данных ячейки, относящиеся к итоговым расходам по категориям и совокупным расходам, можно выделить теневым фоном. Полная запись документа для создания таблицы отчета показана в листинге 5.4.
Листинг 5.4. Конечная форма записи отчета
<table border="l" summary="Отчет о командировочных расходах Маршалла Йенсена за период с 2 0 по 2 6 сентября 2 00 0 года "> <сарг.1оп>0тчет о расходах с 20/09/00 по 2 б / 0 9 / 0 0< / capt ion>
<tr>
<tr> </tr>
<th id="cl" axis="expense">Питание</1Ь>
<th id="c2" axis="expense">Проживание <br> в oTene</th> <th id="c3" axis="expense" abbr="transport">Транспортные pacxoflbi</th>
<th id="c4" axis="expense" abbr= " samples " >Розданные o6pa3irbi</th>
<1(1>Промежуточные pacxoflbi</td>
</tr>
<tr>
<th id="cityl" axis="city">OpnaHflo</th>
<th colspan="5">&nbps;</th>
</tr>
<tr>
<td id="dl" axis="date">20 сентября 2000 r.</td>
<td headers="cl cityl dl">52.91</td>
<td headers="c2 cityl dl">198.43</td>
<td headers="c3 cityl dl">4.50</td>
<td headers="c4 cityl dl">15</td>
<td> </td>
</tr>
<tr>
<td id="d2" axis="date">21 сентября 2000 r.</td>
<td headers="cl cityl dl">42.90</td>
<td headers="c2 cityl dl">198.43</td>
<td headers="c3 cityl dl">9.40</td>
<td headers="c4 cityl dl">12</td>
<td> </td>
</tr>
<tr bgcolor="#FFCCCC">
<К1>Промежуточные pacxoflbi</td>
<td>95.81</td>
<td>396.86</td>
<td>13.90</td>
<td>27</td>
<td>506.57</td>
</tr>
<tr>
<th id="city2" axis="city">4apncToH</th>
<th colspan="5">&nbps;</th>
</tr>
<tr>
<td id="d3" axis="date">22 сентября 2000 r.</td>
<td headers="cl city2 d3">35.78</td>
<td headers="c2 city2 d3">173.55</td>
<td headers="c3 city2 d3">6.50</td>
<td headers="c4 city2 d3">25</td>
<td> </td>
</tr>
<tr>
<td id="d4" axis="date">23 сентября 2000 r.</td>
<td headers="cl city2 d4">51.15</td>
<td headers="c2 city2 d4">173.55</td>
<td headers="c3 city2 d4">11.30</td>
<td headers="c4 city2 d4">19</td>
<td> </td>
</tr>
<tr bgcolor="#FFCCCC"> <К1>Промежуточные pacxoflbi</td> <td>86.93</td> <td>347.10</td> <td>17.30</td>
<td>44</td> <td>451.33</td> </tr> <tr>
<th id="city3" axis="city">Mo6Mn</th>
<th colspan="5">&nbps;</th>
</tr>
<tr>
<td id="d5" axis="date">24 сентября 2000 r.</td>
<td headers="cl city3 d5">57.14</td>
<td headers="c2 city3 d5">149.44</td>
<td headers="c3 city3 d5">8.00</td>
<td headers="c4 city3 d5">13</td>
<td> </td>
</tr>
<tr>
<td id="d6" axis="date">25 сентября 2000 r.</td>
<td headers="cl city3 d6">52.99</td>
<td headers="c2 city2 d6">149.44</td>
<td headers="c3 city3 d6">6.70</td>
<td headers="c4 city3 d6">22</td>
<td> </td>
</tr>
<tr bgcolor="#FFCCCC">
<1(1>Промежуточные pacxoflbi</td>
<td>110.13</td>
<td>298.88</td>
<td>14.70</td>
<td>35</td>
<td>423.71</td>
</tr>
<tr bgcolor="#CCFFFF">
<th>MToroBbie pacxonbi</th>
<td>292.87</td>
<td>1042.84</td>
<td>45.90</td>
<td>106</td>
<td>1381.61</td>
</tr>
</table>
Резюме
В этой главе вы познакомились с методами создания разнообразных таблиц для размещения в них данных и структурирования документов. Область применения таблиц может быть значительно расширена, если содержательную часть ячеек связать ссылочными визуальными и информационными указателями.
В следующей главе вы познакомитесь с новыми методами планирования Web-страницы с помощью фреймов языка XHTML.
Опубликовал vovan666 April 05 2013 12:35:55 · 0 Комментариев · 3726 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
Создание лабиринт...
Создание оригинал...
DateEdit
De Knop
Geo-Whois
PBFoldder
Apollovcl61
Дешифратор содерж...
Run
Основы программир...
Swing. Эффектные...
SearchAndReplace
Фильтры изображений
JanReplace
Последнее загруж...
CaptionButton
Библия хакера 2. ...
TrayComp
DirHTMLReportBuil...
Мод "проверочный ...

Топ загрузок
Приложение Клие... 100772
Delphi 7 Enterp... 97809
Converter AMR<-... 20260
GPSS World Stud... 17014
Borland C++Buil... 14189
Borland Delphi ... 10267
Turbo Pascal fo... 7372
Калькулятор [Ис... 5972
Visual Studio 2... 5206
Microsoft SQL S... 3661
Случайные статьи
svc.cpp
Современные телеко...
Тайны алхимии со с...
Интервью с сотовым...
Неопределенные циклы
Процедура Ваr3D - ...
Решение заключаетс...
Премия за завершение
Типы атрибутов
Что нужно делать п...
Я преподаю этот ме...
Этапы подбора ключ...
Еще про алгоритм find
Работа со списками...
Сообщения о несуще...
String length mism...
Система воспроизве...
В среде Active Dir...
Таблицы (Table)
Волна казино
Приэтом проверяетс...
Простая блокировка...
Как Windows 98 инс...
Методы класса TStr...
Большинство модемо...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?