Таблицы

Простой CSS для HTML-таблиц.

Стандартная таблица

Чтобы создать стандартную таблицу, примените к тегу <table> класс pure-table. Это создаст отступы и вертикальные границы для ячеек таблицы, а также выделит заголовок таблицы.

# Фирма Модель Год
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Фирма</th>
            <th>Модель</th>
            <th>Год</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Разлинованная таблица

Чтобы появились и горизонтальные, и вертикальные границы на всех ячейках, примените класс pure-table-bordered к тегу <table>.

# Фирма Модель Год
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Фирма</th>
            <th>Модель</th>
            <th>Год</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Таблица с горизонтальными линиями

Если вам больше нравятся только горизонтальные линии, добавьте класс pure-table-horizontal к тегу <table>.

# Фирма Модель Год
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table class="pure-table pure-table-horizontal">
    <thead>
        <tr>
            <th>#</th>
            <th>Фирма</th>
            <th>Модель</th>
            <th>Год</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Полосатые таблицы

Для облегчения визуального восприятия большие таблицы часто делают полосатыми. Добавление класса pure-table-odd к каждому нечётному тегу <tr> поменяет фон и создаст «эффект зебры». Это пригодится для старых браузеров, таких как IE 8.

Примечание: В браузерах с поддержкой псевдо-селектора CSS3 nth-child есть способ гораздо проще. Добавьте класс pure-table-striped к тегу <table>, и «зебра-эффект» появится автоматически. Это не работает в Internet Explorer 8 и ниже.

# Фирма Модель Год
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
4 Ford Focus 2008
5 Nissan Sentra 2011
6 BMW M3 2009
7 Honda Civic 2010
8 Kia Soul 2010
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Фирма</th>
            <th>Модель</th>
            <th>Год</th>
        </tr>
    </thead>

    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>

        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>

        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>

        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>

        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>

        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>

        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>
Перевод c оригинального сайта purecss.io
© 2017 Aharito