CHAPTER 16 ■ TABLE COLUMN LAYOUT
Equal-Sized Columns
HTML
<h2>Sized, Stretched, or Fixed Table</h2>
<table class="auto-layout sized">
<tr> <td class="p2">2=50%</td> <td class="p2">50%</td></tr></table>
<!-- Additional tables are not shown -->
CSS
.auto-layout { table-layout:auto; } .fixed-layout { table-layout:fixed; }
.sized { width:700px; } .stretched { width:100%; }
.p2 { width:50%; } /* 2 columns */
.p3 { width:33.5%; } /* 3 columns */
.p4 { width:25%; } /* 4 columns */
.p5 { width:20%; } /* 5 columns */
.p6 { width:16.5%; } /* 6 columns */
.p7 { width:14.1%; } /* 7 columns */
.p8 { width:12.3%; } /* 8 columns */
.p9 { width:11%; } /* 9 columns */
.p10 { width:10%; } /* 10 columns */
/* Nonessential styles are not shown */