Дано
- Некоторая таблица с ценами и длинными ссылками на товар/услугу созданная в excel
- MS Excel / Google таблицы / любой другой редактор в котором можно изменить таблицу используя формулы.
- Сайт или другая площадка для размещения c HTML-редактором и поддержкой стилей CSS
Задача
Переместить имеющуюся excel-таблицу с 50 строками и 4 колонками на сайт и оформить так, что бы ссылки отображались кнопками. Время выполнения ограничено 5 минутами
Ход решения
Так получилось, что на сайте, с которым я работала по данной задаче, нет возможности нормально вставить информацию из Excel. При стандартном "Копировать - вставить" мы получаем на выходе обычный текст. А создавать таблицу во встроенном редакторе займет много времени.
Что я только не пробовала, но всегда оставались какие-то проблемы:
- копировала таблицу в ворд > сохраняла как веб страницу > добавляла полученный код / его табличную часть на сайт, но таблица получалась слишком широкой либо длинной, а каждую ссылку потом приходилось форматировать отдельно;
- использовала бесплатные онлайн редактор - тут результат был значительно приятнее, но проблема ссылками сохранялась;
- использовала генераторы html таблиц - но оказалось это не та задача которую они могут решить.
С подачи знакомого программиста и собственных скудных знаний в верстке подобрала наиболее удобный для себя вариант решения данной проблемы.
Решение
Редактируем таблицу в excel
- Создаем новую колонку
- В новой колонке создаем формулу в первой ячейке, после заголовка: =СЦЕПИТЬ("<a href=""";ССЫЛКА;""">"; "На канал>"; "</a>" (на месте слова "ССЫЛКА" выбираем ячейку с url путем, а вместо слов "На канал>" можно указать любой текст)
- Протягиваем формулу
Выделяем таблицу и копируем. Колонку с URL захватывать не нужно
Конвертируем HTML-код
Поможет в генерации кода https://tableconvert.com/excel-to-html
- Скопированную часть таблицы вставляем вместо текста "Paste your Excel data..."
- Снимаем галку с пункта "Escape HTML table"
- Копировать получившийся HTML-код
На данном этапе таблица при вставке на сайт через внутренний HTML-редактор будет выглядеть так:
Этот вариант уже можно использовать. На вашем сайте может выглядеть иначе, все зависит от стилей используемых на сайте, обычно стили таблицы заранее прописаны.
Добавляем красоты: кнопки, границы, выравнивание, заголовки
Так как я не мастер верстки сайтов, то воспользовавшись поиском CSS стилей для таблиц подобрала для такой вариант:
В этой статье я расскажу, как сделать именно такой стиль оформления таблицы.
Для того что бы таблица выглядела так, нужно:
- Заменить строку "<table>" на "<table class="table_price">"
- Добавить строку заголовка <caption>Заголовок</caption> под строку "<table class="table_price">"
- Добавить в начало кода :
<style type="text/css">
.table_price {
border-collapse: collapse;
border-left: 3px solid #F79361;
border-right: 3px solid #F79361;
border-bottom: 3px solid #F79361;
font-family: "Lucida Grande", sans-serif;
}
.table_price caption {
background: #F79361;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 10px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.3);
color: white;
font-family: "Roboto Slab",serif;
font-style: normal;
font-size: 26px;
text-align: center;
margin: 0;
}
.table_price td, .table_price th {
padding: 10px;
}
.table_price th {
text-align: left;
font-size: 18px;
}
.table_price tr:nth-child(2n) {
background: #E5E5E5;
}
.table_price td:last-of-type {
text-align: center;
}
.table_price a {
display: inline-block;
padding: 5px 10px;
color: white;
background: #F79361;
box-shadow: 2px 2px 0 0 #a22800;
position: relative;
}
.table_price a:hover {
color: black;
box-shadow: none;
top: 2px;
left: 2px;
}
</style>
4. Заменить <td> на <th> для заголовков в начале кода таблицы:
Бонус
Для того что бы изменить цветовую гамму нужно в CSS-коде указанном в 3 пункте поменять значения цветов:
Например заменив везде "#F79361" на "#6633FF" выйдет:
Полученный код добавляем на сайт.
Пишите о своих вариантах решения данной задачи : )