Need to create a features table

I need to create a responsive table with an image at the top of each column and text at the bottom. Attached is an example of the type of table I need to build. How would I build this type of table? Thanks.

 

Is the task still available & paid?

 

If it was a paid job it would be in the BST forum, this is the forum where people help for free.

 

Were it me, I'd mark that up as a simple list with the list items being inline-block. Set the ul's text--align to center. A table is inherently non-responsive, where this will easily devolve down to one column for narrow viewports.

gary

 

1) this isn't tabular data, so even using the term 'table' is wrong.

2) Sorry Gary, but nor is this a list since it quite obviously has headings, making their content far larger than "bullet points or short selections." That's GRAMMATICAL bullet points not "hurr durz its be hasies ah dot nex two itz"

3) Those images are meaningless presentation, so I'd be adding them from the CSS and not from the markup.

<div id="visitorsEnjoy">
	<h2>Over 5,000,000 Annual Visitors Enjoy</h2>
	<div class="shouldersOfGiants">
		<h3>Shoulders Of Giants</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis consequat fringilla. Aenean at sem dolor. Nunc ut hendrerit lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin id neque nunc. Nulla faucibus rutrum lacinia. Sed posuere bibendum sapien vitae fermentum. Quisque quis augue ultricies, blandit odio et, hendrerit erat. Sed sed porta ante.
		</p>
	</div>
	<div class="performance">
		<h3>Performance Testing</h3>
		<p>
			Aenean erat purus, faucibus et magna vitae, iaculis convallis leo. Nunc pulvinar vulputate sodales. Cras rutrum lobortis dui, nec sagittis neque vestibulum non. Suspendisse dapibus mollis vestibulum. Sed ut odio id neque dapibus aliquam. Sed aliquet, orci ut elementum dictum, turpis quam dapibus sapien, ac aliquam mi purus sed dui.
		</p>
	</div>
	<div class="court">
		<h3>Forex Traders Court</h3>
		<p>
			Nunc imperdiet lorem nec faucibus malesuada. Aliquam consectetur pretium pulvinar. Nam leo dui, auctor eu velit sit amet, faucibus bibendum ipsum. Nunc placerat a dolor eget auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Vestibulum in mauris cursus, elementum ipsum et, porta lectus. Nam ut ex nec quam rutrum gravida.
		</p>
	</div>
<!-- visitorsEnjoy --></div>

Code (markup):

The H2 indicating the start of major subsections of the page -- so we don't need "section", the H3 indicating the start of subsections of that H2 -- so we don't need section or article or any other HTML 5 mental huffing midgetry. DIV are semantically neutral appliying ZERO extra meaning to anything they contain. THAT is the proper semantics for a section like that.

These days a lot of people would try to flex-box that, but honestly we can make it work back to IE8 flawless without flex using floats, so let's do that instead.

#visitorsEnjoy {
	overflow:hidden; /* wrap floats and margins */
	text-align:center;
	max-width:70em;
	margin:1em auto 0;
	padding-left:1em;
}

#visitorsEnjoy h2 {
	padding-right:1em;
}

#visitorsEnjoy div {
	box-sizing:border-box;
	position:relative;
	float:left;
	width:33%;
	max-width:24em;
	padding:4em 1em 1em 0; /* top padding == image height */
	margin:0 auto;
}

#visitorsEnjoy div:before {
	display:block;
	content:"#";
	font:normal 4em/1em webfont,sans-serif;
}

@media (max-width:48em) {
	#visitorsEnjoy div {
		float:none;
		width:auto;
		overflow:hidden;  /* wrap floats and margins */
	}
	#visitorsEnjoy div:before {
		float:left;
		margin-right:1em;
	}
}

Code (markup):

I used # as the image on the assumption being monochrome you'd be using a webfont for that. If not I'd still use generated content to make them as a centered display:block so that the incorrectly named "CSS Sprites" method could be used. Either way the parent DIV's classes would be used to determine which image to show.

 

Another simple way could to add fontawesome in the markup and then style it to your liken in css.
fontawesome icon on top, followed by h3/h2 and then p.