Решение
В соответствии со спецификацией HTML таблицы могут содержать дополнительные элементы и атрибуты, предназначенные не для визуального оформления, а для обеспечения их корректной интерпретации программами вроде экранного диктора, которыми пользуются посетители со слабым зрением. Их применение не представляет никаких трудностей, однако многие веб-разработчики упускают их из виду.

Рассмотрим следующий пример:

<table   summary="Эта таблица показывает ежегодный доход в течение  1999 - 2002 гг">
  <caption>
  Ежегодный Доход 1999 - 2002
  </caption>
  <tr>
    <th></th>
    <th scope="col">1999</th>
    <th scope="col">2000</th>
    <th scope="col">2001</th>
    <th scope="col">2002</th>
  </tr>
  <tr>
    <th scope="row">Гранты</th>
    <td>11,980</td>
    <td>12,650</td>
    <td>9,700</td>
    <td>10,600</td>
  </tr>
  <tr>
    <th scope="row">Пожертвования</th>
    <td>4,780</td>
    <td>4,989</td>
    <td>6,700</td>
    <td>6,590</td>
  </tr>
  <tr>
    <th scope="row">Инвестиции</th>
    <td>8,000</td>
    <td>8,100</td>
    <td>8,760</td>
    <td>8,490</td>
  </tr>
  <tr>
    <th scope="row">Сбор средств</th>
    <td>3,200</td>
    <td>3,120</td>
    <td>3,700</td>
    <td>4,210</td>
  </tr>
  <tr>
    <th scope="row">Продажи</th>
    <td>28,400</td>
    <td>27,100</td>
    <td>27,950</td>
    <td>29,050</td>
  </tr>
  <tr>
    <th scope="row">Разное</th>
    <td>2,100</td>
    <td>1,900</td>
    <td>1,300</td>
    <td>1,760</td>
  </tr>
  <tr>
    <th scope="row">Всего</th>
    <td>58,460</td>
    <td>57,859</td>
    <td>58,110</td>
    <td>60,700</td>
  </tr>
</table>

 
Обсуждение
В приведенном выше примере была использована таблица, содержащая элементы и атрибуты для четкого описания содержания каждой ячейки. Рассмотрим значение всех этих дополнительных элементов и атрибутов более подробно.

Атрибут summary элемента table

<table   summary="Эта таблица показывает ежегодный доход в течение  1999 - 2002 гг">

Значение атрибута summary невидимо для пользователей броузеров, но оно будет прочтено экранным диктором. Его следует использовать, что-бы дать пользователю представление о содержании и назначении таблицы. Эта информация не является необходимой для пользователей обычных броузеров, поскольку они могут получить ее при просмотре страницы, однако она важна для пользователей с ограниченными возможностями.

Элемент caption

  <caption>
  Ежегодный Доход 1999 - 2002
  </caption>

Элемент caption добавляет к таблице заголовок. По умолчанию он отображается сверху, но его расположение по отношению к таблице можно изменить с помощью CSS-свойства caption-side.

table {
caption-side: bottom;
}

Зачем вообще использовать этот элемент, если можно просто разместить рядом с таблицей заголовок или текст абзаца? С помощью caption текст связывается с таблицей и далее интерпретируется в качестве ее заголовка – экранный диктор не сможет интерпретировать этот текст в качестве отдельного элемента. Вы хотите, чтобы заголовок отображался как обычный текст абзаца или заголовок третьего уровня в графическом браузере? Нет ничего проще – для этого достаточно всего лишь создать соответствующие правила стилей на CSS, как вы сделали бы это для любого другого элемента.

Элемент th 

<th scope="col">2000</th>

Элемент th предназначен для обозначения данных, используемых в качестве заголовка строки или столбца. В приведенном примере он применяется по отношению и к тем и другим; для более конкретного указания используется атрибут scope тега <th>. Он может принимать значение col (колонка, столбец) или row (ряд, строка) в зависимости от того, к чему относится.

Перед тем как начать оформление вида таблиц в соответствии с общим дизайном сайта, рекомендуется вначале обеспечить их доступность для пользователей таких устройств, как экранные дикторы. Доступность относится к тем вопросам, решение которых большинство разработчиков откладывают на потом, говоря: «Сначала разберусь с дизайном, а потом возьмусь за это». Однако если контроль за доступностью
оставляют на конец всей разработки, то может случиться, что к нему и вовсе не возвращаются, а если и возвращаются, то для исправления возникающих проблем чаще всего требуется значительное количество
времени, особенно в сложных приложениях. Если вы возьмете за правило продумывать эти аспекты непосредственно в процессе разработки сайта, то вскоре обнаружите, что это стало вашей второй натурой, лишь незначительно увеличив время работы над проектом.

CSS-атрибуты позволяют оформить таблицу -быстро и просто. К примеру, в самом начале разработки сайта, в котором будет много таблиц, я создаю правило стиля с селектором класса .datatable, которое будет
содержать основные описания стилей для всех таблиц и которое можно с легкостью добавить к тегу <table> каждого из них. Затем я создаю правила стиля для .datatable th (ячеек с заголовком), .datatable td (обычных ячеек) и .datatable caption (заголовков таблицы).

Такой подход значительно облегчает добавление новых таблиц. Поскольку все стили уже имеются, достаточно всего лишь применить по отношению к таблице класс .datatable. Если в дальнейшем потребуется изменить вид таблиц на сайте, достаточно отредактировать каскадную таблицу стилей.