Как добавить таблицу в Тильде

Соберите таблицу в Тильде: вставьте её блоком CL46 или в текстовый редактор, проверьте ширину колонок и мобильное отображение до публикации страницы.

Таблица в Тильде собирается тремя путями, и выбор зависит от того, где ей место. Отдельный блок CL46 даёт управление шириной колонок и кнопками в ячейках, текстовый редактор вставляет таблицу внутрь статьи, а базовые блоки принимают её через контекстное меню. Чтобы понять, как добавить таблицу в Тильде под свою задачу, начните с блока CL46: заполните шапку и строки, задайте ширины колонок, проверьте мобильное отображение и откройте опубликованную ссылку у другого человека.

Таблица в Тильде: три способа вставки и что выбрать

Справка Тильды различает три сценария: отдельный блок CL46[1] для таблицы на странице сайта, вставка в блочном текстовом редакторе[1] для статьи, документации или лекции курса и вставка в текст стандартных блоков[1] для таблицы внутри базового блока.

Задача Способ Что получаете
Прайс, тарифы, сравнение планов на лендинге
Блок CL46 из категории «Колонки»
Ширина колонок в процентах, ссылки и кнопки в ячейках, настройка мобильного поведения
Таблица внутри статьи или документации
Блочный текстовый редактор (Потоки, Docs, лекции курса, блок TX24 «Статья»)
Таблица живёт в потоке текста, ширину колонок тянете мышью
Пара строк внутри обычного текстового блока
Текстовый редактор базового блока (например, TX01 «Текст»)
Быстрая вставка через меню из трёх точек

Критерий простой: если таблица — самостоятельный смысловой блок с ценами и кнопками, берите CL46. Если она поясняет текст, вставляйте в редактор. Если строк две-три и они не несут коммерческой нагрузки, хватит базового блока.

Тот же набор данных в блочном текстовом редакторе

Блочный редактор работает в Потоках, Docs, лекциях курса с типом «Статья» и в блоке TX24 «Статья» из категории «Текстовый блок». Порядок для TX24 такой: нажмите «Редактировать блок», затем иконку плюса слева от контента и выберите элемент «Таблица». Тильда создаст пустую таблицу, а строки и колонки добавляются кнопками, которые появляются при наведении на области справа и снизу от таблицы. Меню из трёх точек у левого края строки даёт добавить строку сверху или снизу, задать цвет текста и фона, удалить строку; такое же меню вверху колонки добавляет колонку слева или справа. Ширину отдельной колонки меняют, потянув мышью за её правую границу.

Учебный пример

Входные данные — те же три колонки и две строки, что и для CL46:

План;Проекты;Цена
Старт;1;100
Команда;3;250

Заполненный результат в таблице блочного редактора:

План Проекты Цена
Старт
1
100
Команда
3
250

Проверка: в таблице три колонки и три строки с шапкой. Если при вставке появилась одна ячейка, добавьте колонки и строки через меню и перенесите значения по местам. Ширину колонок здесь меняют перетаскиванием правой границы колонки.

Стандартный блок: таблица через контекстное меню

В большинстве блоков библиотеки таблица вставляется через текстовый редактор; справка показывает это на блоке TX01 «Текст». Кликните по текстовому полю в контенте блока или в режиме редактирования страницы, в контекстном меню нажмите три точки и выберите пункт «Таблица». Дальше ячейка редактируется через кнопку с тремя точками в её правом верхнем углу: добавить колонку справа или слева, строку сверху или снизу, объединить или разъединить ячейки, удалить строку, столбец или таблицу. На тех же данных План/Проекты/Цена со строками Старт/1/100 и Команда/3/250 результат совпадает с таблицей выше, а на мобильном такая таблица сжимается до ширины экрана, и содержимое может переноситься на новую строку.

Блок CL46: строки, столбцы и шапка

Блок «Таблица» лежит в категории «Колонки» под номером CL46. Данные вводятся текстом, а разметку задают два символа: столбцы разделяет точка с запятой, строки — перенос строки по Enter.

Порядок сборки:

  1. Добавьте блок CL46 на страницу и откройте вкладку «Контент».
  2. В поле «Шапка таблицы» впишите названия колонок через ;.
  3. В поле «Содержимое таблицы» — строки, каждая с новой строки, ячейки через ;.
  4. Сверьте число ячеек в каждой строке с числом колонок в шапке. Лишняя точка с запятой сдвигает всю строку вправо.

Учебный пример

Входные данные для блока CL46 — ровно то, что вводится в два поля:

Шапка таблицы:
План;Проекты;Цена

Содержимое таблицы:
Старт;1;100
Команда;3;250

Заполненный результат на странице:

План Проекты Цена
Старт
1
100
Команда
3
250

Значения условные: это не тарифы Тильды и не предложение автора. Проверка: в шапке три ячейки, в каждой строке тоже три. Если после вставки таблица «съехала», ищите лишний или пропущенный ;.

Ширина таблицы и колонок в процентах

Ширина всей таблицы задаётся в настройках блока: там же указывают количество колонок и отступ слева. Ширина отдельных колонок вводится в контенте, в поле в самом низу, в процентах. Сумма значений должна равняться 100. Пустое поле даёт колонки одинаковой ширины.

Для учебной таблицы распределение такое:

Колонка Ширина
План
50%
Проекты
25%
Цена
25%
Сумма
100%

В поле это записывается одной строкой: 50%;25%;25%. Проверка арифметики: 50 + 25 + 25 = 100. Если сумма больше или меньше 100%, пересчитайте значения до публикации. Первую колонку с названием плана логично сделать широкой, числовые — узкими.

Ссылки и кнопки внутри ячейки

Ссылка или кнопка ставится прямо в текст ячейки конструкцией link=http://mylink.com или button=http://mylink.com. Всё содержимое ячейки после этого становится ссылкой или надписью на кнопке.

Для учебной таблицы добавим кнопку в колонку «Цена»:

План;Проекты;Цена
Старт;1;100 button=https://example.com/start
Команда;3;250 button=https://example.com/team

В результате в ячейке «Цена» появится кнопка с надписью «100» и «250» соответственно. Если нужно, чтобы ссылки открывались в новой вкладке, поставьте галочку в Настройках таблицы → Вся таблица → «Открывать ссылки в новой вкладке».

Проверка: откройте предпросмотр и нажмите каждую кнопку. Адрес в строке браузера должен совпасть с тем, что вы вписали. Если кнопка не появилась, сверьте запись с примером: 100 button=https://example.com/start.

Мобильная версия: сжатие или горизонтальный скролл

У таблицы CL46 два варианта поведения на смартфоне: она сохраняет размер десктопной версии и выходит за край экрана, либо сжимается до ширины экрана. Сжатие включается галочкой «Разрешить изменение ширины таблицы на мобильных устройствах» в настройках.

Справка советует разрешать сжатие для таблиц с 2–3 столбцами и коротким содержимым — цифрами и короткими фразами. Для широких таблиц с длинными названиями сжатие превратит ячейки в нечитаемые столбики, и горизонтальный скролл останется рабочим вариантом.

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

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

Проверка содержимого и публикация

Пока страница не опубликована, её видите только вы. Публикация даёт публичную ссылку, по которой страницу откроет любой человек; адрес из строки браузера в режиме редактирования служебный и у другого не откроется. [3]

Чек-лист перед публикацией:

  • В шапке и каждой строке одинаковое число ячеек.
  • Сумма ширин колонок равна 100%.
  • Каждая кнопка и ссылка ведёт на нужный адрес, проверено в предпросмотре.
  • Мобильный предпросмотр: таблица читается, ничего не обрезано.
  • Числа и подписи сверены с источником данных.

Публикация: нажмите «Опубликовать» на верхней панели, в окне появится публичная ссылка. Скопируйте её и отправьте человеку, который не заходил в ваш аккаунт, — он должен увидеть страницу с таблицей. Если после правок изменения не видны, обновите страницу: браузер часто держит старую версию. Правки, внесённые после публикации, требуют повторной публикации, иначе другие увидят прежнюю версию.

Если таблица — часть FAQ или блока с частыми вопросами, пригодится разбор FAQ для сайта с нейросетью. Для отдельной задачи вставки кода на страницу смотрите как добавить HTML-код в Тильде.

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

Источники

  1. Как создавать таблицыhelp-ru.tilda.cc
  2. Публикация страницыhelp-ru.tilda.cc

Валерий Курземнек

Автор метода «Машиночитаемый маркетинг»

Что ещё почитать