Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 15 ■ TABLES


Row and Column Groups


HTML


<h1>Row and Column Groups</h1>

<h2>Row Groups</h2>
<table class="example1">
<thead> <tr> <th>thead</th> <th>2 </th> <th>3 </th> <th>4 </th> </tr> </thead>
<tfoot> <tr> <th>tfoot</th> <td>10</td> <td>11</td> <td>12</td> </tr> </tfoot>
<tbody> <tr> <th>tbody</th> <td>6 </td> <td>7 </td> <td>8 </td> </tr> </tbody>
</table>

<h2>Columns</h2>
<table class="example2">
<colgroup><col class="col1" /><col class="col2" /><col class="col3" />
<col class="col4" /><col class="col5" /><col class="col6" /></colgroup>

<tr> <td rowspan="2">1</td> <td colspan="5">2-6</td> </tr>
<tr> <td>8</td> <td>9</td> <td> </td> <td> </td> <td>12</td> </tr>
</table>

CSS


table.example1 thead { background:orange; color:black; }
table.example1 tbody { background:gold; color:black; }
table.example1 tfoot { background:firebrick; color:white; }
.col1 { background:wheat; }
.col2 { background:gold; }
.col3 { background:orange; }
.col4 { background:tomato; }
.col5 { background:firebrick; }
.col6 { background:black; color:white; }

/* Nonessential styles are not shown */
Free download pdf