Таблицы данных и таблицы форматирования

Простые таблицы данных

Для таблицы необходимо определить строчку и столбец. Для этого в HTML -разметке используется такие теги как <td> и <th>. С помощью <td> определяются ячейки таблицы, с помощью <th> - заголовки.

Норматив доступности контента 5.1

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

К сожалению, большинство разработчиков применяет <td> для обозначения ячеек, содержащих и заголовки, и саму информацию. Это не представляет проблемы для пользователей с хорошим зрением, т.к. им не трудно отличить ячейку с заголовком от ячейки с информацией.

Что касается вспомогательных технологий, не все из них могут различить эти ячейки и представят любое содержание тега <td> как информацию. В результате у пользователей «скрин ридеров» вызовет трудность соотнесение информации в центральных ячейках таблицы с заголовком соответствующей строки и столбца.

HTML -разметка предлагает простое и доступное решение этой проблемы. Просто нужно всегда применять тег <th> для обозначения заголовка столбца или строки в таблице данных. (NB : никогда не используйте тег <th> в таблицах форматирования - Норматив доступности контента 5.4)

В следующей таблице «Цены на желтую сливу и персики» <th> используется для обозначения заголовков.

<table border ="1" summary ="Таблица «Цены на желтую сливу и персики»: первая строка и первый столбец являются заголовками">
    <caption>Цены на желтую сливу и персики в Сиднее </caption>
    <tr>
       <td></td>
       <th> Желтая слива </th>
       <th>Персики</th>
    </tr>
    <tr>
       <th>Опт</ th>
       <td1.00 у.е. </td>
       <td >1.50 у.е. </td>
    </tr>
    <tr>
       <th>Розница</th>
       <td>2.00 у.е. </td>
       <td>2.50 у.е. </td>
    </tr>
</table>

Такая программа, как «скрин ридер» JAWS 5, прочтет строку «Опт» следующим образом: опт, одна целая ноль десятых условной единицы, одна целая пятьдесят сотых условной едницы.

Если пользователю необходимо узнать оптовую цену на сливу, JAWS огласит информацию, прописанную в соответствующей ячейке, примерно так: 3-я колонка, 2-й ряд, оптовая цена на желтую сливу, одна целая ноль десятых условной единицы.

Аббревиатура

Атрибут <abbr> используется как аббревиатура для больших заголовков, чтобы не повторять их каждый раз. В примере атрибут <abbr > включен в тег <th>, который используется для обозначения заголовков колонки. Так в первый раз «скрин ридер» прочтет заголовок «желтая слива» целиком, а каждый последующий раз только аббревиатуру «слива».

<table border ="1" summary =" Цены на желтую сливу и персики »: первая строка и первый столбец являются заголовками">
    <caption> Цены на желтую сливу и персики в Сиднее </caption>
    <tr>
       <td></td>
       <th abbr=" plums">Желтая слива</ th>
    </tr>
    <tr>
       <th>Опт</ th>
       <td>1.00 у.е.</td>
       <td>1.50 у.е.</td>
    </tr>
    <tr>
       <th>Розница</th>
       <td>2.00 у.е.</td>
       <td>2.50 у.е.</td>
    </tr>
</table>

Элементы <thead> , <tbody> и <tfoot>

Уже упомянутого элемента <th> достаточно для того, чтобы обеспечить доступ к простой таблице данных. Для дальнейшего повышение доступности таблицы можно использовать следующие HTML -элементы:

• <thead> - дескриптор заголовочного раздела таблицы;
• <tfoot> - дескриптор раздела колонтитула;

<tbody> - дескриптор тела таблицы.

С помощью этих элементов можно группировать строки таблицы и представлять их в трех разных секциях.

<thead> и <tfoot> используются для обозначения заголовочной строки вверху либо внизу таблицы. Это необходимо для больших таблиц, которые занимают более одной страницы, для того, чтобы помочь пользователю ориентироваться в ее ячейках. Также при соответствующей поддержке браузера, использование этих элементов обеспечит возможность автономной прокрутки тела таблицы, когда заголовок остается на экране. В будущем это станет весьма полезным для пользователей портативных приборов, оснащенных небольшими экранами.

Используя <thead> и <tfoot>, необходимо применить и <tbody> для обозначения тела таблицы, т.е. ячеек, содержащих фактическую информацию. В сущности, для одной таблицы можно прописать больше одного элемента <tbody>.