06. Оформление таблиц

Оформление таблицы

Создадим новый пустой шаблон из файлов index.html и css/style.css. В index.html поместим наш стандартный код:

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Оформление таблиц</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">
	<div class="header">
		<div class="inner"></div>
	</div>
	<div class="content section">
		<div class="inner">



		</div>
	</div>
	<div class="footer-placeholder"></div>
</div>
<div class="footer">
	<div class="inner">
	
	</div>
</div>

</body>

</html>

В css/style.css дефолтные стили:

* {box-sizing:border-box;}
html, body {min-width:320px;font-size:16px;margin:0;padding:0;height:100%;}
body {font-family:Roboto, Calibri, Arial, sans-serif;color:#252525;min-height:100%;}
h1, .h1 {display:block;font-size:36px;line-height:48px;font-weight:bold;margin-bottom:12px;}

.outer {min-height:100%;}

header,
.header,
footer,
.footer,
section,
.section {width:100%;margin:0 0 40px 0;position:relative;}

header,
.header,
footer,
.footer {height:80px;background:lightgrey;margin:0;}

footer:after,
.footer:after,
section:after,
.section:after {content:"";display:block;clear:both;}

header .inner,
.header .inner,
footer .inner,
.footer .inner,
section .inner,
.section .inner {max-width:1160px;padding:0 15px;margin:0 auto;position:relative;}

.footer-placeholder {height:80px;}
footer,
.footer {margin:-80px 0 0 0;}

Скопируйте и поместите в index.html в .content .inner вёрстку простой таблицы:

		<table class="table-1">
		<thead>
			<tr>
				<th>Зал</th>
				<th>Стоимость</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Сочи</td>
				<td>4 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 1</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 3</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 4</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 5</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Сочи 1</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Афины</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Рим</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 2</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Сочи 2</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва</td>
				<td>10 000 ₽/день</td>
			</tr>
		</tbody>
		</table>

У вас должно получится следующее:

Тег <table> собственно и есть таблица.

Тег <tr> — это строка таблицы.

Теги <thead> и <tbody> обозначают зону заголовка и зону содержимого таблицы. Эти теги не обязательны. НО настоятельно рекомендую их вставлять, т.к. иначе вместо вас браузер сам поместит их. Что от этого измениться? Допустим, вы сверстали свою таблицу без <thead> и <tbody> и использовали таблицы с классом .table. Теперь вам нужно каждую вторую ячейку подсветить, это делается такой инструкцией CSS:

.table>tr:nth-child(2n) {
	background: plum;
}

Во многих браузерах это не сработает, т.к. прямым потомком таблицы (.table) будет не <tr>, а вставленный браузером <tbody>. Естественно, рабочим кодом в этом случае будет:

.table tbody>tr:nth-child(2n) {
	background: plum;
}

Несложно догадаться, что <td> и <th> это ячейки. <th> — это ячейка-заголовок. <th> можно использовать и внутри <tbody> тоже.

Добавьте таблице атрибут border="1". Таблица изменится:

Обратите внимание, между границами самой таблицы и границами ячеек есть пустое пространство. За него отвечает атрибут cellspacing тега <table>. Например, чтобы расстояние между ячейками было равно 5px, пишут cellspacing="5". Если вы обнулите расстояние между ячейками этим атрибутом, то у каждой ячейки всё равно останутся свои собственные границы. Поэтому обычно в CSS «сливают» границы так:

table {
	border-collapse: collapse; /* По умолчанию separate */
}

Если вы это примените к текущему макету, то увидите, что границы ячеек слились.

Стилизуеи таблицу.

body {
	background: #4c959b;
	background: -moz-linear-gradient(45deg, #4c959b 0%, #5c3584 100%);
	background: -webkit-linear-gradient(45deg, #4c959b 0%,#5c3584 100%);
	background: linear-gradient(45deg, #4c959b 0%,#5c3584 100%);
}

/* Стили первой таблицы */
.table-1 {
	width:100%;
	border-collapse:collapse;
	overflow:hidden;
	margin:40px 0;
}
.table-1 th,
.table-1 td {position:relative;padding:6px 12px;}

.table-1 tr>th:first-child, /* Применяем к th, который является 1-м потомком tr */
.table-1 tr>td:first-child { /* Применяем к td, который является 1-м потомком tr */
	width:30%;
}

.table-1 thead tr,
.table-1 tbody tr:nth-child(2n) { /* Применяем к каждой второй строке */
	background-color:rgba(255, 255, 255, .3);
}

.table-1 thead tr,
.table-1 tbody tr {
	transition:color .3s, background-color .3s;
}

.table-1 tr>th:nth-child(2n), /* Текст во второй ячейке в строке центрируем */
.table-1 tr>td:nth-child(2n) {
	text-align:center;
}

/* Подсветка строки при наведении */
.table-1 tr:hover,
.table-1 tbody tr:nth-child(2n):hover { /* Перебиваем стиль выше */
	background-color:rgba(255, 255, 255, .7);
	color:#000;
}

Результат представлен ниже. Выделенная строка — это строка, над которой наведён курсор.

Объединение ячеек

У таблиц есть возможность объединять строки и столбцы. Свойство colspan отвечает за объединение ячеек из соседних столбцов, а rowspan за объединение ячеек по вертикали.

Под предыдущей таблицей добавим ещё три таблицы в общем блоке. Они более понятно покажут объединения ячеек.

		<div class="simple-tables">

			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td>2:2</td>
					<td>2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:2</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>
			
			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td rowspan="2">2:2 - 3:2</td>
					<td>2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>
			
			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td colspan="2">2:2 - 2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:2</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>

		</div>

CSS для этих таблиц:

/* Простая таблица */
.simple-tables {
	width:100%;
	overflow:hidden;
	padding:20px 0;
}
.simple-tables .simple-table {
	float:left;
	margin:0 40px 40px 0;
}
.simple-tables .simple-table:last-child {
	margin-right:0;
}
.simple-table {
	max-width:640px;
	border-collapse:collapse;
	overflow:hidden;
	margin:40px 0;
}
.simple-table td {
	padding:8px 12px;
	border:1px solid #fff;
	width:50px;
}

Работа атрибутов colspan и rowspan:

Сложная таблица, подсветка столбцов без JavaScript

Сложную таблицу привожу полностью. Реальный боевой пример, встретившийся в практике. Для неё создадим отдельный файл, чтобы не мешать содержимое с файлом, где базовые примеры таблиц.

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Оформление сложной таблицы</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">
	<div class="header">
		<div class="inner"></div>
	</div>
	<div class="content section">
		<div class="inner">

			<table class="complex-table">
			<thead>
				<tr>
					<th rowspan="2">Конференц-зал</th>
					<th rowspan="2">Площадь, м²</th>
					<th colspan="4">Площадь и типы рассадки</th>
					<th colspan="2">Будние</th>
					<th colspan="2">Выходные</th>
					<th rowspan="2">+1 час до 08:00 и после 20:00</th>
				</tr>
				<tr>
					<th>Театр</th>
					<th>Класс</th>
					<th>П&shy;об&shy;раз&shy;ная</th>
					<th>Пе&shy;ри&shy;метр</th>
					<th>день с 8:00 до 20:00</th>
					<th>4 часа с 8:00 до 20:00</th>
					<th>день с 8:00 до 20:00</th>
					<th>4 часа с 8:00 до 20:00</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-1">Москва 1</a></td>
					<td>81</td>
					<td>90</td>
					<td>70</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-2">Москва 2</a></td>
					<td>98</td>
					<td>90</td>
					<td>70</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-3">Москва-3</a></td>
					<td>83</td>
					<td>90</td>
					<td>70</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-4">Москва 4</a></td>
					<td>97</td>
					<td>90</td>
					<td>70</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-5">Москва 5</a></td>
					<td>83</td>
					<td>90</td>
					<td>70</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/sochi-1">Сочи 1</a></td>
					<td>90</td>
					<td>80</td>
					<td>64</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/sochi-2">Сочи 2</a></td>
					<td>90</td>
					<td>80</td>
					<td>64</td>
					<td>30</td>
					<td>36</td>
					<td>22 000</td>
					<td>11 000</td>
					<td>18 500</td>
					<td>9 000</td>
					<td>3 900</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/afiny">Афины</a></td>
					<td>48</td>
					<td>45</td>
					<td>30</td>
					<td>20</td>
					<td>26</td>
					<td>12 000</td>
					<td>6 000</td>
					<td>10 500</td>
					<td>5 000</td>
					<td>2 700</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/rim">Рим</a></td>
					<td>40</td>
					<td>45</td>
					<td>30</td>
					<td>20</td>
					<td>26</td>
					<td>12 000</td>
					<td>6 000</td>
					<td>10 500</td>
					<td>5 000</td>
					<td>2 700</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/sochi-12">Сочи (трансформер) 1+2</a></td>
					<td>162</td>
					<td>180</td>
					<td>140</td>
					<td>0</td>
					<td>0</td>
					<td>33 000</td>
					<td>16 500</td>
					<td>28 000</td>
					<td>14 000</td>
					<td>5000</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/zal-restorana">Зал ресторана (трансформер)</a></td>
					<td>700</td>
					<td>700</td>
					<td>500</td>
					<td>0</td>
					<td>0</td>
					<td>90 000</td>
					<td>47 500</td>
					<td>90 000</td>
					<td>47 500</td>
					<td>12 500</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/peregovornaya-komnata">Переговорная комната</a></td>
					<td>18</td>
					<td>0</td>
					<td>0</td>
					<td>12</td>
					<td>0</td>
					<td>1 800 за час</td>
					<td>1 800 за час</td>
					<td>-</td>
					<td>-</td>
					<td>2 700</td>
				</tr>
				<tr>
					<td><a href="konferenc-zaly/conf-data/moskva-12345">Москва (трансформер) 1+2+3+4+5</a></td>
					<td>442</td>
					<td>450</td>
					<td>350</td>
					<td>0</td>
					<td>0</td>
					<td>80 000 </td>
					<td>40 000</td>
					<td>68 000</td>
					<td>34 000</td>
					<td>8 000</td>
				</tr>
			</tbody>
			</table>

		</div>
	</div>
	<div class="footer-placeholder"></div>
</div>
<div class="footer">
	<div class="inner"></div>
</div>

</body>

</html>

Т.к. этот файл тоже подключается к CSS-файлу ./css/style.css, то добавляем описание таблицы в файл ./css/style.css.

/* Сложная таблица */
.complex-table {
	min-width:100%;
	table-layout:fixed; /* Пользователь видит те части таблицы, которые успели отрендериться */
	border-collapse:collapse;
	margin:20px 0;
}
.complex-table a {
	color:#fff;
}
.complex-table thead {
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
}
.complex-table thead th {
	border-right:1px solid #fff;
	font-size:16px;
	padding:6px;
}
.complex-table thead>tr:first-child th {
	border-bottom:1px solid #fff;
}
.complex-table tbody td {
	font-size:16px;
	padding:6px;
}
.complex-table tbody tr {
	border-bottom:1px dotted #fff;
}
.complex-table tr {
	transition:color .3s, background-color .3s;
}

.complex-table tr:hover {
	background-color:rgba(255, 255, 255, .7);
}
.complex-table td,
.complex-table th {transition:color .3s;}
.complex-table td:hover,
.complex-table th:hover {color:#000;}

/* Подсветка столбцов */
.complex-table {overflow:hidden;}
.complex-table td,
.complex-table th {position:relative;}
.complex-table td:after,
.complex-table th:after {
	background-color:rgba(255, 255, 255, 0);
	transition:background-color .3s;
}

.complex-table td:hover:after,
.complex-table th:hover:after {
	background-color:rgba(255, 255, 255, .7);
	content: "";
	position:absolute;
	left:0;
	top:-5000px;
	height:10000px;
	width:100%;
	z-index:-1;
}

Как видно из примера, подсветка столбца осуществляется хаком. По сути мы подсвечиваем не столбец, а псевдоэлемент :after у ячейки, над которой расположен курсор (.complex-table td:hover:after). Чтобы этот псевдоэлемент вообще отобразился, ему нужно задать свойство content, пусть даже пустую строку (content:""). Псевдоэлементы :before и :after изначально предназначались для того, чтобы что-то дописывать перед или после содержимого тега, к которому применены. Мы же позиционируем этот псевдоэлемент абсолютно. Для этого мы для :after задаём position:absolute; и смещаем на 5000px вверх (число случайное, но достаточно большое, чтобы в большинстве таблиц его хватило). Высоту задаём 10000px, что тоже с запасом. А чтобы лишнее у этого псевдоэлемента не вылазило за таблицу, к самой таблице применяем overflow: hidden;.

Адаптация таблиц

Таблицы сложноадаптируемы. В практической вёрстке не обойтись без применения JS-плагинов. Но есть один «бюджетный» способ сделать таблицу читаемой на экранах с небольшим разрешением. Для этого надо обернуть таблицу в <div>, которому задать overflow: auto. Сейчас мы это и проделаем. Оберните сложную таблицу в <div> с классом table-outer и в CSS примените overflow: auto к этому классу.

На скриншоте ниже таблица показана при разрешении в 640px, при этом она прокручивается пальцем, но не рвёт вёрстку и не растягивает страницу до своих истинных размеров.

Результирующие листинги
<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Оформление таблиц</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">
	<div class="header">
		<div class="inner"></div>
	</div>
	<div class="content section">
		<div class="inner">

		<table class="table-1">
		<thead>
			<tr>
				<th>Зал</th>
				<th>Стоимость</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Сочи</td>
				<td>4 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 1</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 3</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 4</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 5</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Сочи 1</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Афины</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Рим</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва 2</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Сочи 2</td>
				<td>2 000 ₽/день</td>
			</tr>
			<tr>
				<td>Москва</td>
				<td>10 000 ₽/день</td>
			</tr>
		</tbody>
		</table>
		
		<div class="simple-tables">

			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td>2:2</td>
					<td>2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:2</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>
			
			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td rowspan="2">2:2 - 3:2</td>
					<td>2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>
			
			<table class="simple-table">
			<tbody>
				<tr>
					<td>1:1</td>
					<td>2:1</td>
					<td>3:1</td>
				</tr>
				<tr>
					<td>2:1</td>
					<td colspan="2">2:2 - 2:3</td>
				</tr>
				<tr>
					<td>3:1</td>
					<td>3:2</td>
					<td>3:3</td>
				</tr>
			</tbody>
			</table>

		</div>

		</div>
	</div>
	<div class="footer-placeholder"></div>
</div>
<div class="footer">
	<div class="inner">
	
	</div>
</div>

</body>

</html>

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Оформление сложной таблицы</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">
	<div class="header">
		<div class="inner"></div>
	</div>
	<div class="content section">
		<div class="inner">

			<div class="table-outer">
				<table class="complex-table">
				<thead>
					<tr>
						<th rowspan="2">Конференц-зал</th>
						<th rowspan="2">Площадь, м²</th>
						<th colspan="4">Площадь и типы рассадки</th>
						<th colspan="2">Будние</th>
						<th colspan="2">Выходные</th>
						<th rowspan="2">+1 час до 08:00 и после 20:00</th>
					</tr>
					<tr>
						<th>Театр</th>
						<th>Класс</th>
						<th>П­об­раз­ная</th>
						<th>Пе­ри­метр</th>
						<th>день с 8:00 до­20:00</th>
						<th>4 часа с­8:00 до­20:00</th>
						<th>день с­8:00 до­20:00</th>
						<th>4 часа с­8:00 до­20:00</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-1">Москва 1</a></td>
						<td>81</td>
						<td>90</td>
						<td>70</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-2">Москва 2</a></td>
						<td>98</td>
						<td>90</td>
						<td>70</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-3">Москва-3</a></td>
						<td>83</td>
						<td>90</td>
						<td>70</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-4">Москва 4</a></td>
						<td>97</td>
						<td>90</td>
						<td>70</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-5">Москва 5</a></td>
						<td>83</td>
						<td>90</td>
						<td>70</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/sochi-1">Сочи 1</a></td>
						<td>90</td>
						<td>80</td>
						<td>64</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/sochi-2">Сочи 2</a></td>
						<td>90</td>
						<td>80</td>
						<td>64</td>
						<td>30</td>
						<td>36</td>
						<td>22 000</td>
						<td>11 000</td>
						<td>18 500</td>
						<td>9 000</td>
						<td>3 900</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/afiny">Афины</a></td>
						<td>48</td>
						<td>45</td>
						<td>30</td>
						<td>20</td>
						<td>26</td>
						<td>12 000</td>
						<td>6 000</td>
						<td>10 500</td>
						<td>5 000</td>
						<td>2 700</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/rim">Рим</a></td>
						<td>40</td>
						<td>45</td>
						<td>30</td>
						<td>20</td>
						<td>26</td>
						<td>12 000</td>
						<td>6 000</td>
						<td>10 500</td>
						<td>5 000</td>
						<td>2 700</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/sochi-12">Сочи (трансформер) 1+2</a></td>
						<td>162</td>
						<td>180</td>
						<td>140</td>
						<td>0</td>
						<td>0</td>
						<td>33 000</td>
						<td>16 500</td>
						<td>28 000</td>
						<td>14 000</td>
						<td>5000</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/zal-restorana">Зал ресторана (трансформер)</a></td>
						<td>700</td>
						<td>700</td>
						<td>500</td>
						<td>0</td>
						<td>0</td>
						<td>90 000</td>
						<td>47 500</td>
						<td>90 000</td>
						<td>47 500</td>
						<td>12 500</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/peregovornaya-komnata">Переговорная комната</a></td>
						<td>18</td>
						<td>0</td>
						<td>0</td>
						<td>12</td>
						<td>0</td>
						<td>1 800 за час</td>
						<td>1 800 за час</td>
						<td>-</td>
						<td>-</td>
						<td>2 700</td>
					</tr>
					<tr>
						<td><a href="konferenc-zaly/conf-data/moskva-12345">Москва (трансформер) 1+2+3+4+5</a></td>
						<td>442</td>
						<td>450</td>
						<td>350</td>
						<td>0</td>
						<td>0</td>
						<td>80 000 </td>
						<td>40 000</td>
						<td>68 000</td>
						<td>34 000</td>
						<td>8 000</td>
					</tr>
				</tbody>
				</table>
			</div>

		</div>
	</div>
	<div class="footer-placeholder"></div>
</div>
<div class="footer">
	<div class="inner"></div>
</div>

</body>

</html>

* {box-sizing:border-box;}
html, body {min-width:320px;font-size:16px;margin:0;padding:0;height:100%;}
body {font-family:Roboto, Calibri, Arial, sans-serif;color:#fff;min-height:100%;}
h1, .h1 {display:block;font-size:36px;line-height:48px;font-weight:bold;margin-bottom:12px;}

.outer {min-height:100%;}

header,
.header,
footer,
.footer,
section,
.section {width:100%;margin:0 0 40px 0;position:relative;}

header,
.header,
footer,
.footer {height:80px;background:lightgrey;margin:0;}

footer:after,
.footer:after,
section:after,
.section:after {content:"";display:block;clear:both;}

header .inner,
.header .inner,
footer .inner,
.footer .inner,
section .inner,
.section .inner {max-width:1160px;padding:0 15px;margin:0 auto;position:relative;}

.footer-placeholder {height:80px;}
footer,
.footer {margin:-80px 0 0 0;}

body {
	background: #4c959b;
	background: -moz-linear-gradient(45deg, #4c959b 0%, #5c3584 100%);
	background: -webkit-linear-gradient(45deg, #4c959b 0%,#5c3584 100%);
	background: linear-gradient(45deg, #4c959b 0%,#5c3584 100%);
}

/* Стили первой таблицы */
.table-1 {
	width:100%;
	border-collapse:collapse;
	overflow:hidden;
	margin:40px 0;
}
.table-1 th,
.table-1 td {position:relative;padding:6px 12px;}

.table-1 tr>th:first-child,
.table-1 tr>td:first-child {
	width:30%;
}

.table-1 thead tr,
.table-1 tbody tr:nth-child(2n) {
	background-color:rgba(255, 255, 255, .3);
}

.table-1 thead tr,
.table-1 tbody tr {
	transition:color .3s, background-color .3s;
}

.table-1 tr>th:nth-child(2n),
.table-1 tr>td:nth-child(2n) {
	text-align:center;
}

.table-1 tr:hover,
.table-1 tbody tr:nth-child(2n):hover {
	background-color:rgba(255, 255, 255, .7);
	color:#000;
}

/* Адаптация таблиц */
.table-outer {
	overflow: auto;
}

/* Простая таблица */
.simple-tables {
	width:100%;
	overflow:hidden;
	padding:20px 0;
}
.simple-tables .simple-table {
	float:left;
	margin:0 40px 40px 0;
}
.simple-tables .simple-table:last-child {
	margin-right:0;
}
.simple-table {
	max-width:640px;
	border-collapse:collapse;
	overflow:hidden;
	margin:40px 0;
}
.simple-table td {
	padding:8px 12px;
	border:1px solid #fff;
	width:50px;
}

/* Сложная таблица */
.complex-table {
	min-width:100%;
	table-layout:fixed; /* Пользователь видит те части таблицы, которые успели отрендериться */
	border-collapse:collapse;
	margin:20px 0;
}
.complex-table a {
	color:#fff;
}
.complex-table thead {
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
}
.complex-table thead th {
	border-right:1px solid #fff;
	font-size:16px;
	padding:6px;
}
.complex-table thead>tr:first-child th {
	border-bottom:1px solid #fff;
}
.complex-table tbody td {
	font-size:16px;
	padding:6px;
}
.complex-table tbody tr {
	border-bottom:1px dotted #fff;
}
.complex-table tr {
	transition:color .3s, background-color .3s;
}

.complex-table tr:hover {
	background-color:rgba(255, 255, 255, .7);
}
.complex-table td,
.complex-table th {transition:color .3s;}
.complex-table td:hover,
.complex-table th:hover {color:#000;}

/* Подсветка столбцов */
.complex-table {overflow:hidden;}
.complex-table td,
.complex-table th {position:relative;}
.complex-table td:after,
.complex-table th:after {
	background-color:rgba(255, 255, 255, 0);
	transition:background-color .3s;
}

.complex-table td:hover:after,
.complex-table th:hover:after {
	background-color:rgba(255, 255, 255, .7);
	content: "";
	position:absolute;
	left:0;
	top:-5000px;
	height:10000px;
	width:100%;
	z-index:-1;
}