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

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


<table class="table">
    <tr>
        <th>ФИО сотрудника</th>
        <th>Возраст</th>
        <th>Должность</th>
    </tr>
    <tr>
        <td>Иванов И.И.</td>
        <td>25</td>
        <td>Менеджер</td>
    </tr>
    <tr>
        <td>Петров П.П.</td>
        <td>30</td>
        <td>Программист</td>
    </tr>
    <tr>
        <td>Сидоров С.Д.</td>
        <td>27</td>
        <td>Менеджер</td>
    </tr>
    <tr>
        <td>Никитин А.М.</td>
        <td>27</td>
        <td>Руководитель</td>
    </tr>
    <tr>
        <td>Синицына М.П.</td>
        <td>33</td>
        <td>Бухгалтер</td>
    </tr>
</table>

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

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

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


   @font-face {
        font-family: "OpenSans";
        src: url('/font/OpenSans-Regular.ttf');
        font-style: normal;
        font-weight: normal;
    }

    @font-face {
        font-family: "OpenSans";
        src: url('/font/OpenSans-Bold.ttf');
        font-style: normal;
        font-weight: bold;
    }

    table {
        font-family: 'OpenSans';
        overflow:hidden;
        border:1px solid #e0e0e0;
        border-collapse: collapse;
        background:#fff;
        width:70%;
        margin:5% auto 0;
    }

    th, td {
        padding:18px 28px 18px;
        text-align:center;
    }

    th {
        padding-top:22px;
        background:#B9D200;
        color: #FFF;
        line-height: 1.5;
        text-transform: uppercase;
    }

    td {
        border-top:1px solid #e0e0e0;
        border-right:1px solid #e0e0e0;
    }

    tr:nth-child(2n){
        background: #F8F7F3;
    }

    tr:hover {
        background: #DBDBDB;
        -o-transition: all 0.1s ease-in-out;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

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

tr:nth-child(2n){
    background: #F8F7F3;
}

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

tr:hover {
    background: #DBDBDB;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

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

Демо


Вам также могут понравиться

Современные способы заработка на сайтах

Современные способы заработка на сайтах

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

Пользовательский тип свойств инфоблока в 1С Битрикс

Пользовательский тип свойств инфоблока в 1С Битрикс

В дополнение к статье о создании собственного типа пользовательских полей хочу рассказать как делать аналогичные свойства для информационных блоков, т.к. эти свойства относятся к другому модулю, а именно «информационные блоки» (iblock).

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке

Самые читаемые

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

Эта статья не истина в последней инстанции, а лишь набор правил которые я применяю при создании/испр...

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...