Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Быстрые инструменты CSS для того, чтобы ваши веб-таблицы выглядели как Excel

Время от времени мы хотим представить наши данные электронной таблицы Excel на веб-странице и найти варианты, которых не хватает. Если вы когда-либо экспортировали документ Microsoft Office, вы будете знать инструкции по форматированию мусора, которые отправляются вместе с информацией. Как мы можем сохранить внешний вид Excel без разметки Office? Вам повезло, у нас есть решение!

С небольшим количеством магии CSS мы можем фактически воспроизвести основные версии Excel, выглядеть и чувствовать себя вполне реалистично в ваших простых старых HTML-таблицах. Не только это, но и волшебники кода Cogniview дали вам выбор, какую версию Excel вы хотели бы подражать.

Зайдите сюда, чтобы скачать ZIP-файл содержащий пример веб-страницы (показанной ниже) и файлы CSS. Существует одна таблица стилей для каждой версии Excel, а также пара изображений, чтобы получить особые биты затенения 2007 года.

Существует одна таблица стилей для каждой версии Excel, а также пара изображений, чтобы получить особые биты затенения 2007 года

Когда вы откроете zip-файл и запустите веб-страницу, вы увидите, что мы взяли некоторые примеры данных с InfoPlease.com, представляющих население городов США. В верхней части страницы находится раскрывающийся список, позволяющий выбрать внешний вид, который вы хотите отобразить. Этот раскрывающийся список изменяет CSS для отображаемой таблицы.

Чтобы использовать CSS-стили в ваших собственных проектах, сначала вы должны указать веб-странице, какую таблицу стилей вы хотите использовать:

Далее в вашей таблице укажите класс, который вы хотите использовать.

<table class = "ExcelTable2007">

В приведенных выше примерах я использовал 2007, просто измените их на ту версию, которая вам нужна.

Используйте тег TH для первой строки таблицы («заголовок таблицы») и установите класс «заголовок» для первого столбца. Например:

<tr> <th class = "heading"> </ th> <th> A </ th> <th> B </ th> <th> C </ th> </ tr> <tr> <td class = "заголовок"> 2 </ td> <td> некоторые данные </ td> </ tr>

Там у нас это есть, Microsoft Excel смотреть на наших веб-страницах!

Очевидно, есть одно серьезное ограничение этого упражнения… люди могут подумать, что они могут взаимодействовать с вашей электронной таблицей, как если бы они использовали Excel, и разочароваться. Мы мало что можем сделать без целого нового проекта, но, по крайней мере, это лучше, чем делать скриншоты или использовать инструменты экспорта Office.

Не забудьте проверить наши Конвертер PDF в Excel , Это может сэкономить вам много драгоценного времени и повысить производительность.

Как мы можем сохранить внешний вид Excel без разметки Office?