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

Создавайте HTML-таблицы с визуальным редактором и мгновенно копируйте код.

СтрокиСтолбцы Строка заголовка Граница Полосатые строкиОтступ

HTML-вывод

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

Об этом инструменте

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

Сгенерированный HTML следует семантической разметке с правильной структурой thead и tbody, что лучше для доступности и экранных читалок. Код обновляется в реальном времени по мере редактирования.

Как использовать

Установите количество строк и столбцов.
Переключите строку заголовка, границу и чередующиеся строки с помощью флажков.
Отрегулируйте значение отступа ячейки.
Нажмите на любую ячейку, чтобы ввести содержимое напрямую.
Скопируйте код в разделе «HTML-вывод» и используйте в своём проекте.

Случаи использования

Отлично подходит для таблиц сравнения данных, таблиц цен, расписаний, таблиц характеристик продуктов и любой информации, отображаемой в табличной форме на веб-странице.

Частые вопросы

Можно ли стилизовать таблицу без CSS? — Да. Сгенерированный HTML включает атрибуты border и cellpadding, поэтому базовые стили применяются без CSS.
Можно ли добавить colspan или rowspan? — Инструмент генерирует базовую структуру таблицы. Отредактируйте сгенерированный код напрямую для добавления атрибутов colspan/rowspan.
Как сделать таблицу адаптивной? — Оберните таблицу в div с overflow-x: auto или используйте CSS-медиазапросы для горизонтальной прокрутки на маленьких экранах.