Таблицы

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

Чтобы стилизовать таблицу 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>

Таблицы

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

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

Таблица с границами

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

Чередующаяся расцветка