Создание таблицы из CSV. Оформление таблицы может быть любым. Преимущество такой таблицы — не надо вручную задавать ни количество столбцов, ни количество строк. Все будет сделано автоматически.

Например, она может выглядеть следующим образом (обязательно посмотрите как это выглядит на мобильном устройстве):

Как это сделать?

Нам понадобятся три HTML-блока (чтобы было проще потом править)

  1. Стили для оформления таблицы (можно менять)
  2. Таблица в формате CSV (нужно менять на свои данные)
  3. JAVASCRIPT-блок (нельзя менять)

1. Стили

<style>
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width:100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* !Дальше менять не надо! */
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd !important;
    display: block;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
</style>

Таблица в формате CSV

  • - В качестве резделителя - точка с запятой
  • - Первая строка - заголовки таблицы
  • - Можно использовать html-теги
  • - Вы можете создать таблицу в Экселе и экспортировать в csv

 

<textarea class="source">role;year;production;director;studio;Format;Url
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a></textarea>

JAVASCRIPT

ВАЖНО!

Тут надо заменить #section-4882194 и #section-4882256 на ВАШИ ID двух предыдущих HTML-блоков

 

<div class="output"></div>

<script>
$("#section-4882194, #section-4882256").css('display','none');

/* !дальше ничего нельзя менять! */
function convertToArray(e,t){var r,a,n,o={headers:null,rows:null},s=0;return t=t||{},t=$.extend(t,{seperator:";",hasHeader:!0,headerPrefix:"COL"}),a=(r=e.split("\n"))[0].split(t.seperator),t.hasHeader?(o.headers=a,o.headers=o.headers.map(function(e){return e.replace(/\//g,"_")}),s=1):o.headers=a.map(function(e,r){return t.headerPrefix+r}),n=o.headers.length,o.rows=r.map(function(e,r){return e.split(t.seperator)}),o}function tag(e,t,r){return"<"+e+" data-label='"+r+"'>"+t+"</"+e+">"}function toHTML(e){var t='<table class="styled-table"><thead>',r=[];return e.map(function(e,a){var n="";e.map(function(e,t){0==a&&(r[t]=e),n+=tag(0===a?"th":"td",e,r[t])}),t+=tag("tr",n)+(0===a?"</thead><tbody>":"")}),t+"</tbody></table>"}function csvToHtml(e,t,r){var a=convertToArray(e.val(),r||{});t.html(toHTML(a.rows))}$(".source").on("change keyup touchend",function(){csvToHtml($source,$output)}),csvToHtml($(".source"),$(".output"));
</script>

Моды для Wfolio.ru

Таблица из CSV. Фотограф Константин Шамин

Калькулятор цен

Возможность формировать цену заказа с учетом добавления дополнительных услуг.
Таблица из CSV. Фотограф Константин Шамин

Добавление всплывающего title к фотографии

Таблица из CSV. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Таблица из CSV. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Таблица из CSV. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Таблица из CSV. Фотограф Константин Шамин

Виджет обратного отсчета

Таблица из CSV. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Таблица из CSV. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Таблица из CSV. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Таблица из CSV. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Таблица из CSV. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Таблица из CSV. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.
Таблица из CSV. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS: — выравнивание высоты блоков с пакетами услуг в версии...
Таблица из CSV. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Таблица из CSV. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...