Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Collapsed Borders

HTML

<h1>Collapsed Borders</h1>

<h2>Boxed Table</h2>

<table class="boxed-table" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="5">2-6</td> </tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr></table>

<h2>Boxed Cells</h2>

<table class="boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="5">2-6</td> </tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr></table>

<h2>Boxed Table and Cells</h2>

<table class="boxed-table boxed-cells" cellspacing="0">

<tr><td rowspan="2">1</td><td colspan="5">2-6</td> </tr>

<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr></table>

CSS

table { border-collapse:collapse; }

.boxed-table { border:1px solid black; }

.boxed-cells td { border:1px solid black; }

.boxed-cells td.x { border:none; }

/* Nonessential styles are not shown */