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>
Selectors are incorrect.
article.section img
andarticle.section p
should bearticle section img
andarticle section p
.