Summary Row Group

The next table is about a simple data-set.

Table 1 - Copyright applications filed and registered by province/territory
Province Filed Registered
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
Table 1 HTML Source Code


<table class="wet-boew-zebra">
  <caption>Table 1 - Copyright applications filed and registered by province/territory</caption>
  	<tr>
    	<th>Province</th>
    	<th> Filed</th>
    	<th> Registered</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>
</table>

The Table 1 are only containing simple HTML markup without any row grouping. But let say we would like to add a "Total" row at the end of the table and you want to make it distinctive.

  • Option 1: Use the CSS. This simple solution consist to directly go in the table source code, choose witch row should be considerated as the vector summary and directly fix his style. I saw often this solution applied to existing table.
  • Option 2: Group it in the tfoot element. So far, this is the best solution. As per his definition the data cell defined in the tfoot row group represent column summaries.
  • Option 3: Group it in a second tbody element. Hein ?? Group it in a second "tbody" element ? Yes, the table usability concept use the multiple tbody element to define data summary. So by using this technique it his possible to have a markup segmentic to define total and sub-total row for example.

The option 2 are illustrated with the table 2 and the option 3 is illustrated with the table 3. Please note the first row was grouped into the thead element.

Table 2 - Copyright applications filed and registered by province/territory
Province Filed Registered
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
Total 7877 7662
Table 2 HTML Source Code

<table class="wet-boew-zebra">
  <caption>Table 2 - Copyright applications filed and registered by province/territory</caption>
<thead>
  <tr>
    	<th>Province</th>
    	<th> Filed</th>
    	<th> Registered</th>
  	</tr>
</thead>
<tbody>
  <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>
    <tfoot>
  <tr>
    <th>Total</th>
    <td>7877</td>
    <td>7662</td>
  </tr>
  </tfoot>
</table>
Table 3 - Copyright applications filed and registered by province/territory
Province Filed Registered
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
Total 7877 7662
Table 3 HTML Source Code

<table class="wet-boew-zebra">
  <caption>Table 3 - Copyright applications filed and registered by province/territory</caption>
<thead>
  <tr>
    	<th>Province</th>
    	<th> Filed</th>
    	<th> Registered</th>
  	</tr>
</thead>
<tbody>
  <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>Total</th>
    <td>7877</td>
    <td>7662</td>
  </tr>
  </tbody>
</table>

Having multiple row group summary

I often seen a table have sub-total and total combined together. With the method described at the option 3 are helpfull to provide segmentic markup and retreive the relationship. The table 4 show an example of it.

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>

A header cell column spanned (colspan attribute) for the full table width is used to identify each group. The cell header "Copyright" and "Trade-mark" is used to identify each group in the table 4. Each sub-total is associated to their respective group cell header. The "Total" row at the end represent the summaries for the entire table. The relationshipt are determined on how the subsequent tbody element is organized. The HTML5 specification allow the use of multiple tbody.

Please note because of the complexity of the table 4 and 5, ids and headers attribute must be set as per the WCAG Level AA requirement.

Multiple group level

The word "level" is used to describe the relationship between a data row group versus the other one. The first data row group is set by default at the level 1, eg. Table 1, Table 2, Table 3. But the first data row group of the Table 4 start at level 2 because the data row group is named.

The data row group level can be increased more you go further in the table. The summary row group decrease the current level more you further in the table. For an example you can not summaries a data row group at the level 1 if after you have a data row group at level 2. In that case, the summary for the row group level 1 needs to be after the row group level 2. The following table show an example of it.

Table 5 - Canadian Applications filed and registered by province/territory
Province Filed Registered
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
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 5 HTML Source Code



<table class="wet-boew-zebra">
  <caption>Table 5 - Canadian Applications filed and registered by province/territory</caption>
<thead>
  <tr>
    	<th>Province</th>
    	<th> Filed</th>
    	<th> Registered</th>
  	</tr>
</thead>
<tbody>
  <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 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>

Multiple summary group level

If we consider a basic invoice with taxes, now it his possible to define the relationship between the sub-total and the total. The data row group will be considerated at level 1, the sub-total at the level 1 and the total at the level 0. When the level 0 is reached, no more row group is allowed. When the tfoot row group is used, it is considerated by default at the level 0. So the previous table 2 and 3 have a difference in their relationship association. The "Total" for the table 2 is calculated at the level 0 and the "Total" for the table 3 is calculated at the level 1.

Now let see a common example of an invoice table. The first group level is set at 1 and considerated as data. The second row group level is set at 1 and considerated as summary. The third row group level is set at 0 and considerated as summary. Because of the absence of group header cell, each subsequent group is considerated as a summary group.

Table 6 - Invoice
Products Price
Item 1 Description of Item 1 25.00 $
Item 2 Description of Item 2 75.00 $
Item 3 Description of Item 3 50.00 $
Item 4 Description of Item 4 50.00 $
Sub Total 200.00 $
Sales Taxes 10% 20.00 $
Total 220.00 $
Table 6 HTML Source Code



<table class="wet-boew-zebra">
	<caption>Table 6 - Invoice</caption>
	<colgroup>
		<col />
		<col />
	</colgroup>
	<colgroup>
		<col />
	</colgroup>
	<thead>
		<tr>
			<th colspan="2">Products</th>
			<th>Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Item 1</th>
			<td>Description of Item 1</td>
			<td>25.00 $</td>
		</tr>
		<tr>
			<th>Item 2</th>
			<td>Description of Item 2</td>
			<td>75.00 $</td>
		</tr>
		<tr>
			<th>Item 3</th>
			<td>Description of Item 3</td>
			<td>50.00 $</td>
		</tr>
		<tr>
			<th>Item 4</th>
			<td>Description of Item 4</td>
			<td>50.00 $</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="2">Sub Total</th>
			<td>200.00 $</td>
		</tr>
		<tr>
			<th>Sales Taxes</th>
			<td>10%</td>
			<td>20.00 $</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="2">Total</th>
			<td>220.00 $</td>
		</tr>
	</tbody>
</table>

Dealing with data row group at level 3 or higher

This concept also work when there is a need for a table to have three or more data row group level. The next table show an abstract example of a table containing row group at level 3. Each header cell are unique numbered. Next to the table you will have an explaination of the meaning of each header cell.

Row group header (Level 0)
Column header Column header Column header Column header Column header
1 - Row Group header
2 - Row Group header
3 - Row header 66 64 20 87% 0
4 - Row header 34 31 20 84% 0
5 - Row header 36 36 42 92% 0
6 - Row header 19 23 66 96% 0
7 - Row Group header
8 - Row header 297 297 66 84% 1
9 - Row header 396 381 67 88% 3
10 - Row header 422 437 111 93% 1
11 - Row header 626 654 99 99% 0
12 - Row Group header
13 - Row Group header
14 - Row header 12 11 11 100% 0
15 - Row header 0 0 n/a n/a 0
16 - Row header 3 4 17 100% 0
17 - Row header 8 8 33 100% 0
18 - Row Group header
19 - Row header 89 99 50 96% 0
20 - Row header 1 2 46 50% 0
21 - Row header 107 104 64 97% 0
22 - Row header 527 599 66 98% 0
23 - Row Group header
24 - Row header 89 99 50 96% 0
25 - Row header 1 2 46 50% 0
26 - Row header 107 104 64 97% 0
27 - Row header 527 599 66 98% 0
28 - Row header 527 599 66 98% 0
29 - Row header 527 599 66 98% 0
  • Cell #1 and #12: Represent the header group at level 1.
  • Cell #2, #7, #13, #18, #23: Represent the header group at level 2.
  • Cell #3, #4, #5, #6: Are not summariew by a row group summary
  • Cell #3 to #10, #14 to #16, #19 to #21 and #24 to #26: Represent a cell header row vector inside the row group level 2
  • Cell #11, #17, #22 and #27: Represent the summary group of the previous data group at level 2.
  • Cell #28: Represent the summary group at level 1 of the previous group. This should be equivalent to the cell identified by the header #1 to 27.
  • Cell #29: Represent the summary group at level 0. In theory, this summary group should be equivalent of all the data contained in the table.

Column Grouping

In this article you have see how to add row group summary. Now in the next article you will see how the concept of the thead element can be transposed to the first column group (colgroup element). You will learn how you can mark a key cell and how to mark a description cell for a row header cell.

“Keys” and “Description” cell in a table row