Приблизительное время чтения: 5 минут

Это кажется тривиальным, но есть определенные аспекты компьютера, и, следовательно, также HTML, которые иногда должны быть пересмотрены. Следует отметить, что W3C настоятельно рекомендую использовать таблицы для разработки макета сайта. Таблицы используются для ввода данных, макет сделан со мной div.

Таблицы не должны использоваться для определения содержания графики, поскольку это может вызвать проблемы для чтения с экрана (но и для ботов). В более, когда вы использовали для определения графика, таблицы могут заставить пользователь прокручивать по горизонтали для просмотра страницы таблицы, предназначенную для большего экрана. Чтобы минимизировать эти проблемы, авторы должны использовать CSS для управления макетом вместо таблиц.

Интересно, что W3C никогда не использовать императив (должен, не должен…), они знают, что хорошие манеры.

Сегодня мы видим некоторую таблицу статью (чтобы служить в качестве стола, а не как макет) и вариации на них. Они могут сделать свои собственные выводы.

Тег для заголовка: “th“

тег “th” Он служит для определения заголовка таблицы: в первой строке и / или первый столбец. Простейшая структура в настоящее время упала в неиспользование (без “th“) Это выглядит следующим образом:

<Таблица>  
  <тр>  
    <тд>Авто</тд>  
    <тд>модель</тд>  
    <тд>смещение</тд>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Что такого результата:

Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Для тех, кто не большого зрения это легко понять, о чем мы говорим, но кто должен полагаться на читатель экрана для интерпретации веб-страницы, она будет значительно невыгодном. Именно поэтому мы ввели теги “th“, означает “заголовок таблицы“. Этот тег определяет заголовок таблицы и отделяет его от данных таблицы (“td” – данные таблицы) и используется таким образом,:

<Таблица>  
  <тр>  
    <го>Авто</го>  
    <го>модель</го>  
    <го>смещение</го>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Это будет генерировать этот результат:

Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Теги для подписи: “caption“

Так же, как на фотографиях, Кроме того, для таблиц есть подпись. Вы можете показать заголовок над или под таблицей, СМЧ элемент, который позволяет позиционирование “caption-side” и принимает в качестве аргументов “top” О “bottom“. Однако тег “caption” это не является обязательным, в зависимости от обстоятельств, он может быть использован или менее.

При использовании должны быть размещены сразу после открывающего тега “table“.

<Таблица>
  <подпись>Сколько автомобилей паркуются в моем гараже?</подпись>
  <тр>  
    <го>Авто</го>  
    <го>модель</го>  
    <го>смещение</го>  
  </тр>  
  <тр>  
    <тд>Opel</тд>  
    <тд>Corsa</тд>  
    <тд>1.2</тд>  
  </тр>  
  <тр>  
    <тд>Citroen</тд>  
    <тд>c2</тд>  
    <тд>1.1</тд>  
  </тр>  
</Таблица>

Что такого результата:

Авто	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Атрибут суммировать содержимое таблицы: “summary“

В дополнение к тегу “caption” Вы можете использовать атрибут “summary” (связать с тегом “table“) кратко объяснить содержание таблицы. Эта опция не видна пользователю, который видит таблицу, служит для тех, кто видит не использует для чтения с экрана, чтобы понять сразу, если таблица может повлиять ли или нет.

Правая структура является следующим:

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Автомобили в моем гараже</подпись>
  <тр>
    <го>знак</го>
    <го>модель</го>
    <го>смещение</го>
  </тр>
  <тр>
    <тд>Opel</тд>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <тд>Citroen</тд>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

Результатом этих строк кода со стилем глобально применительно к этому сайту, в том, что:

знак	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Важно отметить, что атрибут “summary” Не видно глаз тех, кто по поиску, Это, тем не менее, как записано дополнительной информации ботами и лучшими показателями за столом и читает чтения с экрана, чтобы помочь пользователям с ослабленным зрением.

Заголовки сокращенные с атрибутом “abbr“

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

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Автомобили в моем гараже</подпись>
  <тр>
    <го сокр ="знак">Марка автомобиля</го>
    <го сокр ="модель">Модель автомобиля</го>
    <го сокр ="смещение">Двигатель автомобиля</го>
  </тр>
  <тр>
    <тд>Opel</тд>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <тд>Citroen</тд>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

Соотнесите заголовки и данные: “scope“, “id” е “headers“

Таблицы достаточно далеко банальные виды, Это как дать понять читателю экрана корреляция между заголовками и данными. Исключим заголовок “знак” Это в нашей диаграмме, и изменять записи для бренда, чтобы они стали заголовком.

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Автомобили в моем гараже?</подпись>
  <тр>
    <тд></тд>
    <го>модель</го>
    <го>смещение</го>
  </тр>
  <тр>
    <го>Opel</го>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <го>Citroen</го>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

И результат будет таким:

	модель	смещение
Opel	Corsa	1.2
Citroen	c2	1.1

Добавляем атрибут “scope” для облегчения работы с программой чтения с экрана:

<Сводная таблица ="знак, модель и мощность двигателя автомобили, припаркованные в моем гараже">
  <подпись>Автомобили в моем гараже</подпись>
  <тр>
    <тд></тд>
    <го сфера ="седло">модель</го>
    <го сфера ="седло">смещение</го>
  </тр>
  <тр>
    <го сфера ="строка">Opel</го>
    <тд>Corsa</тд>
    <тд>1.2</тд>
  </тр>
  <тр>
    <го сфера ="строка">Citroen</го>
    <тд>c2</тд>
    <тд>1.1</тд>
  </тр>
</Таблица>

атрибут scope определяет ячейку заголовка и предоставляет информацию заголовка для столбца или строки:

• col: заголовок для столбца
• row: заголовок для строки

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

Наоборот используя row мы укажем, что заголовки относятся к ячейкам соответствующей строки (право).

атрибут scope он также поддерживает два других значения:

• colgroup: заголовки для группы столбцов, которая содержит его
• rowgroup: заголовки для группы строк, которая содержит это

Для групп столбцов используется элемент colgroup, в то время как для групп линий мы можем использовать thead, tfoot е tbody (который мы увидим позже).

Другой способ связать данные ячейки с соответствующим заголовком - это присвоить каждому заголовку id недвусмысленный, затем добавьте атрибут header к любым данным. Этот атрибут содержит разделенный пробелами список id каждой ячейки заголовка, которая применяется к данным этой ячейки. Этот метод является более сложным и должен использоваться только при наличии данных, которые необходимо подключить к более чем двум ячейкам заголовка, когда атрибут scope этого недостаточно, например, в очень сложных или неправильных таблицах.

Чтобы проиллюстрировать этот пример, я отредактировал таблицу.

	Технические данные	модель
смещение	мощность
Opel	1.2	GPL	Corsa
Citroen	1.1	бензин	c2

Очевидно, что этот метод усложняется довольно быстро, лучше использовать атрибут scope по возможности.

Группы строк: thead, tfoot е tbody

Строки таблицы могут быть сгруппированы в заголовки (thead), нижний колонтитул (tfoot) и одно или несколько тел (tbody). Очевидно, что каждая группа строк должна содержать одну или несколько строк таблицы.

Если таблица содержит заголовок (THEAD), должен появиться перед разделами нижнего колонтитула (TFOOT) е тело (TBODY). Если мы решим не использовать верхний или нижний колонтитул элементаtbody это не является обязательным (но даже не запрещено, поэтому мы используем его по желанию). Структура таблицы с группами строк будет выглядеть так:

<Таблица>
   <THEAD>
      <тр></тр>
      … Относительно всех запрошенных заголовков
   </THEAD>
   <TFOOT>
      <тр></тр>
      ... строки, связанные с нижним колонтитулом
   </TFOOT>
   <TBODY>
      <тр></тр>
      ... линии, относящиеся к телу
   </TBODY>
   <TBODY>
      <тр></тр>
      … Строки, относящиеся к телу второй таблицы
   </TBODY>
   ... другие секции тела при необходимости
</Таблица>

Группировка строк может быть полезна по нескольким причинам:

• упрощает применение стилей (CSS) разделы thead, tfoot е tbody самостоятельно, без добавления классов или чего-либо,
• когда мы запускаем печать особо длинных таблиц в некоторых браузерах (например, основанные на гекконе) повторить информацию, содержащуюся в thead е tfoot на каждой распечатанной странице, облегчая чтение,
• отдельные разделы “заголовок” е “нижний колонтитул” из тела таблицы позволяет браузерам просматривать только прокрутку тела.

Какие преимущества

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

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

Менее очевидна польза, полученная дизайнером и средним пользователем, но доступная таблица полна разметок, к которым могут применяться стили CSS. Захватывающая и хорошо отображаемая таблица может сделать ее легче для всех.

Эта статья впервые появился на английском языке в 2004 и это довольно впечатляюще, что он все еще актуален, несмотря на его 14 возраст.