Column Group - Table Usability - Web Experience Toolkit (WET)
In the previous article I have talked about key cell and description cell and how to get an initial advantage of using the colgroup. Now let take the table 4 and see how we can improve the table desing.
Province | Filed | Registered |
---|---|---|
Copyright | ||
Alberta | 697 | 670 |
British Columbia | 1175 | 1137 |
Manitoba | 140 | 139 |
New Brunswick | 96 | 92 |
Newfoundland and Labrador | 66 | 60 |
Northwest Territories | 7 | 5 |
Nova Scotia | 111 | 110 |
Ontario | 3235 | 3136 |
Prince Edward Island | 7 | 7 |
Quebec | 2196 | 2161 |
Saskatchewan | 141 | 139 |
Yukon Territory | 6 | 6 |
Sub-Total | 7877 | 7662 |
Trade-mark | ||
Alberta | 1 868 | 1 386 |
British Columbia | 3 051 | 1 963 |
Manitoba | 435 | 317 |
New Brunswick | 236 | 164 |
Newfoundland and Labrador | 58 | 53 |
Northwest Territories | 12 | 10 |
Nova Scotia | 246 | 128 |
Nunavut | 0 | 1 |
Ontario | 10 039 | 6 833 |
Prince Edward Island | 31 | 17 |
Quebec | 4 714 | 3 466 |
Saskatchewan | 254 | 217 |
Yukon Territory | 5 | 10 |
Sub-Total | 20 949 | 14 565 |
Total | 28 826 | 22 227 |
Table 4 HTML Source Code
<table class="wet-boew-zebra">
<caption>Table 4 - Applications filed and registered by province/territory</caption>
<thead>
<tr>
<th>Province</th>
<th> Filed</th>
<th> Registered</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">Copyright</th>
</tr>
<tr>
<th>Alberta</th>
<td>697 </td>
<td>670 </td>
</tr>
<tr>
<th>British Columbia</th>
<td>1175 </td>
<td>1137 </td>
</tr>
<tr>
<th>Manitoba</th>
<td>140 </td>
<td>139 </td>
</tr>
<tr>
<th>New Brunswick</th>
<td>96 </td>
<td>92 </td>
</tr>
<tr>
<th>Newfoundland and Labrador</th>
<td>66 </td>
<td>60 </td>
</tr>
<tr>
<th>Northwest Territories</th>
<td>7 </td>
<td>5 </td>
</tr>
<tr>
<th>Nova Scotia</th>
<td>111 </td>
<td>110 </td>
</tr>
<tr>
<th>Ontario</th>
<td>3235 </td>
<td>3136 </td>
</tr>
<tr>
<th>Prince Edward Island</th>
<td>7 </td>
<td>7 </td>
</tr>
<tr>
<th>Quebec</th>
<td>2196 </td>
<td>2161 </td>
</tr>
<tr>
<th>Saskatchewan</th>
<td>141 </td>
<td>139 </td>
</tr>
<tr>
<th>Yukon Territory</th>
<td>6 </td>
<td>6 </td>
</tr>
</tbody>
<tbody>
<tr>
<th>Sub-Total</th>
<td>7877</td>
<td>7662</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">Trade-mark</th>
</tr>
<tr>
<th>Alberta</th>
<td>1 868</td>
<td>1 386</td>
</tr>
<tr>
<th>British Columbia</th>
<td>3 051</td>
<td>1 963</td>
</tr>
<tr>
<th>Manitoba</th>
<td>435</td>
<td>317</td>
</tr>
<tr>
<th>New Brunswick</th>
<td>236</td>
<td>164</td>
</tr>
<tr>
<th>Newfoundland and Labrador</th>
<td>58</td>
<td>53</td>
</tr>
<tr>
<th>Northwest Territories</th>
<td>12</td>
<td>10</td>
</tr>
<tr>
<th>Nova Scotia</th>
<td>246</td>
<td>128</td>
</tr>
<tr>
<th>Nunavut</th>
<td>0</td>
<td>1</td>
</tr>
<tr>
<th>Ontario</th>
<td>10 039</td>
<td>6 833</td>
</tr>
<tr>
<th>Prince Edward Island</th>
<td>31</td>
<td>17</td>
</tr>
<tr>
<th>Quebec</th>
<td>4 714</td>
<td>3 466</td>
</tr>
<tr>
<th>Saskatchewan</th>
<td>254</td>
<td>217</td>
</tr>
<tr>
<th>Yukon Territory</th>
<td>5</td>
<td>10</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Sub-Total</th>
<td>20 949</td>
<td>14 565</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Total</th>
<td>28 826</td>
<td>22 227</td>
</tr>
</tbody>
</table>
Now let change that table by have a column summary instead of row summary.
Province | Copyright | Trade-mark | ||
---|---|---|---|---|
Filed | Registered | Filed | Registered | |
Alberta | 697 | 670 | 1 868 | 1 386 |
British Columbia | 1175 | 1137 | 3 051 | 1 963 |
Manitoba | 140 | 139 | 435 | 317 |
New Brunswick | 96 | 92 | 236 | 164 |
Newfoundland and Labrador | 66 | 60 | 58 | 53 |
Northwest Territories | 7 | 5 | 12 | 10 |
Nova Scotia | 111 | 110 | 246 | 128 |
Nunavut | 0 | 0 | 0 | 1 |
Ontario | 3235 | 3136 | 10 039 | 6 833 |
Prince Edward Island | 7 | 7 | 31 | 17 |
Quebec | 2196 | 2161 | 4 714 | 3 466 |
Saskatchewan | 141 | 139 | 254 | 217 |
Yukon Territory | 6 | 6 | 5 | 10 |
Sub-Total | 7877 | 7662 | 20 949 | 14 565 |
Let's see the same table but with a total column
Province | Copyright | Trade-mark | Total | ||
---|---|---|---|---|---|
Filed | Registered | Filed | Registered | ||
Alberta | 697 | 670 | 1 868 | 1 386 | 4 621 |
British Columbia | 1175 | 1137 | 3 051 | 1 963 | 7 326 |
Manitoba | 140 | 139 | 435 | 317 | 1 031 |
New Brunswick | 96 | 92 | 236 | 164 | 588 |
Newfoundland and Labrador | 66 | 60 | 58 | 53 | 237 |
Northwest Territories | 7 | 5 | 12 | 10 | 34 |
Nova Scotia | 111 | 110 | 246 | 128 | 595 |
Nunavut | 0 | 0 | 0 | 1 | 1 |
Ontario | 3235 | 3136 | 10 039 | 6 833 | 23 243 |
Prince Edward Island | 7 | 7 | 31 | 17 | 62 |
Quebec | 2196 | 2161 | 4 714 | 3 466 | 12 537 |
Saskatchewan | 141 | 139 | 254 | 217 | 751 |
Yukon Territory | 6 | 6 | 5 | 10 | 27 |
Sub-Total | 7877 | 7662 | 20 949 | 14 565 |
Let see with column sub-total
Province | Copyright | Trade-mark | ||||
---|---|---|---|---|---|---|
Filed | Registered | Sub-Total | Filed | Registered | Sub-Total | |
Alberta | 697 | 670 | 1 367 | 1 868 | 1 386 | 3 254 |
British Columbia | 1175 | 1137 | 2312 | 3 051 | 1 963 | 7 326 |
Manitoba | 140 | 139 | 279 | 435 | 317 | 752 |
New Brunswick | 96 | 92 | 188 | 236 | 164 | 400 |
Newfoundland and Labrador | 66 | 60 | 126 | 58 | 53 | 111 |
Northwest Territories | 7 | 5 | 12 | 12 | 10 | 22 |
Nova Scotia | 111 | 110 | 221 | 246 | 128 | 374 |
Nunavut | 0 | 0 | 0 | 0 | 1 | 1 |
Ontario | 3235 | 3136 | 6371 | 10 039 | 6 833 | 16872 |
Prince Edward Island | 7 | 7 | 14 | 31 | 17 | 48 |
Quebec | 2196 | 2161 | 4357 | 4 714 | 3 466 | 8180 |
Saskatchewan | 141 | 139 | 280 | 254 | 217 | 471 |
Yukon Territory | 6 | 6 | 12 | 5 | 10 | 15 |
Sub-Total | 7877 | 7662 | 20 949 | 14 565 |
In the previous example, the "Copyright" and "Trade-mark" Header are now acting as header group cell because under them they have a combinaison of data and summary. If you mouse hover the cell, you will be able to see different header cell highlight vs the previous example.
May be having column of summaries can not be useful, even with styling. But let give a possibility. If from a mobile phone with a small display or just somebody that have a small resolution, with that strategy it would be possible to shrink the tabular information to save space. Only a mechanism to show the information in more details would be required.
In the previous example, the intersection between the summaries column and row is a layout cell. This state are only given when the td elemen is empty.
Province | Copyright | Trade-mark | Total | ||||
---|---|---|---|---|---|---|---|
Filed | Registered | Sub-Total | Filed | Registered | Sub-Total | ||
Alberta | 697 | 670 | 1 367 | 1 868 | 1 386 | 3 254 | 4 621 |
British Columbia | 1175 | 1137 | 2312 | 3 051 | 1 963 | 7 326 | 7 326 |
Manitoba | 140 | 139 | 279 | 435 | 317 | 752 | 1 031 |
New Brunswick | 96 | 92 | 188 | 236 | 164 | 400 | 588 |
Newfoundland and Labrador | 66 | 60 | 126 | 58 | 53 | 111 | 237 |
Northwest Territories | 7 | 5 | 12 | 12 | 10 | 22 | 34 |
Nova Scotia | 111 | 110 | 221 | 246 | 128 | 374 | 595 |
Nunavut | 0 | 0 | 0 | 0 | 1 | 1 | 1 |
Ontario | 3235 | 3136 | 6371 | 10 039 | 6 833 | 16872 | 23 243 |
Prince Edward Island | 7 | 7 | 14 | 31 | 17 | 48 | 62 |
Quebec | 2196 | 2161 | 4357 | 4 714 | 3 466 | 8180 | 12 537 |
Saskatchewan | 141 | 139 | 280 | 254 | 217 | 471 | 751 |
Yukon Territory | 6 | 6 | 12 | 5 | 10 | 15 | 27 |
Sub-Total | 7877 | 7662 | 20 949 | 14 565 |
The table secret is still to keep you table simple, but sometime I see it too mutch simplified for the real needs. I hope that technique will be use.
What kind of impact of using the colgroup can have ?
What kind of impact of using the colgroup can have ?
- Date modified: