Case Studies #1

This case study is about to transform a complex table in a more usable table

Note: Table in "hassum" mode

This case study use table with the option "hassum".

The result

Canada – Permanent residents by gender and category, 1986 to 2010
Category 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997
Males
Family class 18,246 22,973 21,153 26,670 33,665 38,781 43,394 47,267 40,026 32,255 28,121 24,080
Economic immigrants 18,605 39,907 40,666 45,733 49,932 43,138 47,813 51,007 50,611 53,721 64,497 66,825
Refugees  11,416 12,749 15,820 21,742 24,027 33,298 32,091 17,555 11,285 15,437 15,447 13,486
Other immigrants 854 1,277 1,487 1,671 1,733 2,014 2,719 3,850 3,657 477 2,318 1,900
Category not stated 0 0 0 1 0 0 0 0 0 0 1 0
Sub Total 49,121 76,906 79,126 95,817 109,357 117,231 126,017 119,679 105,579 101,890 110,384 106,291
Females
Family class 24,135 30,825 30,236 34,273 41,002 49,168 57,715 65,374 54,162 45,123 40,196 35,847
Economic immigrants 17,192 34,170 39,535 44,397 47,992 43,355 47,975 54,638 51,694 52,903 60,871 61,524
Refugees  7,771 8,707 10,940 15,110 16,189 20,776 20,247 13,038 9,148 12,656 13,027 10,821
Other immigrants 981 1,389 1,683 1,896 1,868 2,234 2,825 3,901 3,796 284 1,547 1,500
Category not stated 0 0 0 1 0 0 0 0 0 0 0 0
Sub Total 50,079 75,091 82,394 95,677 107,051 115,533 128,762 136,951 118,800 110,966 115,641 109,692
Sub Total
Family class 42,381 53,798 51,389 60,943 74,667 87,949 101,109 112,641 94,188 77,378 68,317 59,927
Economic immigrants 35,797 74,077 80,201 90,130 97,924 86,493 95,788 105,645 102,305 106,624 125,368 128,349
Refugees  19,187 21,456 26,760 36,852 40,216 54,074 52,338 30,593 20,433 28,093 28,474 24,307
Other immigrants 1,835 2,666 3,170 3,567 3,601 4,248 5,544 7,751 7,453 761 3,865 3,400
Category not stated 0 0 0 2 0 0 0 0 0 0 1 0
Gender not stated 154 81 64 53 44 44 13 11 8 9 46 52
Total 99,354 152,078 161,584 191,547 216,452 232,808 254,792 256,641 224,387 212,865 226,071 216,035
Source Code 



<table class="hassum">
<caption>Canada &#8211; Permanent residents by gender and category, 1986 to 2010</caption>
<colgroup>
	<col />
</colgroup>
<colgroup>
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
	<col />
</colgroup>
<thead>
<tr>
  <th>Category</th>
  <th>1986</th>
  <th>1987</th>
  <th>1988</th>
  <th>1989</th>
  <th>1990</th>
  <th>1991</th>
  <th>1992</th>
  <th>1993</th>
  <th>1994</th>
  <th>1995</th>
  <th>1996</th>
  <th>1997</th>
</tr>
</thead>

<tbody>
   <tr>
		<th colspan="13">Males</th>
   </tr>
<tr>
  <th>Family    class</th>
  <td>18,246</td>
  <td>22,973</td>
  <td>21,153</td>
  <td>26,670</td>
  <td>33,665</td>
  <td>38,781</td>
  <td>43,394</td>
  <td>47,267</td>
  <td>40,026</td>
  <td>32,255</td>
  <td>28,121</td>
  <td>24,080</td>
</tr>
<tr>
  <th>Economic immigrants</th>
  <td>18,605</td>
  <td>39,907</td>
  <td>40,666</td>
  <td>45,733</td>
  <td>49,932</td>
  <td>43,138</td>
  <td>47,813</td>
  <td>51,007</td>
  <td>50,611</td>
  <td>53,721</td>
  <td>64,497</td>
  <td>66,825</td>
</tr>
<tr>
  <th>Refugees&nbsp;</th>
  <td>11,416</td>
  <td>12,749</td>
  <td>15,820</td>
  <td>21,742</td>
  <td>24,027</td>
  <td>33,298</td>
  <td>32,091</td>
  <td>17,555</td>
  <td>11,285</td>
  <td>15,437</td>
  <td>15,447</td>
  <td>13,486</td>
</tr>
<tr>
  <th>Other    immigrants</th>
  <td>854</td>
  <td>1,277</td>
  <td>1,487</td>
  <td>1,671</td>
  <td>1,733</td>
  <td>2,014</td>
  <td>2,719</td>
  <td>3,850</td>
  <td>3,657</td>
  <td>477</td>
  <td>2,318</td>
  <td>1,900</td>
</tr>
<tr>
  <th>Category    not stated</th>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
</tr>
</tbody>
<tbody>
<tr>
  <th>Sub Total</th>
  <td>49,121</td>
  <td>76,906</td>
  <td>79,126</td>
  <td>95,817</td>
  <td>109,357</td>
  <td>117,231</td>
  <td>126,017</td>
  <td>119,679</td>
  <td>105,579</td>
  <td>101,890</td>
  <td>110,384</td>
  <td>106,291</td>
</tr>
</tbody>
<tbody>
<tr>
	<th colspan="13">Females</th>
</tr>

<tr>
  <th>Family    class</th>
  <td>24,135</td>
  <td>30,825</td>
  <td>30,236</td>
  <td>34,273</td>
  <td>41,002</td>
  <td>49,168</td>
  <td>57,715</td>
  <td>65,374</td>
  <td>54,162</td>
  <td>45,123</td>
  <td>40,196</td>
  <td>35,847</td>
</tr>
<tr>
  <th>Economic immigrants</th>
  <td>17,192</td>
  <td>34,170</td>
  <td>39,535</td>
  <td>44,397</td>
  <td>47,992</td>
  <td>43,355</td>
  <td>47,975</td>
  <td>54,638</td>
  <td>51,694</td>
  <td>52,903</td>
  <td>60,871</td>
  <td>61,524</td>
</tr>
<tr>
  <th>Refugees&nbsp;</th>
  <td>7,771</td>
  <td>8,707</td>
  <td>10,940</td>
  <td>15,110</td>
  <td>16,189</td>
  <td>20,776</td>
  <td>20,247</td>
  <td>13,038</td>
  <td>9,148</td>
  <td>12,656</td>
  <td>13,027</td>
  <td>10,821</td>
</tr>
<tr>
  <th>Other    immigrants</th>
  <td>981</td>
  <td>1,389</td>
  <td>1,683</td>
  <td>1,896</td>
  <td>1,868</td>
  <td>2,234</td>
  <td>2,825</td>
  <td>3,901</td>
  <td>3,796</td>
  <td>284</td>
  <td>1,547</td>
  <td>1,500</td>
</tr>
<tr>
  <th>Category    not stated</th>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
</tr>
</tbody>
<tbody>
<tr>
  <th>Sub Total</th>
  <td>50,079</td>
  <td>75,091</td>
  <td>82,394</td>
  <td>95,677</td>
  <td>107,051</td>
  <td>115,533</td>
  <td>128,762</td>
  <td>136,951</td>
  <td>118,800</td>
  <td>110,966</td>
  <td>115,641</td>
  <td>109,692</td>
</tr>
</tbody>

<tbody>
<tr>
	<th colspan="13">Sub Total</th>
</tr>
<tr>
  <th>Family    class</th>
  <td>42,381</td>
  <td>53,798</td>
  <td>51,389</td>
  <td>60,943</td>
  <td>74,667</td>
  <td>87,949</td>
  <td>101,109</td>
  <td>112,641</td>
  <td>94,188</td>
  <td>77,378</td>
  <td>68,317</td>
  <td>59,927</td>
</tr>
<tr>
  <th>Economic immigrants</th>
  <td>35,797</td>
  <td>74,077</td>
  <td>80,201</td>
  <td>90,130</td>
  <td>97,924</td>
  <td>86,493</td>
  <td>95,788</td>
  <td>105,645</td>
  <td>102,305</td>
  <td>106,624</td>
  <td>125,368</td>
  <td>128,349</td>
</tr>
<tr>
  <th>Refugees&nbsp;</th>
  <td>19,187</td>
  <td>21,456</td>
  <td>26,760</td>
  <td>36,852</td>
  <td>40,216</td>
  <td>54,074</td>
  <td>52,338</td>
  <td>30,593</td>
  <td>20,433</td>
  <td>28,093</td>
  <td>28,474</td>
  <td>24,307</td>
</tr>
<tr>
  <th>Other    immigrants</th>
  <td>1,835</td>
  <td>2,666</td>
  <td>3,170</td>
  <td>3,567</td>
  <td>3,601</td>
  <td>4,248</td>
  <td>5,544</td>
  <td>7,751</td>
  <td>7,453</td>
  <td>761</td>
  <td>3,865</td>
  <td>3,400</td>
</tr>
<tr>
  <th>Category    not stated</th>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
</tr>
<tr>
  <th>Gender    not stated</th>
  <td>154</td>
  <td>81</td>
  <td>64</td>
  <td>53</td>
  <td>44</td>
  <td>44</td>
  <td>13</td>
  <td>11</td>
  <td>8</td>
  <td>9</td>
  <td>46</td>
  <td>52</td>
</tr>
</tbody>
<tbody>
<tr>
  <th>Total</th>
  <td>99,354</td>
  <td>152,078</td>
  <td>161,584</td>
  <td>191,547</td>
  <td>216,452</td>
  <td>232,808</td>
  <td>254,792</td>
  <td>256,641</td>
  <td>224,387</td>
  <td>212,865</td>
  <td>226,071</td>
  <td>216,035</td>
</tr>
</tbody>
</table>

Before

This example was taken from the first table at : http://www.cic.gc.ca/english/resources/statistics/facts2010/permanent/01.asp

Original Lool

Visual of what the table look like before on the source website

Copy of the HTML Table Code

Canada – Permanent residents by gender and category, 1986 to 2010

Number
Category 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997
Family class 18,246 22,973 21,153 26,670 33,665 38,781 43,394 47,267 40,026 32,255 28,121 24,080
Economic immigrants 18,605 39,907 40,666 45,733 49,932 43,138 47,813 51,007 50,611 53,721 64,497 66,825
Refugees  11,416 12,749 15,820 21,742 24,027 33,298 32,091 17,555 11,285 15,437 15,447 13,486
Other immigrants 854 1,277 1,487 1,671 1,733 2,014 2,719 3,850 3,657 477 2,318 1,900
Category not stated 0 0 0 1 0 0 0 0 0 0 1 0
Males 49,121 76,906 79,126 95,817 109,357 117,231 126,017 119,679 105,579 101,890 110,384 106,291
Family class 24,135 30,825 30,236 34,273 41,002 49,168 57,715 65,374 54,162 45,123 40,196 35,847
Economic immigrants 17,192 34,170 39,535 44,397 47,992 43,355 47,975 54,638 51,694 52,903 60,871 61,524
Refugees  7,771 8,707 10,940 15,110 16,189 20,776 20,247 13,038 9,148 12,656 13,027 10,821
Other immigrants 981 1,389 1,683 1,896 1,868 2,234 2,825 3,901 3,796 284 1,547 1,500
Category not stated 0 0 0 1 0 0 0 0 0 0 0 0
Females 50,079 75,091 82,394 95,677 107,051 115,533 128,762 136,951 118,800 110,966 115,641 109,692
Family class 42,381 53,798 51,389 60,943 74,667 87,949 101,109 112,641 94,188 77,378 68,317 59,927
Economic immigrants 35,797 74,077 80,201 90,130 97,924 86,493 95,788 105,645 102,305 106,624 125,368 128,349
Refugees  19,187 21,456 26,760 36,852 40,216 54,074 52,338 30,593 20,433 28,093 28,474 24,307
Other immigrants 1,835 2,666 3,170 3,567 3,601 4,248 5,544 7,751 7,453 761 3,865 3,400
Category not stated 0 0 0 2 0 0 0 0 0 0 1 0
Gender not stated 154 81 64 53 44 44 13 11 8 9 46 52
Total 99,354 152,078 161,584 191,547 216,452 232,808 254,792 256,641 224,387 212,865 226,071 216,035
Source Code 


<table class="table-fact">
  <caption>Number</caption>
	<tr>
	  <th class="left" scope="col">Category</th>
	  <th scope="col">1986</th>
	  <th scope="col">1987</th>
	  <th scope="col">1988</th>
	  <th scope="col">1989</th>
	  <th scope="col">1990</th>
	  <th scope="col">1991</th>
	  <th scope="col">1992</th>
	  <th scope="col">1993</th>
	  <th scope="col">1994</th>
	  <th scope="col">1995</th>
	  <th scope="col">1996</th>
	  <th scope="col">1997</th>
	</tr>
	<tr>
	  <td class="left">Family    class</td>
	  <td>18,246</td>
	  <td>22,973</td>
	  <td>21,153</td>
	  <td>26,670</td>
	  <td>33,665</td>
	  <td>38,781</td>
	  <td>43,394</td>
	  <td>47,267</td>
	  <td>40,026</td>
	  <td>32,255</td>
	  <td>28,121</td>
	  <td>24,080</td>
	</tr>
	<tr>
	  <td class="left">Economic immigrants</td>
	  <td>18,605</td>
	  <td>39,907</td>
	  <td>40,666</td>
	  <td>45,733</td>
	  <td>49,932</td>
	  <td>43,138</td>
	  <td>47,813</td>
	  <td>51,007</td>
	  <td>50,611</td>
	  <td>53,721</td>
	  <td>64,497</td>
	  <td>66,825</td>
	</tr>
	<tr>
	  <td class="left">Refugees&nbsp;</td>
	  <td>11,416</td>
	  <td>12,749</td>
	  <td>15,820</td>
	  <td>21,742</td>
	  <td>24,027</td>
	  <td>33,298</td>
	  <td>32,091</td>
	  <td>17,555</td>
	  <td>11,285</td>
	  <td>15,437</td>
	  <td>15,447</td>
	  <td>13,486</td>
	</tr>
	<tr>
	  <td class="left">Other    immigrants</td>
	  <td>854</td>
	  <td>1,277</td>
	  <td>1,487</td>
	  <td>1,671</td>
	  <td>1,733</td>
	  <td>2,014</td>
	  <td>2,719</td>
	  <td>3,850</td>
	  <td>3,657</td>
	  <td>477</td>
	  <td>2,318</td>
	  <td>1,900</td>
	</tr>
	<tr>
	  <td class="left">Category    not stated</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>1</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>1</td>
	  <td>0</td>
	</tr>
	<tr class="subtotal">
	  <td class="left">Males</td>
	  <td>49,121</td>
	  <td>76,906</td>
	  <td>79,126</td>
	  <td>95,817</td>
	  <td>109,357</td>
	  <td>117,231</td>
	  <td>126,017</td>
	  <td>119,679</td>
	  <td>105,579</td>
	  <td>101,890</td>
	  <td>110,384</td>
	  <td>106,291</td>
	</tr>
	<tr>
	  <td class="left">Family    class</td>
	  <td>24,135</td>
	  <td>30,825</td>
	  <td>30,236</td>
	  <td>34,273</td>
	  <td>41,002</td>
	  <td>49,168</td>
	  <td>57,715</td>
	  <td>65,374</td>
	  <td>54,162</td>
	  <td>45,123</td>
	  <td>40,196</td>
	  <td>35,847</td>
	</tr>
	<tr>
	  <td class="left">Economic immigrants</td>
	  <td>17,192</td>
	  <td>34,170</td>
	  <td>39,535</td>
	  <td>44,397</td>
	  <td>47,992</td>
	  <td>43,355</td>
	  <td>47,975</td>
	  <td>54,638</td>
	  <td>51,694</td>
	  <td>52,903</td>
	  <td>60,871</td>
	  <td>61,524</td>
	</tr>
	<tr>
	  <td class="left">Refugees&nbsp;</td>
	  <td>7,771</td>
	  <td>8,707</td>
	  <td>10,940</td>
	  <td>15,110</td>
	  <td>16,189</td>
	  <td>20,776</td>
	  <td>20,247</td>
	  <td>13,038</td>
	  <td>9,148</td>
	  <td>12,656</td>
	  <td>13,027</td>
	  <td>10,821</td>
	</tr>
	<tr>
	  <td class="left">Other    immigrants</td>
	  <td>981</td>
	  <td>1,389</td>
	  <td>1,683</td>
	  <td>1,896</td>
	  <td>1,868</td>
	  <td>2,234</td>
	  <td>2,825</td>
	  <td>3,901</td>
	  <td>3,796</td>
	  <td>284</td>
	  <td>1,547</td>
	  <td>1,500</td>
	</tr>
	<tr>
	  <td class="left">Category    not stated</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>1</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	</tr>
	<tr class="subtotal">
	  <td class="left">Females</td>
	  <td>50,079</td>
	  <td>75,091</td>
	  <td>82,394</td>
	  <td>95,677</td>
	  <td>107,051</td>
	  <td>115,533</td>
	  <td>128,762</td>
	  <td>136,951</td>
	  <td>118,800</td>
	  <td>110,966</td>
	  <td>115,641</td>
	  <td>109,692</td>
	</tr>
	<tr>
	  <td class="left">Family    class</td>
	  <td>42,381</td>
	  <td>53,798</td>
	  <td>51,389</td>
	  <td>60,943</td>
	  <td>74,667</td>
	  <td>87,949</td>
	  <td>101,109</td>
	  <td>112,641</td>
	  <td>94,188</td>
	  <td>77,378</td>
	  <td>68,317</td>
	  <td>59,927</td>
	</tr>
	<tr>
	  <td class="left">Economic immigrants</td>
	  <td>35,797</td>
	  <td>74,077</td>
	  <td>80,201</td>
	  <td>90,130</td>
	  <td>97,924</td>
	  <td>86,493</td>
	  <td>95,788</td>
	  <td>105,645</td>
	  <td>102,305</td>
	  <td>106,624</td>
	  <td>125,368</td>
	  <td>128,349</td>
	</tr>
	<tr>
	  <td class="left">Refugees&nbsp;</td>
	  <td>19,187</td>
	  <td>21,456</td>
	  <td>26,760</td>
	  <td>36,852</td>
	  <td>40,216</td>
	  <td>54,074</td>
	  <td>52,338</td>
	  <td>30,593</td>
	  <td>20,433</td>
	  <td>28,093</td>
	  <td>28,474</td>
	  <td>24,307</td>
	</tr>
	<tr>
	  <td class="left">Other    immigrants</td>
	  <td>1,835</td>
	  <td>2,666</td>
	  <td>3,170</td>
	  <td>3,567</td>
	  <td>3,601</td>
	  <td>4,248</td>
	  <td>5,544</td>
	  <td>7,751</td>
	  <td>7,453</td>
	  <td>761</td>
	  <td>3,865</td>
	  <td>3,400</td>
	</tr>
	<tr>
	  <td class="left">Category    not stated</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>2</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>0</td>
	  <td>1</td>
	  <td>0</td>
	</tr>
	<tr>
	  <td class="left">Gender    not stated</td>
	  <td>154</td>
	  <td>81</td>
	  <td>64</td>
	  <td>53</td>
	  <td>44</td>
	  <td>44</td>
	  <td>13</td>
	  <td>11</td>
	  <td>8</td>
	  <td>9</td>
	  <td>46</td>
	  <td>52</td>
	</tr>
	<tr class="total">
	  <td class="left">Total</td>
	  <td>99,354</td>
	  <td>152,078</td>
	  <td>161,584</td>
	  <td>191,547</td>
	  <td>216,452</td>
	  <td>232,808</td>
	  <td>254,792</td>
	  <td>256,641</td>
	  <td>224,387</td>
	  <td>212,865</td>
	  <td>226,071</td>
	  <td>216,035</td>
	</tr>
  </table>

What I did

  1. I calculated the data per column to know the relationship
  2. By look at the table and the table source code, I found 2 row group title (Males, Females) located in the sub-total row
  3. I removed in the table source code any id, headers and scope attribute
  4. I found the two subtotal row and total row was already identified by a css class of the same name, I used them
  5. I added the appropriate row grouping tag for each section, header row group (thead), data row group (tbody), summary row group (tbody)
  6. I put the table in the "hassum" mode
  7. That was my choice but I decided to use an another tbody element to define the total row group. The tfoot element can be also used here