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

I calculated the data per column to know the relationship
By look at the table and the table source code, I found 2 row group title (Males, Females) located in the sub-total row
I removed in the table source code any id, headers and scope attribute
I found the two subtotal row and total row was already identified by a css class of the same name, I used them
I added the appropriate row grouping tag for each section, header row group (thead), data row group (tbody), summary row group (tbody)
I put the table in the "hassum" mode
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