При работе с таблицами не следует забывать о том, что в языках 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 Комментариев ·
4283 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
