HTML таблицы продвинутые возможности и доступность

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Добавление заголовка к таблице с помощью <caption>

Вы можете добавить заголовок для таблицы установив его в элементе <caption> и этот элемент необходимо поместить внутрь элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега <table>.

<table >
<caption >
  Dinosaurs in the Jurassic period
</caption></table>

...



...
<table >
<caption >
  Dinosaurs in the Jurassic period
</caption></table>

...



...

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

Заголовок помещают сразу после тега <table>.

Примечание: Атрибут summary (en-US) также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
Добавьте подходящий заголовок к таблице.
Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью <thead>, <tfoot> и <tbody>

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя <thead> (en-US), <tfoot> и <tbody> (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Использование:

Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете <col>/<colgroup> (en-US) элемент, тогда заголовок должен находиться ниже его.
Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
Элементом <tbody> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

Примечание: <tbody> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
Поместите очевидную строку заголовка внутрь <thead> элемента, строку "SUM" внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому, что строка "SUM" опустилась к нижней части таблицы.
Далее, добавьте атрибут colspan, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент <style>. Внутри этого элемента добавьте следующие строки CSS кода:
tbody { font-size: 90%; font-style: italic; } tfoot { font-weight: bold; }
Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

<meta charset="utf-8" ></meta>

<title >My spending record</title>

<style >
  html {
    font-family: sans-serif;
  }

  table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: 0.8rem;
  }

  td,
  th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px 20px;
  }

  th {
    background-color: rgb(235, 235, 235);
  }

  td {
    text-align: center;
  }

  tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
  }

  tr:nth-child(odd) td {
    background-color: rgb(245, 245, 245);
  }

  caption {
    padding: 10px;
  }

  tbody {
    font-size: 90%;
    font-style: italic;
  }

  tfoot {
    font-weight: bold;
  }
</style>





<table >
  <caption >
    How I chose to spend my money
  </caption>
  
  <thead >
    <tr >
      <th >Purchase</th>
      
      <th >Location</th>
      
      <th >Date</th>
      
      <th >Evaluation</th>
      
      <th >Cost (€)</th>
    
    </tr>
  
  </thead>
  
  <tfoot >
    <tr >
      <td colspan="4" >SUM</td>
      
      <td >118</td>
    
    </tr>
  
  </tfoot>
  
  <tbody >
    <tr >
      <td >Haircut</td>
      
      <td >Hairdresser</td>
      
      <td >12/09</td>
      
      <td >Great idea</td>
      
      <td >30</td>
    
    </tr>
    
    <tr >
      <td >Lasagna</td>
      
      <td >Restaurant</td>
      
      <td >12/09</td>
      
      <td >Regrets</td>
      
      <td >18</td>
    
    </tr>
    
    <tr >
      <td >Shoes</td>
      
      <td >Shoeshop</td>
      
      <td >13/09</td>
      
      <td >Big regrets</td>
      
      <td >65</td>
    
    </tr>
    
    <tr >
      <td >Toothpaste</td>
      
      <td >Supermarket</td>
      
      <td >13/09</td>
      
      <td >Good</td>
      
      <td >5</td>
    
    </tr>
  
  </tbody>

</table>
<meta charset="utf-8" ></meta>

<title >My spending record</title>

<style >
  html {
    font-family: sans-serif;
  }

  table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: 0.8rem;
  }

  td,
  th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px 20px;
  }

  th {
    background-color: rgb(235, 235, 235);
  }

  td {
    text-align: center;
  }

  tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
  }

  tr:nth-child(odd) td {
    background-color: rgb(245, 245, 245);
  }

  caption {
    padding: 10px;
  }

  tbody {
    font-size: 90%;
    font-style: italic;
  }

  tfoot {
    font-weight: bold;
  }
</style>





<table >
  <caption >
    How I chose to spend my money
  </caption>
  
  <thead >
    <tr >
      <th >Purchase</th>
      
      <th >Location</th>
      
      <th >Date</th>
      
      <th >Evaluation</th>
      
      <th >Cost (€)</th>
    
    </tr>
  
  </thead>
  
  <tfoot >
    <tr >
      <td colspan="4" >SUM</td>
      
      <td >118</td>
    
    </tr>
  
  </tfoot>
  
  <tbody >
    <tr >
      <td >Haircut</td>
      
      <td >Hairdresser</td>
      
      <td >12/09</td>
      
      <td >Great idea</td>
      
      <td >30</td>
    
    </tr>
    
    <tr >
      <td >Lasagna</td>
      
      <td >Restaurant</td>
      
      <td >12/09</td>
      
      <td >Regrets</td>
      
      <td >18</td>
    
    </tr>
    
    <tr >
      <td >Shoes</td>
      
      <td >Shoeshop</td>
      
      <td >13/09</td>
      
      <td >Big regrets</td>
      
      <td >65</td>
    
    </tr>
    
    <tr >
      <td >Toothpaste</td>
      
      <td >Supermarket</td>
      
      <td >13/09</td>
      
      <td >Good</td>
      
      <td >5</td>
    
    </tr>
  
  </tbody>

</table>

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

Вложенные таблицы

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

Разметка простой вложенной таблицы:

<table id="table1" >
<tbody ><tr >
  <th >title1</th>
  
  <th >title2</th>
  
  <th >title3</th>

</tr>

<tr >
  <td id="nested" >
    <table id="table2" >
      <tbody ><tr >
        <td >cell1</td>
        
        <td >cell2</td>
        
        <td >cell3</td>
      
      </tr>
    
    </tbody></table>
  
  </td>
  
  <td >cell2</td>
  
  <td >cell3</td>

</tr>

<tr >
  <td >cell4</td>
  
  <td >cell5</td>
  
  <td >cell6</td>

</tr>

</tbody></table>
<table id="table1" >
<tbody ><tr >
  <th >title1</th>
  
  <th >title2</th>
  
  <th >title3</th>

</tr>

<tr >
  <td id="nested" >
    <table id="table2" >
      <tbody ><tr >
        <td >cell1</td>
        
        <td >cell2</td>
        
        <td >cell3</td>
      
      </tr>
    
    </tbody></table>
  
  </td>
  
  <td >cell2</td>
  
  <td >cell3</td>

</tr>

<tr >
  <td >cell4</td>
  
  <td >cell5</td>
  
  <td >cell6</td>

</tr>

</tbody></table>

Таблицы для пользователей с ограниченными возможностями

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.

В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.

Использование заголовков столбцов и строк

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

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

Атрибут scope

Новая тема в этой статье это атрибут scope (en-US), который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

Purchase
Location
Date
Evaluation
Cost (€)
Purchase
Location
Date
Evaluation
Cost (€)

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

Haircut
Hairdresser
12/09
Great idea
30
Haircut
Hairdresser
12/09
Great idea
30

Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.

Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<th>), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".

Атрибуты id и headers

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

Вы устанавливаете уникальный id для каждого <th> элемента.
Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id, разделённый пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.

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

Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:

Purchase
  Location
  Date
  Evaluation
  Cost (€)




  Haircut
  Hairdresser
  12/09
  Great idea
  30


...
Purchase
  Location
  Date
  Evaluation
  Cost (€)




  Haircut
  Hairdresser
  12/09
  Great idea
  30


...

Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок. Атрибута scope обычно достаточно для большинства таблиц.

Упражнение: играем со scope и headers

Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
Теперь попробуем добавить соответствующий атрибут scope, который наиболее соответствует этой таблице.
И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты id и headers.

Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

Заключение

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

В этом блоке

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

HTML таблицы продвинутые возможности и доступность

HTML таблицы продвинутые возможности и доступность

Добавление заголовка к таблице с помощью <caption>

Упражнение: Добавление заголовка

Добавление структуры с помощью <thead>, <tfoot> и <tbody>

Упражнение: Добавление структуры таблицы

Вложенные таблицы

Таблицы для пользователей с ограниченными возможностями

Использование заголовков столбцов и строк

Атрибут scope

Атрибуты id и headers

Упражнение: играем со scope и headers

Заключение

В этом блоке

0 комментариев

0 комментариев