Передставляю конвертор таблицы Excel (или другой аналогичной) в код для вставки на страницу созданную в онлайн-конструкторе сайтов Тильда.
Таблица — это прайс-лист, гда в первой колонке наименование услуги, а во второй — цена. Вставляется обычным копипастом. Следите, чтобы не было пустых строк.
Код для «однократной вставки» (содержит стили и яваскрипт) — вставляется на страницу в отдельный блок до первой таблицы. Код таблиц (содержит HTML) может вставляться на страницы в отдельных блоках. Сколько таблиц — столько блоков.
Кнопка записи на прием (всплывает при наведении на строку таблицы) вызывает форму обратной связи (href вызова формы и name поля, в которое упадет наименование услуги, в котором кликнули по кнопке, возьмите из настроек блока с формой в тильде). Поле с названием услуги закрывается для изменений, чтобы посетитель сайта ничего в нем не менял.
Спойлер сворачивает и разворачивает таблицу. Количество строк в свернутом состоянии задается в настройках.
Строка с пустой ячейкой цены воспринимается конвертером как подзаголовок таблицы. Ячейка в которой обнаружится ключевое слово (в моем примере это слово «Стоимость») превращает строку в шапку таблицы.
Помогло? Зашли админу на чай с печеньками
Vitashy — 300 RUB Ленин — 200 RUB Даша — 170 RUB Derek341 — 110 RUB Любовь — 100 RUB CoRRRn — 100 RUB Anna — 100 RUB Лена — 100 RUB Анюта — 100 RUB A*******e — 100 RUB Vitashy — 300 RUB Ленин — 200 RUB Даша — 170 RUB Derek341 — 110 RUB Любовь — 100 RUB CoRRRn — 100 RUB Anna — 100 RUB Лена — 100 RUB Анюта — 100 RUB A*******e — 100 RUB
Большое спасибо!
tr.spunderspoiler{display:none;}
tr.spunderspoiler.active{display:table-row;}
div.spoilertabwrapper .presp-spoiler{
display:block;
margin:0;
padding:0;
height:40px;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
margin-top:-40px;
position:relative;
z-index:90;
}
div.spoilertabwrapper .sp-spoiler{
display:block;
border-top:#cd1619 2px solid;
text-align:center;
margin:0;
padding:0;
-o-transform: rotate(-0.2deg);
-ms-transform: rotate(-0.2deg);
-moz-transform: rotate(-0.2deg);
-webkit-transform: rotate(-0.2deg);
transform: rotate(-0.2deg);
padding-bottom:5px;
margin-top:2px;
}
div.spoilertabwrapper .sp-spoiler span{
display:inline-block;
color:#fff;
background:#cd1619;
border:#cd1619 1px solid;
border-top:none;
padding:10px 20px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
cursor:pointer;
min-width:200px;
}
div.spoilertabwrapper .sp-spoiler span:hover{
background:#fff;
color:#cd1619;
}
div.spoilertabwrapper{
overflow:hidden;
height:auto;
font-family:arial;
max-width:960px;
margin:0 auto;
}
table.sotbitablespoiler{
border-collapse:collapse;
border:none;
background:none;
width:100%;
margin:0;
}
table.sotbitablespoiler td{
margin:none;
margin:0;
background:none;
color: #111;
border:#d8d8d9 1px solid;
padding:10px 5px;
cursor:pointer;
}
table.sotbitablespoiler tr{
border-left:#fff 3px solid;
border-right:#fff 2px solid;
}
table.sotbitablespoiler tr:hover{
border-left:#777 3px solid;
border-right:#cd1619 2px solid;
color:#000;
}
table.sotbitablespoiler tr.zagolovok{
font-weight:bold;
}
table.sotbitablespoiler tr.zagolovok td{
border-right:none;
border-left:none;
padding:15px 5px 10px;
font-size: 18px;
padding-left:10px;
}
table.sotbitablespoiler tr.zagolovok td.noborderleft{border-left:none;border-right:none;}
table.sotbitablespoiler tr.zagolovok td{border-bottom:#cd1619 3px solid;}
table.sotbitablespoiler tr.zagolovok td.firsttd{
border-bottom: #d8d8d9 1px solid;
border-right: #d8d8d9 1px solid;
}
table.sotbitablespoiler tr.zagolovok td.lasttd{
border-left:#d8d8d9 1px solid;
}
table.sotbitablespoiler td.margotd{width:20px;}
table.sotbitablespoiler td.firsttd{border-left:none;border-right:#d8d8d9 1px solid;}
table.sotbitablespoiler td.lasttd{border-right:none;border-left:#d8d8d9 1px solid;}
table.sotbitablespoiler tr.tzshapka,
table.sotbitablespoiler tr.tzshapka td
{
background:#cd1619;
color: #fff;
font-weight:bold;
}
table.sotbitablespoiler tr td.spoilertableprice,
table.sotbitablespoiler tr.tzshapka td.thprice
{
max-width:110px;
text-align:center;
}
table.sotbitablespoiler tr.tzshapka td{
border:#b71c1f 1px solid;
}
table.sotbitablespoiler tr.tzshapka td.firsttd{border-left:none;border-right:#b71c1f 1px solid;}
table.sotbitablespoiler tr.tzshapka td.lasttd{border-right:none;border-left:#b71c1f 1px solid;}
table.sotbitablespoiler tr.tr2{
background:#f3f3f3;
}
div.spoilertabwrapper table.sotbitablespoiler tr a.spbutton{
display:none;
position:absolute;
padding:7px 15px;
margin-left:-150px;
margin-top:-8px;
text-align:center;
text-decoration:none;
background:#cd1619;
border:#cd1619 1px solid;
color: #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
}
#allrecords div.spoilertabwrapper table.sotbitablespoiler tr a.spbutton{color: #fff;}
#allrecords div.spoilertabwrapper table.sotbitablespoiler tr a.spbutton:hover{color: #cd1619;}
div.spoilertabwrapper table.sotbitablespoiler tr:hover a.spbutton
{
display:inline-block;
animation: spzakazon 0.5s ease-in;
}
div.spoilertabwrapper table.sotbitablespoiler tr a.spbutton:hover
{
background:#fff;
color:#cd1619;
}
@keyframes spzakazon {
from {
margin-left:-10px;
opacity: 0;
}
70%{
margin-left:-140px;
opacity: 0;
}
to {
margin-left:-150px;
opacity: 1;
}
}
$(document).ready(function($) {
$(document).on('click', 'div.spoilertabwrapper .sp-spoiler span', function(e){
var elemstr = $(this).parents('div.spoilertabwrapper').find('tr.spunderspoiler').nextAll(), counttr = elemstr.length;
var counttrtmp = counttr;
var spoiler = $(this);
spoiler.hide().html('');
$(this).parents('div.spoilertabwrapper').find('tr.spunderspoiler').each(function(index){
if ($(this).hasClass('active')) {
$(this).slideUp(500, function(){
$(this).removeClass('active');
//e.preventDefault();
counttrtmp--;
spoilerrenamer(spoiler)
});
}else{
$(this).delay(5 * index).fadeIn(1500, function(){
$(this).addClass('active');
counttrtmp--;
spoilerrenamer(spoiler)
});
}
});
function spoilerrenamer(spoiler){
if (counttrtmp == -1) {
var $prespspoiler = spoiler.parents('div.spoilertabwrapper').find('.presp-spoiler');
if ($prespspoiler.hasClass('active')){
$prespspoiler.slideDown().removeClass('active');
}else{
$prespspoiler.slideUp().addClass('active');
}
if (spoiler.hasClass('active')) {
spoiler.html(spoiler.attr('in')).removeClass('active').fadeIn(300);
$('html,body').stop().animate({ scrollTop: spoiler.parents('div.spoilertabwrapper').find('.lextabankhor').offset().top }, 1000);
}else{
spoiler.html('Скрыть').addClass('active').fadeIn(300);
}
}
}
});
/*[FORM-CLICK]*/
});
Предполагается, что на сайте таблица будет выглядеть так
