CHAPTER 15 ■ TABLES
Removed and Hidden Rows and Columns
HTML
<h1>Removed & Hidden Rows & Columns</h1>
<table id="t1">
<tbody class="b1">
<tr class="r1"> <td class="c1">r1 c1</td> <td class="c2">2</td>
<td class="c3">r1 c3</td> <td class="c4">4</td> </tr>
<tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">2</td>
<td class="c3">r2 c3</td> <td class="c4">4</td> </tr></tbody>
<tbody class="b2">
<tr class="r3"> <td class="c1">r3 c1</td> <td class="c2">2</td>
<td class="c3">r3 c3</td> <td class="c4">4</td> </tr>
<tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">2</td>
<td class="c3">r4 c3</td> <td class="c4">4</td> </tr></tbody>
<tbody class="b3">
<tr class="r5"> <td class="c1">r5 c1</td> <td class="c2">2</td>
<td class="c3">r5 c3</td> <td class="c4">4</td> </tr></tbody>
</table>
<!-- Second identical table with separated borders is not shown -->
CSS
#t1 .c2 { display:none; } /* Removing column */
#t1 .c3 { visibility:hidden; } /* Hiding column */
#t1 .r2 { visibility:hidden; } /* Hiding row */
#t1 .b2 { display:none; } /* Removing row group */
/* Nonessential styles are not shown */