CODEWITHSUNDEEP
csshtmltablerowtablecell
Fluxcapacitor
Fluxcapacitor

Reputation: 393

formatting tables with CSS?

I want to create a table using CSS only (no tags). My goal is to create a two-row table, the first row having two cells, the second row having one cell. The cell content stacks vertically. Thx for your help.

article {
  display: table;
  width: 440px;
  margin-left: 20px;
}

section {
  display: table-row;
}

article.section img {
  display: table-cell;
  width: 130px;	
}

article.section p {
  display: table-cell;
  width: 130px;
}
 <article>   <!-- table -->
   <section> <!-- table row 1 -->
	 <img src="images/People/napoleon.jpg" /> <!-- row 1, cell 1 -->
	 <img src="images/Symbols/fleurBlue.jpg" /> <!-- row 1, cell 2 -->		 
   </section>
   
   <section> <!-- row 2 -->
     <p> This is Napoleon Bonaparte as 
	   Emperor of France wearing his military 
		uniform. 
	 </p> 
   </section>
</article>

Refer this jsfiddle

Upvotes: 1

Views: 86

Answers (3)

ekad
ekad

Reputation: 14614

Have a look at the following css 

article.section img {
  display: table-cell;
  width: 130px; 
}

article.section p {
  display: table-cell;
  width: 130px;
}

article.section is a Class selector, so it would apply to all <article> tags with class="section" attribute like below

<article class="section">   <!-- table -->
   <section> <!-- table row 1 -->
     <img src="images/People/napoleon.jpg" /> <!-- row 1, cell 1 -->
     <img src="images/Symbols/fleurBlue.jpg" /> <!-- row 1, cell 2 -->       
   </section>

   <section> <!-- row 2 -->
     <p> This is Napoleon Bonaparte as 
       Emperor of France wearing his military 
        uniform. 
     </p> 
   </section>
</article>

but you actually want to select all <section> tags that are contained by <article> tags, so what you need is Descendant selectors. Change article.section to article section (replace the dot with a space) as below

article section img {
  display: table-cell;
  width: 130px; 
}

article section p {
  display: table-cell;
  width: 130px;
}

Upvotes: 0

BomberMan
BomberMan

Reputation: 1094

With response to your Jsfiddle i have made changes on JsFiddle

You have putted unnecessary . in selectors. That's It.

Upvotes: 1

Leo
Leo

Reputation: 13838

Selectors are incorrect.

article.section img and article.section p should be article section img and article section p.

Upvotes: 1

Related Questions