Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Table Layout

HTML

<h1>Table Layout</h1>

<h2>Shrinkwrapped Table</h2>

<table class="auto-layout shrinkwrapped">

<tr><td>auto</td><td>auto</td></tr></table>

<h2>Sized Table</h2>

<table class="auto-layout sized"> <tr><td>auto</td><td>auto</td></tr></table>

<h2>Stretched Table</h2>

<table class="auto-layout stretched"> <tr><td>auto</td><td>auto</td></tr></table>

<h2>Fixed Table</h2>

<table class="fixed-layout sized"> <tr><td>auto</td><td>auto</td></tr></table>

CSS

.auto-layout { table-layout:auto; }

.fixed-layout { table-layout:fixed; }

.shrinkwrapped { width:auto; }

.sized { width:350px; }

.stretched { width:100%; }

/* Nonessential styles are not shown */