Skip to content

Оформляем таблицы при помощи CSS

Часто веб-мастеру требуется наглядно представить табличные данные на сайте, однако стандартные стили оформления таблицы выглядят мягко говоря невзрачно. Однако современные возможности CSS позволяют оформить таблицу так, что её будет легко читать и ориентироваться по всем колонкам.

Делаем простую HTML таблицу

Теперь когда html каркас готов, давайте добавим немного красок в нашу таблицу.

Стили для наглядного отображения таблицы

Для начала скачаем шрифты, мне нравится OpenSanse, скачать его можно бесплатно скачать с Google Fonts. Подключим шрифт и зададим основной блок стилей.

Из особенностей здесь используются стили для чётных строк таблицы, чтобы было удобнее воспринимать строки (особенно когда их будет более 20 штук).

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

В результате получаем такую таблицу.

Берите статью на заметку. Удачи!
Понравилось? Поделись с друзьями:Share on VK
VK
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
ОпубликованоHTML и CSS

Оставьте первый комментарий!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Защита от ботов *

Оставляя комментарий на сайте, вы даёте согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности
© it-svalka.ru 2013 - 2021 г. - Копирование материалов сайта запрещено.