Таблицы

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

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

Для задания стилей таблице, добавьте класс pure-table к элементу 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>, меняет фон строки и создаёт стиль "эффект зебры".

Примечание: Для браузеров, поддерживающих стандарты 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>