Какое правильное значение контекста нужно использовать для ячейки таблицы HTML <th>, которая охватывает несколько столбцов? - PullRequest
Новая
       10

Какое правильное значение контекста нужно использовать для ячейки таблицы HTML <th>, которая охватывает несколько столбцов?

5 голосов
/ 07 июня 2009

Скажем, у вас есть таблица HTML с ячейкой <th>, которая занимает несколько столбцов, например, 

<table>
    <tr>
        <th colspan="3" scope="?">Scores</th>
        <!-- ...more headings here... -->
    </tr>
    <tr>
        <th scope="col">English</th>
        <th scope="col">Maths</th>
        <th scope="col">Science</th>
        <!-- ...more sub-headings here... -->
    </tr>
    <tr>
        <td>12</td>
        <td>16</td>
        <td>20</td>
        <!-- ...more cells here... -->
    </tr>
</table>

Какое правильное значение для атрибута области для ячейки охватывающего заголовка? col кажется неправильным, поскольку он заголовок нескольких столбцов, но colgroup не кажется правильным, если у меня нет никаких тегов colgroup.

Ответы [ 3 ]

7 голосов
/ 10 июня 2009

В группе WebAIM (Web Accessibility in Mind) есть отличная статья о создании доступных таблиц данных . В целом, они рекомендуют избегать составных строк или столбцов, поскольку программы чтения с экрана не могут надежно интерпретировать разметку.

За исключением того, что я вообще избегал составных столбцов, мне очень повезло с использованием атрибутов id / headers в сочетании с атрибутом scope. Хотя разметка более многословна, это, кажется, упрощает JAWS, и в результате у нее меньше проблем с интерпретацией данных.

Вот как будет выглядеть ваш пример с id / headers: 

<table>
    <tr>
        <th id="scores" colspan="3">Scores</th>
    </tr>
    <tr>
        <th id="english" scope="col">English</th>
        <th id="maths" scope="col">Maths</th>
        <th id="science" scope="col">Science</th>
    </tr>
    <tr>
        <td headers="scores english">12</td>
        <td headers="scores maths">16</td>
        <td headers="scores science">20</td>
    </tr>
</table>
2 голосов
/ 07 июня 2009

Согласно второму примеру таблицы в спецификации HTML, это colgroup, несмотря на отсутствие тегов colgroup.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

1 голос
/ 09 декабря 2013

Возможно, функция подписи может быть лучше для вас ... 

<table>
  <caption>Scores</caption>
  <thead>
    <tr>
      <th scope="col">English</th>
      <th scope="col">Maths</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12</td>
      <td>16</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

...