Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Hidden and Removed Cells

HTML

<h1>Hidden and Removed Cells</h1>

<h3>Cell 1 is hidden and Cell 3 is removed. <br /> This moves cell 4

into cell 3's place and creates a missing cell at the end.</h3>

<br /><div>Collapsed Borders</div>

<table class="collapsed" cellspacing="0">

<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr></table>

<br /><div>Separated Borders</div>

<table class="separated" cellspacing="5">

<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr></table>

<!-- Many additional examples are not shown -->

CSS

table, td, th { border:1px solid black; }

.separated { border-collapse:separate; }

.collapsed { border-collapse:collapse; }

.x { display:none; }

.h { visibility:hidden; }

/* Nonessential styles are not shown */