Оформление таблиц в веб дизайне и не только

Тема, которую я хотел бы затронуть в данной теме довольно интересная и важная при работе с различными данными, которые необходимо структурировать в таблицу. Очень многие веб мастера и даже веб дизайнеры, которые должны были бы уделять каждому элементу, каждой отдельной части на всём сайте своё должное внимание, не уделяют никакого значения, что, мягко говоря, не совсем правильно. Поскольку главная задача дизайнера - это максимально упростить работу пользователя с данными и сайтом вообще.

Возьмём для примера обычную небольшую таблицу из нескольких столбцов и строк.

Как видите, всего для 9 значений в нашей таблице создано 10 линий и аж 21 пересечение. Сразу понятно, что подобное размещение серьёзно затрудняет читабельность информации.

Теперь просто напросто убираем вертикальные линии и читабельность увеличивается на порядок.
удобное оформление таблицы на сайте
 
Не будем на этом останавливаться и уберём остальные вертикальные линии, заодно и выровняем наши записи посередине таблиц. Как видите, даже такая с виду мелочь может значительно упростить восприятие данных, правда данный приём подходит не для всех таблиц, потому как "длинная" обширная таблица уже теряет свою читабельность - начинает уставать глаз, потому как сложно постоянно отслеживать строки.

Можно сказать, что мы уже достигли необходимой цели - получили удобную, понятную и довольно симпатичную таблицу, что собственно и входит в цели дизайнера. Но мы то не станем останавливаться на достигнутом и хотим сделать таблицу ещё более красивой и эстетичной? Для этого нам стоит использовать цвета для выделения заголовков, то есть названия таблиц, а так же чередовать выделения строк (чётные выделяем, нечётные не выделяем).

Как и в других статьях данные примеры лучше всего использовать только тогда, когда это логично и, можно сказать, необходимо. Ведь каждый отдельный случай требует индивидуального внимания, но большой шаг вперёд на пути совершенства в дизайне мы уже с вами сделали.
 




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка