IZN Tools

Генератор HTML-таблиц

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

<table>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price</th>
      <th scope="col">Storage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Free</td>
      <td>$0</td>
      <td>1 GB</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$9</td>
      <td>100 GB</td>
    </tr>
  </tbody>
</table>
3 × 3У заголовочных ячеек проставлен scope, поэтому скринридер называет, к какому столбцу и строке относится значение.
Посчитано на вашем устройстве
Похожие
Форматирование HTMLКонвертер CSV в JSONГенератор подписи для почтыГенератор паролейГенератор QR-кодовГенератор CSS-градиентов

Что делает разметку таблицы хорошей

  • Строка заголовков из <th>, а не жирный <td>. Оформление — не структура.
  • scope у каждой заголовочной ячейки. col для строки заголовков, row для столбца.
  • <caption> вместо абзаца сверху. Он связывает описание с таблицей для вспомогательных технологий.
  • <thead> и <tbody>. Позволяют повторять шапку длинной таблицы при печати.

Все четыре пункта генератор проставляет сам, когда включены опции заголовков.

Что получается на выходе

| Вывод | Для чего | | --- | --- | | HTML | сама страница | | CSS | границы, полосы и отступы отдельным блоком | | Markdown | README, документация, комментарии в задачах |

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

Как сделать таблицу читаемой

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

Собирается в браузере

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

Вопросы

Зачем заголовочной ячейке scope?+

Без него скринридер читает таблицу как сплошной поток значений, не понимая, к какому столбцу относится каждое. `<th scope="col">` позволяет ему произнести «Цена, 10» вместо просто «10». Это ничего не стоит и остаётся главным отличием хорошей таблицы от плохой по части доступности.

Можно вставить из Excel или Google Таблиц?+

Да. Табличные редакторы кладут в буфер текст с табуляцией, и инструмент читает и его, и CSV. Скопируйте диапазон, нажмите «Вставить данные», вставьте, импортируйте.

Можно ли верстать таблицами?+

Страницу — нет, для этого есть CSS grid. Единственное исключение — HTML-письма: движок Outlook игнорирует flexbox и grid, поэтому там табличная вёрстка до сих пор единственная работающая.

Экранируется ли вывод?+

Да. Каждая ячейка и подпись экранируются, поэтому значение с `<` или `&` даёт корректную разметку, а не ломает страницу.