{"draftJsState":{"blocks":[{"data":{"image":{"id":"664edaa429daba0b21540672"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eko0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дано","type":"header-two","key":"8ollc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Некоторая таблица с ценами и длинными ссылками на товар/услугу созданная в excel","type":"unordered-list-item","key":"4enkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"MS Excel / Google таблицы / любой другой редактор в котором можно изменить таблицу используя формулы.","type":"unordered-list-item","key":"7u2oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сайт или другая площадка для размещения c HTML-редактором и поддержкой стилей CSS","type":"unordered-list-item","key":"58a77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задача","type":"header-two","key":"9mcjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переместить имеющуюся excel-таблицу с 50 строками и 4 колонками на сайт и оформить так, что бы ссылки отображались кнопками. Время выполнения ограничено 5 минутами","type":"unstyled","key":"6phbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ход решения","type":"header-two","key":"2magp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так получилось, что на сайте, с которым я работала по данной задаче, нет возможности нормально вставить информацию из Excel. При стандартном \"Копировать - вставить\" мы получаем на выходе обычный текст. А создавать таблицу во встроенном редакторе займет много времени. ","type":"unstyled","key":"okg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что я только не пробовала, но всегда оставались какие-то проблемы:","type":"unstyled","key":"eot7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"копировала таблицу в ворд > сохраняла как веб страницу > добавляла полученный код / его табличную часть на сайт, но таблица получалась слишком широкой либо длинной, а каждую ссылку потом приходилось форматировать отдельно;","type":"unordered-list-item","key":"4kqal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"использовала бесплатные онлайн редактор - тут результат был значительно приятнее, но проблема ссылками сохранялась;","type":"unordered-list-item","key":"4mgm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"использовала генераторы html таблиц - но оказалось это не та задача которую они могут решить.","type":"unordered-list-item","key":"9q4hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С подачи знакомого программиста и собственных скудных знаний в верстке подобрала наиболее удобный для себя вариант решения данной проблемы.","type":"unstyled","key":"7c7pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Решение","type":"header-two","key":"2hanq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактируем таблицу в excel","type":"header-three","key":"dv5jo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем новую колонку","type":"ordered-list-item","key":"9dl5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":88,"style":"BOLD"},{"length":9,"offset":103,"style":"BOLD"}],"text":"В новой колонке создаем формулу в первой ячейке, после заголовка: =СЦЕПИТЬ(\"\"; \"На канал>\"; \"\" (на месте слова \"ССЫЛКА\" выбираем ячейку с url путем, а вместо слов \"На канал>\" можно указать любой текст)","type":"ordered-list-item","key":"8neac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Протягиваем формулу","type":"ordered-list-item","key":"2dq7f"},{"data":{"image":{"id":"664ef74bd1debb404b723ccc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Преобразование таблицы","type":"atomic:image","key":"80rip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выделяем таблицу и копируем. Колонку с URL захватывать не нужно","type":"unstyled","key":"b2ack"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конвертируем HTML-код","type":"header-three","key":"cbs32"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":38,"offset":25}],"inlineStyleRanges":[],"text":"Поможет в генерации кода https://tableconvert.com/excel-to-html","type":"unstyled","key":"2i397"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скопированную часть таблицы вставляем вместо текста \"Paste your Excel data...\"","type":"ordered-list-item","key":"6mim8"},{"data":{"embedData":{"type":"external","host":"disk.yandex.ru","image":{"src":"https://avatars.dzeninfra.ru/get-zen_brief_embed/271828/pub_664eda98691fce4b3cc94126_664eebbf8df6514b10bb37f4/smart_crop_600x300","width":600,"height":300,"mainColor":"#F8F8F8"},"src":"","title":"2024-05-23 14-06-34 (online-video-cutter.com).gif"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Снимаем галку с пункта \"Escape HTML table\"","type":"ordered-list-item","key":"t1i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копировать получившийся HTML-код","type":"ordered-list-item","key":"ej05q"},{"data":{"image":{"id":"664ef7934d7ed14c93110907"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конвертируем таблицу в HTML","type":"atomic:image","key":"b0upm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На данном этапе таблица при вставке на сайт через внутренний HTML-редактор будет выглядеть так:","type":"unstyled","key":"etrs0"},{"data":{"image":{"id":"664eed40ecd30521ccdf8566"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Промежуточный вид таблицы","type":"atomic:image","key":"1bbv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот вариант уже можно использовать. На вашем сайте может выглядеть иначе, все зависит от стилей используемых на сайте, обычно стили таблицы заранее прописаны.","type":"unstyled","key":"5lg14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем красоты: кнопки, границы, выравнивание, заголовки","type":"header-three","key":"45obf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как я не мастер верстки сайтов, то воспользовавшись поиском CSS стилей для таблиц подобрала для такой вариант:","type":"unstyled","key":"6kbm9"},{"data":{"image":{"id":"664eeef14d7ed14c93fe86a4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вариант стиля таблицы","type":"atomic:image","key":"47acb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье я расскажу, как сделать именно такой стиль оформления таблицы.","type":"unstyled","key":"1eva4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Для того что бы таблица выглядела так, нужно:","type":"unstyled","key":"f4bkl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":17,"style":"BOLD"},{"length":27,"offset":30,"style":"BOLD"}],"text":"Заменить строку \"\" на \"

\"","type":"ordered-list-item","key":"d0ueo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":26,"style":"BOLD"},{"length":27,"offset":67,"style":"BOLD"}],"text":"Добавить строку заголовка под строку \"

\"","type":"ordered-list-item","key":"5vgei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавить в начало кода :","type":"ordered-list-item","key":"blpad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4kn7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Заменить

на	для заголовков в начале кода таблицы:","type":"unstyled","key":"2k4ls"},{"data":{"image":{"id":"664ef2868e24706f3f9e8b92"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"	меняем на	","type":"atomic:image","key":"1a25m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бонус","type":"header-three","key":"cbks8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того что бы изменить цветовую гамму нужно в CSS-коде указанном в 3 пункте поменять значения цветов:","type":"unstyled","key":"d5cjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":24,"style":"BOLD"},{"length":7,"offset":37,"style":"BOLD"}],"text":"Например заменив везде \"#F79361\" на \"#6633FF\" выйдет:","type":"unstyled","key":"1p32r"},{"data":{"image":{"id":"664ef9218df6514b10db45da"},"images":[{"id":"664ef9218df6514b10db45da"}],"contents":{}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9j8sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полученный код добавляем на сайт. ","type":"unstyled","key":"aq00t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пишите о своих вариантах решения данной задачи : )","type":"unstyled","key":"d56j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dn14o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"vV0S96u1hoMX641ah8LF"}],"entityMap":{"0":{"data":{"url":"https://tableconvert.com/excel-to-html"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}