Таблица из Excel в HTML

Таблица, которую читают по одной ячейке

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

<table>
  <caption>Sales by region, 2026</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>$4,200</td></tr>
  </tbody>
</table>

С scope="col" и scope="row" ячейка озвучивается как «North, Revenue, $4,200». caption зачитывается, когда пользователь входит в таблицу, и он может решить, стоит ли её изучать. Скриншот таблицы не даёт ничего из этого. По нему к тому же нельзя искать, и при увеличении он расплывается.

Как читаются ваши ячейки

Когда вы копируете из Excel, Google Таблиц или LibreOffice, в буфер обмена попадает HTML-версия диапазона. Инструмент читает сначала её, и поэтому объединённые ячейки сохраняются как colspan и rowspan.

Для набранного текста или файла CSV (до 5 MB, читается как UTF-8, а иначе как Windows-1252) инструменту приходится угадывать разделитель. Если где-то есть символ табуляции, вопрос решён. Иначе он пробует точку с запятой, запятую и вертикальную черту на первых 30 строках и оставляет тот, что даёт самое ровное число столбцов. Пустые строки и столбцы вокруг данных обрезаются.

Заголовок это первая строка. Если ячейка этой строки объединена вниз, заголовок растёт, чтобы её охватить, до трёх строк.

Что происходит с числами и датами

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

Целые числа без символа не трогаются, если в их столбце нет ещё и сумм, так что ваши годы и номера не получат разделитель тысяч. Значение, которое начинается с нуля, это код, и его не трогают никогда. Для двусмысленного 1,234 инструмент смотрит, как в остальной таблице записаны десятичные дроби, и только потом решает.

Даты переписываются как YYYY-MM-DD, единственный порядок, который никто не прочтёт неверно. Чтобы понять, идёт ли в столбце сначала день или месяц, инструмент ищет значение больше 12 в одной из позиций. Когда ни одна ячейка этого не решает, даты остаются как были набраны, а проверки сообщают, сколько их.

Как читать проверки

• Нет строки заголовков или первая строка похожа на данные (больше половины в ней числа или даты): добавьте в таблицу строку с названиями.
• Столбцы без названия: пустая ячейка заголовка оставляет программе экранного доступа нечего озвучить.
• Нет подписи: хватит одной короткой фразы.
• Объединённые ячейки сохранены: это допустимо, но по такой таблице труднее перемещаться. Разъединить ячейки и повторить значение будет бережнее.
• Пустые строки или столбцы: в электронной таблице это отступы, а на веб-странице мусор.
• Широкая таблица: больше пяти столбцов при выключенной горизонтальной прокрутке.

Когда ни одно из предупреждений не подходит, строка подтверждает, что структура доступна.

Два вида результата

Для WordPress

Таблица стоит в <figure class="wp-block-table"> почти без стилей, так что ваша тема рисует её как любую другую таблицу. Вставьте код в блок «Произвольный HTML».

Отдельно

Код идёт с коротким блоком <style>, привязанным к уникальному имени класса, для любого другого сайта или отдельной страницы. Его можно также скачать как готовый файл .html.

При включённой прокрутке обёртка получает role="region", tabindex="0" и метку из подписи. Тогда пользователи клавиатуры могут поставить на эту область фокус и прокручивать её стрелками.

Переносятся только значения ячеек. Формулы, цвета ячеек, жирный шрифт, ширина столбцов и числовые форматы, которые существуют только в настройках отображения таблицы, остаются на месте.