formatting tables with CSS?

83 views Asked by At

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

3

There are 3 answers

1
Leo On

Selectors are incorrect.

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

0
BomberMan On

With response to your Jsfiddle i have made changes on JsFiddle

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

2
ekad On

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;
}