Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Tabled, Rowed, and Celled

HTML

<h1>Tabled, Rowed, and Celled</h1>

<h2>Before</h2>

<div>

<div>

<div>division</div>

<div>division</div></div>

<span>

<span>span</span>

<span>span</span></span></div>

<h2>After being rendered as a table with rows and cells</h2>

<div class="tabled">

<div class="rowed">

<div class="celled">division</div>

<div class="celled">division</div></div>

<span class="rowed">

<span class="celled">span</span>

<span class="celled">span</span></span></div>

CSS

div,span { border:1px solid black; background-color:gold; padding:5px; }

.tabled { display:table; border-collapse:collapse; }

.rowed { display:table-row; }

.celled { display:table-cell; }