Таблицы

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

Таблица по умолчанию

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

# Марка Модель Год
1 Хонда Accord 2009 г.
2 Тойота Камри 2012 г.
3 Hyundai Элантра 2010 г.
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</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 Хонда Согласие 2009 г.
2 Тойота Камри 2012 г.
3 Hyundai Элантра 2010 г.
<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</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 Хонда Accord 2009 г.
2 Тойота Камри 2012 г.
3 Hyundai Элантра 2010 г.
<table class="pure-table pure-table-horizontal">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</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>элементу изменяет фон строки и создает эффект в стиле зебры.

Примечание. В браузерах, поддерживающих nth-childпсевдоселектор CSS3, можно использовать более простой подход. Имя pure-table-stripedкласса может быть добавлено к <table>элементу, и чередование в стиле зебры произойдет автоматически.

# Марка Модель Год
1 Хонда Accord 2009 г.
2 Тойота Камри 2012 г.
3 Hyundai Элантра 2010 г.
4 Форд Фокус 2008 г.
5 Nissan Sentra 2011 г.
6 БМВ M3 2009 г.
7 Хонда Civic 2010 г.
8 Kia Soul 2010 г.
<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</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>