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.

Table 4 - Applications filed and registered by province/territory
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.

Table 4 - Applications filed and registered by province/territory
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

Table 4 - Applications filed and registered by province/territory
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

Table 4 - Applications filed and registered by province/territory
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.

Table 4 - Applications filed and registered by province/territory
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 ?