Как сделать сайт с таблицей в 2026: вставить таблицу и взять данные

Таблица на сайте это две разные задачи. Первая: показать готовые данные на странице так, чтобы они читались и не разъезжались на телефоне. Вторая: сделать страницу, которая сама берёт строки из Google Таблицы или выгрузки Excel, и обновляется вместе с файлом. Ниже обе: код таблицы, перенос из Excel, сортировка и поиск, прокрутка на узком экране и промпт, по которому ИИ соберёт блок за вас.

Что вам нужно: таблица на странице или сайт на данных из файла

Разница в том, откуда берутся строки. В первом случае данные лежат прямо в коде страницы: вы один раз сверстали расписание или список услуг, и они меняются только когда вы правите сайт. Во втором случае страница при каждом открытии идёт в файл и рисует строки из него: поправили таблицу, сайт обновился сам.

• Данные меняются пару раз в год (программа мероприятия, характеристики, состав услуги): хватит обычной таблицы в коде.
• Данные ведёт не тот, кто владеет сайтом (администратор держит расписание, менеджер правит прайс): таблица становится источником, а сайт только показывает её.
• Строк больше сотни и нужен поиск (справочник, список филиалов, расписание на месяц): понадобится сортировка и фильтр.
• Файл уже живёт своей жизнью в отчётах: дублировать его руками на сайте смысла нет, лучше связать.

Таблица в HTML: минимальный рабочий код

Таблица в вебе это отдельный набор тегов, а не картинка и не колонки из блоков. <table> это сама таблица, <thead> шапка, <tbody> тело, <tr> строка, <th> ячейка заголовка, <td> обычная ячейка. Такой разметки достаточно, чтобы данные понимали и люди, и поисковые роботы, и программы чтения с экрана.

<table class="data">
  <caption>Расписание занятий на август 2026</caption>
  <thead>
    <tr>
      <th scope="col">Группа</th>
      <th scope="col">День</th>
      <th scope="col">Время</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Старт</td><td>Понедельник</td><td>19:00</td></tr>
    <tr><td>Практика</td><td>Среда</td><td>19:00</td></tr>
    <tr><td>Разбор</td><td>Суббота</td><td>12:00</td></tr>
  </tbody>
</table>

Три детали, которые обычно пропускают. <caption> даёт таблице название и подписывает, к какой дате относятся данные. Атрибут scope="col" связывает заголовок с колонкой, без него озвучка таблицы голосом превращается в набор слов. И стиль border-collapse: collapse убирает двойные линии между ячейками, из-за которых таблица выглядит самодельной.

.data { border-collapse: collapse; width: 100%; }
.data th, .data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e6e6e6; }
.data th { background: #f6f6f6; font-weight: 600; }
.data tr:hover td { background: #fafafa; }

Если страницу вы собираете руками с нуля, основу мы разбирали в материале про сайт на чистом HTML: туда этот код вставляется как есть.

Как перенести таблицу из Excel или Google Таблиц

Перебивать данные руками не нужно, есть три пути.

1. Скопировать нужный диапазон прямо из Excel или Google Таблиц и вставить в чат с ИИ с просьбой вернуть готовую HTML-таблицу. Самый быстрый способ: вы получаете чистую разметку, которую вставляете в страницу и красите под свой сайт.
2. Опубликовать лист и вставить окном. В Google Таблицах это Файл → Поделиться → Опубликовать в интернете, вкладка «Встроить»: сервис отдаёт готовый код <iframe>. Опубликованная копия обновляется вслед за файлом, на обновление уходит несколько минут, а автопубликацию можно отключить в настройках публикации (справка Google).
3. Вставить книгу Excel через OneDrive: откройте файл в Excel для веба, Файл → Поделиться → Внедрить, дальше тот же <iframe> (инструкция Microsoft).

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

По теме: Как сделать папки сайта в 2026: структура файлов и адреса страниц

Сортировка и поиск по таблице

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

• Поле поиска на десяток строк кода: при вводе прячете строки, где нужного текста нет. Для прайса, списка филиалов или расписания этого хватает.
• Сортировка по клику на заголовок: тоже небольшой скрипт. ИИ пишет его с первого раза, если в задании сказать, какие колонки числовые, а какие текстовые (иначе «100» встанет раньше «20»).
• Готовая библиотека DataTables: поиск, сортировка и постраничный вывод сразу из коробки, распространяется по лицензии MIT, то есть бесплатна и для коммерческих сайтов (условия лицензии).

Простейший фильтр выглядит так: одно поле ввода и один обработчик, который сравнивает текст строки с тем, что набрали.

const input = document.querySelector('#q');
const rows = document.querySelectorAll('.data tbody tr');

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  rows.forEach(row => {
    const hit = row.textContent.toLowerCase().includes(q);
    row.hidden = !hit;
  });
});

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

Таблица на телефоне: прокрутка вместо сломанной вёрстки

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

<div class="table-scroll" tabindex="0" role="region" aria-label="Расписание занятий">
  <table class="data"> ... </table>
</div>

<style>
.table-scroll { overflow-x: auto; max-width: 100%; }
.data { min-width: 620px; }
.data th:first-child, .data td:first-child { position: sticky; left: 0; background: #fff; }
</style>

overflow-x: auto включает прокрутку внутри контейнера, min-width не даёт колонкам схлопнуться, tabindex="0" позволяет прокрутить область с клавиатуры, а position: sticky закрепляет первый столбец, чтобы при прокрутке было видно, о чём строка.

• Оставьте на телефоне 3-4 колонки, остальное спрячьте в раскрывающуюся строку «подробнее».
• Дайте понять, что таблица прокручивается: подпись «листайте вбок» или заметная тень у правого края, иначе часть посетителей решит, что колонки просто обрезаны.
• Проверьте страницу на ширине 320 и 375 точек: ездить вбок должна только таблица.
• На совсем узких экранах строку иногда проще показать карточкой в формате «поле: значение», это читается лучше, чем шесть колонок в прокрутке.

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

Остальные правила адаптива (размеры шрифта, кнопки под палец, проверка на реальном телефоне) собраны в разборе мобильной версии сайта.

Сайт, который берёт данные из таблицы

Вторая задача: файл остаётся местом, где вы работаете, а сайт показывает его содержимое. Так удобно вести прайс, расписание, список вакансий, каталог позиций, состав меню. Порядок действий такой.

1. Приведите лист в порядок: первая строка это заголовки колонок (Группа, День, Время), дальше только данные. Никаких пустых строк сверху, объединённых ячеек и подписей сбоку.
2. Откройте доступ по ссылке: Файл → Поделиться → Настройки доступа, режим «Доступ по ссылке: все, у кого есть ссылка» с ролью «Читатель». Именно этого требует сервис-посредник из следующего шага. Команда Опубликовать в интернете решает другую задачу: там выбирают формат CSV для машинного чтения или вкладку «Встроить», чтобы показать человеку готовое окно.
3. Заберите данные на странице. Без настройки это делает сервис opensheet: он отдаёт лист в виде JSON по адресу вида https://opensheet.elk.sh/ID_ТАБЛИЦЫ/Лист1 и кэширует ответ на 30 секунд (описание проекта).
4. Отрисуйте строки в своей разметке, чтобы данные попали в вашу таблицу, а не в чужое окно.
5. Проверьте, что будет, если файл недоступен: страница должна показать понятную подпись, а не пустоту.

fetch('https://opensheet.elk.sh/ID_ТАБЛИЦЫ/Лист1')
  .then(r => r.json())
  .then(rows => {
    const tbody = document.querySelector('.data tbody');
    tbody.innerHTML = rows.map(row => (
      '<tr><td>' + row['Группа'] + '</td>' +
      '<td>' + row['День'] + '</td>' +
      '<td>' + row['Время'] + '</td></tr>'
    )).join('');
  })
  .catch(() => {
    document.querySelector('.data tbody').innerHTML =
      '<tr><td colspan="3">Расписание временно недоступно</td></tr>';
  });

Про автообновление честно: мгновенным оно не бывает. Сервис-посредник держит ответ в кэше до 30 секунд, а если данные показывает опубликованная копия листа или окно <iframe>, обновление занимает несколько минут (справка Google). Для расписания, прайса и списка мероприятий это незаметно. Для данных, которые должны меняться по секундам, такая связка не годится, там нужна база данных.

Если запросов много или нужна ещё и запись обратно в таблицу, берут платный шлюз. У SheetDB бесплатный план это 2 подключённые таблицы и 500 запросов в месяц, следующий тариф стоит 29,99 $ в месяц за 10 000 запросов (действующий прайс).

• Объём: один файл Google Таблиц вмещает до 10 млн ячеек, а с апреля 2026 идёт бета-программа на удвоенный лимит в 20 млн (анонс Google Workspace).
• Приватность: опубликованный лист видит любой, у кого есть ссылка. Персональные данные, закупочные цены и внутренние комментарии выносите на отдельный лист и публикуйте только его.
• Поиск: строки, которые дорисовывает скрипт, робот видит хуже. Если таблица важна для продвижения, держите основную версию прямо в HTML, а обновление из файла делайте дополнением.

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

По теме: Как сделать сайт в Телеграме в 2026: Mini App, бот и визитка

Как описать таблицу ИИ, чтобы получить готовый блок

Нейросеть собирает такой блок за один заход, если в задании есть четыре вещи: колонки с примером данных, источник строк, поведение на телефоне и нужна ли сортировка. Расплывчатое «сделай таблицу» даёт расплывчатый результат, поэтому описывайте таблицу словами так же, как объясняли бы человеку.

Сделай блок с таблицей для страницы расписания. Один файл HTML, стили внутри, без внешних библиотек.

Колонки: Группа (текст), День недели (текст), Время (формат 19:00), Мест осталось (число).
Пример строки: Старт | Понедельник | 19:00 | 4.

Требования:
1. Разметка через table, thead, tbody, у заголовков scope="col", у таблицы caption.
2. Над таблицей поле поиска, оно прячет строки без совпадения.
3. Клик по заголовку сортирует; колонка «Мест осталось» сортируется как число.
4. На экране уже 640px таблица прокручивается вбок внутри контейнера, страница вбок не едет,
   первый столбец закреплён.
5. Данные пока зашей в HTML, но вынеси их в массив в начале скрипта, чтобы потом заменить на загрузку из Google Таблицы.

Дай один файл целиком и коротко объясни, где менять данные.

Дальше правьте по частям и одной просьбой за раз: «сделай шапку светлее», «добавь подпись под таблицей», «покажи по 20 строк с кнопкой „показать ещё“». Так вы видите, что именно изменилось, и не теряете рабочий вариант.

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

Можно ли редактировать таблицу прямо на сайте?

Обычная HTML-таблица только показывает данные, править их посетитель не может, и это правильно. Вставленный лист из Google тоже открыт на просмотр: редактирование остаётся в самом файле, у тех, кому вы дали доступ. Если нужны правки через сайт, это уже полноценное приложение с входом по паролю, а не таблица.

В таблице три тысячи строк, как быть?

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

Скопировал таблицу из Word или Excel в конструктор, вёрстка поехала. Почему?

При вставке через буфер обмена вместе с данными переносится куча служебных стилей редактора: фиксированная ширина в пикселях, свои шрифты, цвета фона. Они конфликтуют со стилями сайта. Надёжнее перенести только данные (вставка без форматирования или через ИИ) и оформить таблицу стилями страницы.

Сколько стоит связать сайт с Google Таблицей?

Базовый вариант бесплатный: публикация листа и загрузка данных скриптом ничего не стоят, opensheet тоже бесплатен. Платить приходится, когда нужны десятки тысяч обращений в месяц или запись обратно в таблицу: у SheetDB бесплатный план это 500 запросов в месяц, дальше от 29,99 $ (прайс).

Нужен ли для таблицы конструктор или хватит одной страницы?

Если таблица это единственное содержимое, хватит одной HTML-страницы на бесплатном хостинге. Конструктор оправдан, когда вокруг таблицы нужны другие блоки, формы и разделы, и вы не хотите собирать их руками. Оба пути рабочие, выбор зависит от того, сколько страниц вы планируете вести дальше.