5 способов сделать данные визуально интересными

Как разработчику, иногда просто слишком просто сбросить табличные данные на веб-страницу и назвать их «хорошими». Вы знаете, просто создайте простую таблицу, дайте ей базовый CSS, чтобы привести ее в порядок, и все готово, верно ? Неправильно. Если вы вдумчивый дизайнер, то вы понимаете, что данные находятся на странице, чтобы доказать свою точку зрения, и ваша работа состоит в том, чтобы сделать эти в противном случае утомительные данные интересными и убедительными.

Мы живем в эпоху обильных данных. Некоторые могут назвать это «эрой информационной перегрузки». Вот почему превращение этих данных в полезную информацию действительно важно. Итак, как мы берем огромное количество данных и создаем интересную, привлекательную информацию? Ниже приведены несколько мест для начала. Хотя большинство из них являются немного техническими, вы можете проверить последний совет вместе с примерами в конце, чтобы получить вдохновение для дизайна данных.

Настройка таблиц с помощью циклов «Пока»

Я знаю, что я просто высмеивала разработчиков, которые просто сбрасывают данные в таблицу и называют это хорошим ходом, но есть несколько мощных способов по-прежнему использовать таблицы, которые требуют большего, чем просто щелкнуть мышью по какому-то CSS и уйти. Я всегда делаю динамические наборы данных, используя циклы PHP «while» . Таким способом легко генерировать таблицы, но не всегда так легко сделать так, чтобы они хорошо выглядели и привлекали пользователей.

CSS-псевдо-класс n-го ребенка

Мне регулярно приходится использовать PHP или какой-либо другой язык сценариев для создания огромного списка табличных данных. Один из самых простых способов сделать ваши таблицы визуально привлекательными при работе с динамическими данными — это использовать вызов CSS nth-child. Вот пример CSS:

[sourcecode language = ”html”]
.SomeClass tr: nth-child (odd) {background-color: #ccc;}
.SomeClass tr: nth-child (even) {background-color: #fff;}
[/исходный код]

Когда вы кодируете свою таблицу, вот как это будет выглядеть:

[sourcecode language = ”html”] </ pre>
<table class = «SomeClass»>
<TBODY>
<TR>
<th> Имя </ th>
<th> Фамилия </ th>
</ TR>
<TR>
<TD> Билли </ TD>
<TD> Joel </ TD>
</ TR>
<TR>
<TD> Джои </ TD>
<TD> Sams </ TD>
</ TR>
<TR>
<TD> Сэмми </ TD>
<TD> Законопроекты </ TD>
</ TR>
</ TBODY>
</ Table>
<Предварительно>
[/исходный код]

Теперь просто сделайте стиль, используя эту технику псевдокласса. Имейте в виду, что IE не поддерживает этот псевдокласс, но есть некоторые обходные пути jQuery. Самый простой способ, который я нашел, чтобы сделать эту работу, это добавить еще один набор классов CSS, как это:

[sourcecode language = ”html”]
/ * CSS для IE для использования псевдокласса nth-child * /
.SomeClass tr: nth-child (odd) {background-color: #ccc;}
.SomeClass tr: nth-child (even) {background-color: #fff;}
[/исходный код]

Затем используйте этот jQuery, чтобы он заработал:

[sourcecode language = ”html”]
<script type = «text / javascript» src = «https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»> </ script> // Вызов jQuery из Google CDN или wherevs <script type = «text / javascript»> // <! [CDATA [
$ (документ) .ready (function () {
$ («. SomeClass tr: nth-child (even)»). AddClass («even»);
$ («. SomeClass tr: nth-child (odd)»). AddClass («odd»);
});
//]]> </ script>
[/исходный код]

Я поместил весь приведенный выше код в раздел заголовка моего HTML-документа.

Сортируемые столбцы

Мне также нравится делать мои колонки сортируемыми. Это позволяет пользователям быстро манипулировать и упорядочивать данные для своих целей и понимания.

Вы не можете просто поставить галочку и сделать таблицы сортируемыми. Вам нужно будет использовать jQuery или какой-либо другой JavaScript, чтобы он работал. Я использую простую библиотеку TableSorter, которая позволяет мне добавить класс в таблицу, и все готово.