GailWynand
@GailWynand
Интересуюсь ИТ, биржевой торговлей, стартапами

Как сверстать такой шаблон таблицы?

Нужно сверстать шаблон, похожий на картинку. Не совсем понятно как здесь работать со столбцами (вот эти четыре основные, как их развести). Или лучше четыре отдельные таблицы? Может кто сталкивался?

z5a_Z6wgZWg.jpg
  • Вопрос задан
  • 346 просмотров
Пригласить эксперта
Ответы на вопрос 6
Четыре блока div. Содержимое можешь также в div'ах или уже в таблице.
Ответ написан
Комментировать
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал.
Говнокод на jsfiddle, но работает

<center><h3>Pricing table</h3></center>
<center><p>

Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident...</p> </center>
<table>
<tr>
  <td class="table-head">Basic</td>
  <td class="table-head">Standart</td>
  <td class="table-head">Premium</td>
  <td class="table-head">Professional</td>
 </tr>
 <tr>
 <td class="bg-blue">
   <div id="circle" class="circle"><div class="price">$19</div>/mo</div>
 </td>
 <td class="bg-green">
   <div id="circle" class="circle"><div class="price">$49</div>/mo</div>
 </td>
  <td class="bg-red">
    <div id="circle" class="circle"><div class="price">$69</div>/mo</div>
  </td>
  <td class="bg-orange">
    <div id="circle" class="circle"><div class="price">$99</div>/mo</div>
  </td>
</tr>

<tr class="bg-white">
  <td>1 website<hr/>1GB storage<hr/>bla-bla</td>
  <td>3 website<hr/>5GB storage<hr/>bla-bla</td>
  <td>10 website<hr/>20 GB storage<hr/>bla-bla</td>
  <td>Unlim website<hr/>100GB storage<hr/>bla-bla</td>
</tr>

 <tr>
  <td class="bg-blue">Buy now</td>
  <td class="bg-green">Buy now</td>
  <td class="bg-red">Buy now</td>
  <td class="bg-orange">Buy now</td>
</tr>


</table>

body{
  background-color:#34495E;
  color:#9DAFC0;
  Font-family:arial;
}
table{
  width:800px;
  border-spacing:11px 0;
  float:center;
}
td{
  text-align:center;
}
h3{font-weight:normal;}
.table-head{
 background-color:#283B4C;
  color:#9DAFC0;
  padding:10px;
  width:800px;
  text-align:center;
}
.bg-blue{background-color:#4797CC;color:#fff;}
.bg-green{background-color:#2E9F9D;color:#fff;}
.bg-red{background-color:#9C5D7A;color:#fff;}
.bg-orange{background-color:#F4B251;color:#fff;}
.bg-white{background-color:#fff;color:#999;}

#circle {
	width: 80px;
	height: 80px;
	font-size:14px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  border:3px solid #fff;
  text-align:center;
}
.circle{margin:0 55px;}
.price{font-size:24px;padding-top:15px;}
Ответ написан
Комментировать
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Если нужно таблицами, это конечно печально и грустно в такое время верстать на них ну все же если нужно, то дам наводку, по поводу разведения, у тебя должно быть 7 td 1 колонка - 1 блок, 2 колонка пустое пространство и т д, в 90 так и верстали.
Ответ написан
Комментировать
allishappy
@allishappy
<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title></title>
</head>
<style type="text/css">
 	* {
 		box-sizing: border-box;
 		padding: 0;
 		margin: 0;
 	}

	.container {
		width: 90%;
		margin: 0 auto;
	}

	.container .cols {
		float: left;
		margin: 0 0 1em 0;
		padding: 0 1em;
		text-align: center;
	}

	.container .cols.col-1 {width: 8.3333%;}
	.container .cols.col-2 {width: 16.6666%;}
	.container .cols.col-3 {width: 25%;}
	.container .cols.col-4 {width: 33.3333%;}
	.container .cols.col-5 {width: 41.6666%;}
	.container .cols.col-6 {width: 50%;}
	.container .cols.col-7 {width: 58.33333%;}
	.container .cols.col-8 {width: 66.66667%;}
	.container .cols.col-9 {width: 75%;}
	.container .cols.col-10 {width: 83.33333%;}
	.container .cols.col-11 {width: 91.6666666%;}
	.container .cols.col-12 {width: 100%;}

	.container:before,
	.container:after,
	.row:after,
	.row:before,
	.clear:before,
	.clear:after {
		content: " ";
		display: table;
	}

	.container:after,
	.row:after,
	.clear:after {
		clear: both;
	}

	#first {
		background-color: rgb(241, 36, 91);
		height: 250px;
	}

</style>
<body>
	<div class='container'>
		<div class='row'>
	 		<div class='cols col-3'>
				<div id='first'></div>
			</div>
	 		<div class='cols col-3'>
				<div id='first'></div>
			</div>
	 		<div class='cols col-3'>
				<div id='first'></div>
			</div>
			<div class='cols col-3'>
				<div id='first'></div>
			</div>
	 	</div>



	</div>
</body>
</html>
Ответ написан
Комментировать
@Haoss
html-верстальщик
Комментировать
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Скорее всего там адаптивная верстка, и при изменении размера экрана блоки выстроятся по вертикали.

Верстать только исключительно дивами...

Я бы рекомендовал найти туториалы поадаптивной верстке хоть на том же ютубе. Делов на пару часов...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы