Как добавить таблицу в тильде
Перейти к содержимому

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

  • автор:

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

Добавить информацию табличного вида в Тильду очень просто. Воспользуемся стандартным блоком CL46, Таблица. Особенность его в очень простой механике заполнения: данные по столбцам отделяются точкой с запятой «;», а строки переносом строки. Сделать такую табличку очень просто в том же Excel, или Google Sheets, формат файла .csv. Для переноса данных в тильду файл надо открыть в текстовом редакторе, например, Notepad++ и перенести данные в блок Тильды. Разберем подробнее каждый этап.

Подготовка таблицы

Сохранять таблицу нужно обязательно в кодировке UTF-8 с BOM. Иначе в Тильда будут вместо текста кракозябры. Google Таблицы сохраняют в таком формате по умолчанию, поэтому для уменьшения лишних телодвижений лучше воспользоваться этим сервисом.
Для примера я возьму исходную таблицу с прайсом на медицинские анализы. В прайсе несколько столбцов, для посетителей сайта нам надо оставить только главное:

  • Код анализа
  • Наименование
  • Стоимость
  • Срок готовности

Заполним первую строчку таблицы:

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

Сохраняем таблицу на свое устройство:

И открываем ее в текстовом редакторе, рекомендую Notepad++:
То, что нужно! Столбцы отделены точкой с запятой. Переходим к Тильде.

Заполнение блока в Тильде

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

Копируем первую строчку из таблицы в Notepad++ и вставляем ее в Шапку.
Копируем остальные строки и вставляем в Содержимое таблицы.

Столбцов в таблице у нас 4, поэтому подредактируем поле Ширина колонок:

Ширина задается в процентах от общей ширины таблицы, т. е. сумма всех колонок не должна быть больше 100%. Самое широкое поле нужно для Наименования, там задаем 55%, остальное делим между оставшимися.

Сохраняем блок и получаем табличку в Тильда.

В настройках блока можно подредактировать вид таблицы под общий стиль и поведение на разных экранах.

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

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

Столкнулись с проблемой, где нужно добавить на страницу сайта большую таблицу Exсel? И не хочется делать все руками? Есть решение, как преобразовать данные с помощью простой формулы. Вам останется только перенести все одним копипастом.

Допустим, у нас есть огромная таблица с данными (представим, что она огромная):

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

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

В таблицу Excel добавляем ещё одну ячейку с символом ; и копируем ее на всю длину столбца (до конца контента).

Задаём формулу через =, поочередно выбирая ячейка&символ;&ячейка&символ;&ячейка и тд.
Здесь амперсанд (&) выступает связующим, а мы связываем все так, чтобы точка с запятой были между каждой ячейкой, его мы добавляем кнопкой на клавиатуре.

Работа с таблицами

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

Блок «Таблица» находится в категории «Колонки» (CL46).

Создание строк, столбцов и шапки

Таблица состоит из строк и колонок. При добавлении контента столбцы разделяются символом точка с запятой — «;», а строки — переносом строки (нажатием клавиши «Enter»).

Пример данных для шапки:
Время;Тип занятия;Преподаватель

Пример данных для основной части:
08:00;Хатха-йога;Иванова Анна
10:30;Пилатес;Сидорова Алеся
13:00;Аэробика;Петрова Инесса

Изменение ширины и высоты

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

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

Пример задания ширины колонок:

Ссылки и кнопки

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

Пример добавления ссылки:

Билет;100$;Узнать больше link=http://tilda.cc

Пример добавления кнопки:

Билет;100$;Узнать больше button=http://tilda.cc

Если требуется открывать ссылки не в текущем окне, а в отдельной вкладке браузера, то установите галочку в Настройках таблицы → Вся таблица → Открывать ссылки в новой вкладке.

Мобильная версия

Есть два варианта отображения таблиц в мобильной версии:
1. Таблица сохраняет такой же размер, как в версии для больших экранов, и выходит за край маленького экрана .
2. Таблица сжимается до ширины экрана устройства.

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

Совет:разрешайте сжатие на мобильных устройствах для таблиц с небольшим количеством столбцов (2-3) и небольшим количеством контента (цифры, короткие фразы).

Примеры готовых таблиц

Настройки данной таблицы: Масштаб: 1, Цвет границ шапки таблицы: #000000, Цвет границ таблицы: #d9d9d9, Цвет фона нечетной строки: #ffffff, Цвет фона четной строки: #eeeeee, Проставлена галочка «Скрыть верхнюю границу таблицы»

Настройки данной таблицы: Масштаб: 2, Цвет текста в шапке таблицы: #ffffff, Цвет границ шапки таблицы: #ff8562, Цвет шапки таблицы: #ff8562, Цвет границ таблицы: #d9d9d9, Цвет фона нечетной строки: #ffffff , Цвет фона четной строки: #ffffff, Проставлена галочка «Разрешить изменение ширины таблицы на мобильных устройствах»

Как сделать таблицу?

Также вы можете использовать блоки из категории «Расписание» и «Планы».

  • Как добавить ссылку на конкретное место на странице (якорь)?
  • Как добавить свой HTML, CSS или Javascript-код?
  • Как добавить кнопку?
  • Как сделать всплывающее окно?
  • Как добавить видео?

Этот ответ был вам полезен?

Просмотры: 18000

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *