Часто веб-мастеру требуется наглядно представить табличные данные на сайте, однако стандартные стили оформления таблицы выглядят мягко говоря невзрачно. Однако современные возможности 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;
}

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

Демо


Полезная статья?
(Нет голосов)
Вам также могут понравиться
Авторизация на сайте при помощи Вконтакте

Авторизация на сайте при помощи Вконтакте

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

Исключения в PHP, что это и как ими пользоваться

Исключения в PHP, что это и как ими пользоваться

В этой статье вы узнаете что такое исключения в PHP и как их использовать для обработки ошибок. Начиная с PHP версии 5.0 стала доступна новая модель обработки ошибок, так называемые исключения. Она позволяет более гибко и информативно для пользователя обрабатывать не стандартные ситуации в работе вашего приложения. 

Загрузка файлов на сервер средствами PHP

Загрузка файлов на сервер средствами PHP

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


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