1 подписчик

Таблица на сайт: Конвертация таблицы из Excel в HTML с форматированием ссылок

23 мая 202423 мая 2024

172

3 мин

Оглавление

Дано
Задача
Ход решения

Дано

Некоторая таблица с ценами и длинными ссылками на товар/услугу созданная в 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>