Создание таблиц со специальными возможностями

Основное назначение тега table — представление данных с более чем одним измерением. Кроме того, тег table часто используется для разметки страницы, хотя этот способ рекомендуется больше не использовать.

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

  • специальное имя, предоставляемое тегом caption в таблице;
  • специальное описание, предоставляемое атрибутом summary;
  • (дополнительно) заголовки таблиц, в которых используются теги th с атрибутами scope и headers, как описано ниже в данном разделе.

В следующем примере показаны таблица и HTML-код, создавший ее.

ПитаниеГостиницыТранспортПодытоги
Владивосток65,02224,0090,00379,02
Сан-Диего80,50250,0080,00410,50
Лос-Анджелес74,00300,00100,00474,00
Итого219,52774,00270,001 263,52

 


<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
   <caption>Travel Expense Report</caption>
   <thead>
     <tr>
       <th></th>
       <th>Meals</th>
       <th>Hotels</th>
       <th>Transport</th>
       <th>Subtotals</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>San Jose</th>
       <td>65.02</td>
       <td>224.00</td>
       <td>90.00</td>
       <td>379.02</td>
     </tr>
     ...
   </tbody>
</table>

Используйте атрибуты scope и headers, чтобы лучше определить отношения между ячейками и заголовками. Используйте атрибут scope в теге th, чтобы определить расширенное назначение заголовка. В сложных таблицах используйте атрибут headers в соответствующих тегах td, если к одной ячейке применено несколько заголовков.

ПитаниеГостиницыТранспортПодытоги
Владивосток
25-авг-9737,74112,0045,00194,74
26-авг-9727,28112,0045,00184,28
...
Итого219,52774,00270,001 263,52

 


<table border="1">
   <caption>Travel Expense Report</caption>
   <thead>
      <tr>
         <th></th>
         <th id="c2">Meals</th>
         <th id="c3">Hotels</th>
         <th id="c4">Transport</th>
         <th id="c5">Subtotals</td>
      </tr>
   </thead>
   <tbody>
	...
      <tr><td id="r2" colspan="5">San Jose</td></tr>
      <tr>
         <td id="r3" >25-Aug-97</td>
         <td headers="c2 r2 r3">37.74</td>
         <td headers="c3 r2 r3">112.00</td>
         <td headers="c4 r2 r3">45.00</td>
         <td headers="c5 r2 r3">1,263.52</td>
      </tr>
	...
   </tbody>
</table>

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

Связанные разделы

Соответствие основным требованиям к специальным возможностям

 

 

Показ:
© 2015 Microsoft