Шаблоны са йтов для 1С-Битрикс, готовые решения, разработка сайтов
Профессиональное составление строительных смет
+7 (495) 646 02 52 8 (800) 100 67 79
ежедневно с 9:00 до 18:00

Таблицы

Table

# Имя Фамилия Никнейм
1 Марк Атман @atman
2 Андрей Торнтон @vector
3 Ларри Кинг @king

<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Никнейм</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Марк</td>
			<td>Атман</td>
			<td>@atman</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Андрей</td>
			<td>Торнтон</td>
			<td>@vector</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ларри</td>
			<td>Кинг</td>
			<td>@king</td>
		</tr>
	</tbody>
</table>

Striped

# Имя Фамилия Никнейм
1 Марк Атман @atman
2 Андрей Торнтон @vector
3 Ларри Кинг @king

<table class="table table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Никнейм</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Марк</td>
			<td>Атман</td>
			<td>@atman</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Андрей</td>
			<td>Торнтон</td>
			<td>@vector</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ларри</td>
			<td>Кинг</td>
			<td>@king</td>
		</tr>
	</tbody>
</table>

Bordered

# Имя Фамилия Никнейм
1 Марк Атман @atman
2 Андрей Торнтон @vector
3 Ларри Кинг @king

<table class="table table-bordered">
	<thead>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Никнейм</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Марк</td>
			<td>Атман</td>
			<td>@atman</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Андрей</td>
			<td>Торнтон</td>
			<td>@vector</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ларри</td>
			<td>Кинг</td>
			<td>@king</td>
		</tr>
	</tbody>
</table>

Table Hover

# Имя Фамилия Никнейм
1 Марк Атман @atman
2 Андрей Торнтон @vector
3 Ларри Кинг @king

<table class="table table-hover">
	<thead>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Никнейм</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Марк</td>
			<td>Атман</td>
			<td>@atman</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Андрей</td>
			<td>Торнтон</td>
			<td>@vector</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ларри</td>
			<td>Кинг</td>
			<td>@king</td>
		</tr>
	</tbody>
</table>

table-condensed

# Имя Фамилия Никнейм
1 Марк Атман @atman
2 Андрей Торнтон @vector
3 Ларри Кинг @king

<table class="table table-condensed">
	<thead>
		<tr>
			<th>#</th>
			<th>Имя</th>
			<th>Фамилия</th>
			<th>Никнейм</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Марк</td>
			<td>Атман</td>
			<td>@atman</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Андрей</td>
			<td>Торнтон</td>
			<td>@vector</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ларри</td>
			<td>Кинг</td>
			<td>@king</td>
		</tr>
	</tbody>
</table>


# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

<table class="table table-striped table-hover">
	<thead>
		<tr>
			<th>#</th>
			<th>Column heading</th>
			<th>Column heading</th>
			<th>Column heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr class="info">
			<td>3</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr class="success">
			<td>4</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr class="danger">
			<td>5</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr class="warning">
			<td>6</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
		<tr class="active">
			<td>7</td>
			<td>Column content</td>
			<td>Column content</td>
			<td>Column content</td>
		</tr>
	</tbody>
</table>

Хостинг

Стандартный

$20/месяц
  • 1 пользователь
  • 10 Гб места на диске
  • Email priority support
  • Free
  • 24/7 поддержка
Купить

Основной

$30/месяц
  • 10 users
  • 30 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить
  • Unlimited user
  • 100 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить

Ультра

$99/месяц
  • Unlimited user
  • 300 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить

<div class="table-price-1 has-linear-gradient">
	<div class="row">
		<h2 class="title text-center">Хостинг</h2>
		<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Стандартный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$20</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>1 пользователь</li>
							<li><i class="fa fa-check"></i>10 Гб места на диске</li>
							<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
							<li class="disabled"><i class="fa fa-times"></i>Free </li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Основной</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$30</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>10 users</li>
							<li><i class="fa fa-check"></i>30 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="clearfix visible-sm-block visible-xs-block"></div>
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading popular">
						<h3 class="title">Профессиональный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$50</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>Unlimited user</li>
							<li><i class="fa fa-check"></i>100 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li><i class="fa fa-check"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-primary btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Ультра</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$99</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>Unlimited user</li>
							<li><i class="fa fa-check"></i>300 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li><i class="fa fa-check"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
		</div><!--//items-wrapper-->
	</div>
</div><!--//row-->

Четыре спецпредложения

Хостинг

Стандартный

$20/месяц
  • 1 пользователь
  • 10 Гб места на диске
  • Email priority support
  • Free
  • 24/7 поддержка
Купить

Основной

$30/месяц
  • 10 users
  • 30 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить
  • Unlimited user
  • 100 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить

Ультра

$99/месяц
  • Unlimited user
  • 300 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить

<div class="table-price-1">
	<div class="row">
		<h2 class="title text-center">Хостинг</h2>
		<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Стандартный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$20</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>1 пользователь</li>
							<li><i class="fa fa-check"></i>10 Гб места на диске</li>
							<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
							<li class="disabled"><i class="fa fa-times"></i>Free </li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Основной</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$30</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>10 users</li>
							<li><i class="fa fa-check"></i>30 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="clearfix visible-sm-block visible-xs-block"></div>
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading popular">
						<h3 class="title">Профессиональный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$50</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>Unlimited user</li>
							<li><i class="fa fa-check"></i>100 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li><i class="fa fa-check"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-primary btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="table-item col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Ультра</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$99</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>Unlimited user</li>
							<li><i class="fa fa-check"></i>300 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li><i class="fa fa-check"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
		</div><!--//items-wrapper-->
	</div>
</div><!--//row-->

Три спецпредложения

Хостинг

Стандартный

$20/месяц
  • 1 пользователь
  • 10 Гб места на диске
  • Email priority support
  • Free
  • 24/7 поддержка
Купить

Основной

$30/месяц
  • 10 users
  • 30 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить
  • Unlimited user
  • 100 Гб места на диске
  • Email priority support
  • Free update
  • 24/7 поддержка
Купить

<div class="table-price-1">
	<div class="row">
		<h2 class="title text-center">Хостинг</h2>
		<div class="items-wrapper col-lg-20 col-md-24 col-sm-24 col-xs-24 col-lg-offset-2 col-md-offset-3 col-sm-offset-0 col-xs-offset-0">
			<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Стандартный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$20</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>1 пользователь</li>
							<li><i class="fa fa-check"></i>10 Гб места на диске</li>
							<li class="disabled"><i class="fa fa-times"></i>Email priority support</li>
							<li class="disabled"><i class="fa fa-times"></i>Free </li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 text-center best-buy">
				<div class="table-item-inner">
					<div class="heading">
						<h3 class="title">Основной</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$30</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>10 users</li>
							<li><i class="fa fa-check"></i>30 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li class="disabled"><i class="fa fa-times"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-default btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
			<div class="clearfix visible-sm-block visible-xs-block"></div>
			<div class="table-item col-lg-8 col-md-6 col-sm-12 col-xs-12 col-xxs-24 col-xs-offset-6 col-sm-offset-6 col-md-offset-0 text-center">
				<div class="table-item-inner">
					<div class="heading popular">
						<h3 class="title">Профессиональный</h3>
						<div class="price-figure">
							<span class="price-figure-inner">
								<span class="price">$50</span><span class="period">/месяц</span>
							</span>
						</div>
					</div>
					<div class="content">
						<ul class="list-unstyled">
							<li><i class="fa fa-check"></i>Unlimited user</li>
							<li><i class="fa fa-check"></i>100 Гб места на диске</li>
							<li><i class="fa fa-check"></i>Email priority support</li>
							<li><i class="fa fa-check"></i>Free update</li>
							<li><i class="fa fa-check"></i>24/7 поддержка</li>
						</ul>
						<a href="#" class="btn btn-primary btn-block">Купить</a>
					</div><!--//content-->
				</div><!--//item-inner-->
			</div><!--//item-->
		</div><!--//items-wrapper-->
	</div>
</div><!--//row-->