CHAPTER 16 ■ TABLE COLUMN LAYOUT
Percentage-Proportioned Columns
HTML
<h1>Percentage-Proportioned Columns</h1>
<h2>Sized or Stretched Table</h2>
<table class="auto-layout sized">
<tr> <td class="p3">50%</td> <td class="p3">50%</td></tr></table>
<table class="auto-layout sized">
<tr> <td class="p1">20%</td> <td class="p1">20%</td></tr></table>
<table class="auto-layout sized">
<tr> <td class="p2">80%</td> <td class="p2">80%</td></tr></table>
<table class="auto-layout sized">
<tr> <td class="p2">80%</td> <td class="p1">20%</td></tr></table>
<table class="auto-layout sized">
<tr> <td class="p2">80%</td> <td class="p1">20%</td>
<td class="p3">50%</td></tr></table>
CSS
.auto-layout { table-layout:auto; }
.fixed-layout { table-layout:fixed; }
.sized { width:700px; }
.stretched { width:100%; }
.p1 { width:20%; } .p2 { width:80%; } .p3 { width:50%; }
/* Nonessential styles are not shown */