1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need to create a features table

Discussion in 'HTML & Website Design' started by jaxsterjoe, Jan 9, 2018.

  1. #1
    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.
    SEMrush
     

    Attached Files:

    jaxsterjoe, Jan 9, 2018 IP
    SEMrush
  2. hostechsupport

    hostechsupport Active Member

    Messages:
    219
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    88
    #2
    Is the task still available & paid?
     
    hostechsupport, Jan 31, 2018 IP
  3. malky66

    malky66 Illustrious Member

    Messages:
    3,285
    Likes Received:
    2,000
    Best Answers:
    73
    Trophy Points:
    465
    #3
    If it was a paid job it would be in the BST forum, this is the forum where people help for free.
     
    malky66, Jan 31, 2018 IP
    kk5st likes this.
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,410
    Likes Received:
    349
    Best Answers:
    26
    Trophy Points:
    335
    #4
    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
     
    kk5st, Feb 1, 2018 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,607
    Likes Received:
    1,543
    Best Answers:
    223
    Trophy Points:
    515
    #5
    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.
     
    deathshadow, Feb 2, 2018 IP
  6. madahason2

    madahason2 Greenhorn

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #6
    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.
     
    madahason2, Feb 18, 2018 IP