“Summarys” Cell - Table Usability - Web Experience Toolkit (WET)

This article about a table usability guideline. The purpose of the table usability guideline is to explain how you can create usable complex table. The HTML5 markup are used to illustrate the guideline methodology. This documentation/guideline are supported by a javascript table parser. Anything regards of HTML accessibility are not discussed here because with the javascript table parser it would be possible to auto setup the accessibility requirement on the fly, that for a complex usable table.

Summary Cell

JQuery Selector: ":collevel(LEVEL)"

JQuery Selector: ":summary"

JQuery Selector: ":colsummary" Not supported yet

JQuery Selector: ":rowsummary" Not supported yet

Defined by a data cell element (td), a summary cell is can by compared to an alternative data set for a given data level like a "sub-total" and "total" row/column. You can compare a summary data set as the tfoot definition. "[..] block of rows that consist of the column summaries (footers) for the parent table element". But here, in the table usability context, a summary consist of a data set summaries. Only one summary data set can exist per column group level and row group level.

Here a simple example that have column summary (summary for a given row).


<colgroup><col /></colgroup> <colgroup span="2"></colgroup>
<colgroup></colgroup> <colgroup></colgroup>
Example Table: Number of PPH requests
Country Number of Requests A Number of Requests B subTotal Total
United States (USPTO) 533 533 1253 1253
Japan (JPO) 36 54 533 533
Korea (KIPO) 3 533 533 533
Finland (NBPR) 1 533 533 533
Germany (DPMA) 1 533 533 533
Denmark (DKPTO) 0 533 533 533
Spain (SPTO) 533 533 0 533
PCT-PPH (CA ISA/IPEA) 1 533 533 533
Total 1 533 533

Source code


<table>
	<caption>Example Table: Number of PPH requests</caption>


	<colgroup>
		<col>
	</colgroup>


	<colgroup span="2"></colgroup>

	<colgroup></colgroup>
	<colgroup></colgroup>


	<thead>
		<tr>
			<th>Country</th>
			<th>Number of Requests A</th>
			<th>Number of Requests B</th>
			<th>subTotal</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<th>United States    (USPTO)</th>
		<td>533</td>
		<td>533</td>
		<td>1253</td>
		<td>1253</td>
	</tr>
	<tr>
		<th>Japan (JPO)</th>
		<td>36</td>
		<td>54</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Korea    (KIPO)</th>
		<td>3</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Finland    (NBPR)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Germany    (DPMA)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Denmark    (DKPTO)</th>
		<td>0</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Spain    (SPTO)</th>
		<td>533</td>
		<td>533</td>
		<td>0</td>
		<td>533</td>
	</tr>
	<tr>
		<th>PCT-PPH    (CA ISA/IPEA)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	</tbody>
	<tbody>
	<tr>
		<th>Total</th>
		<td>1</td>
		<td>533</td>
		<td></td>
		<td>533</td>
	</tr>
	</tbody>

</table>

How it's work ?

A summary column or a summary row are programaticly determined by how the "colgroup" and the "tbody" are used in the table markup.

Column Group Level

A "level" defined how deep is the data set are compared to others data set. For simple table with one row of heading to represent the column that is set at level 1. Having 2 or more row of heading can increase the column data level depending of how the colgroup are set and how the cell heading are set.

Header Column Group

If present, this is the first colgroup and only one can exists. The header column group act as the same of the thead element but in a column grouping perspective. To learn more check the "Keys" and "Description" cell in a table row.

Data Column Group

Always defined before any summary column group, a data column group represent the actual data and often contain more data than his associated column group summary.

Summary Column Group

Always defined after a data column group. A summary column group are often only composed of one column with the heading "Sub-Total" or/and "Total".

Intersection between 2 summary group

The cell that represent the intersection of 2 summary group can be either a data summary or a layout cell.

Simple Column Grouping Example

The following table only have one row for the column definition. The first colgroup are a header column group. The second colgroup, spanned on 2 column, represent the data colgroup (Level 1). The third colgroup represent the summary of the previous data colgroup (Level 1). The last colgroup represent the summary of the table row summaries (Level 0).


<colgroup></colgroup> <colgroup span="2"></colgroup>
<colgroup></colgroup> <colgroup></colgroup>
Example Table: Number of PPH requests
Country Number of Requests A Number of Requests B subTotal Total
United States (USPTO) 533 533 1253 1253
Japan (JPO) 36 54 533 533
Korea (KIPO) 3 533 533 533
Finland (NBPR) 1 533 533 533
Germany (DPMA) 1 533 533 533
Denmark (DKPTO) 0 533 533 533
Spain (SPTO) 533 533 0 533
PCT-PPH (CA ISA/IPEA) 1 533 533 533

Source code


<table>
	<caption>Example Table: Number of PPH requests</caption>


	<colgroup></colgroup>
	<colgroup span="2"></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>


	<thead>
		<tr>
			<th>Country</th>
			<th>Number of Requests A</th>
			<th>Number of Requests B</th>
			<th>subTotal</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<th>United States    (USPTO)</th>
		<td>533</td>
		<td>533</td>
		<td>1253</td>
		<td>1253</td>
	</tr>
	<tr>
		<th>Japan (JPO)</th>
		<td>36</td>
		<td>54</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Korea    (KIPO)</th>
		<td>3</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Finland    (NBPR)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Germany    (DPMA)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Denmark    (DKPTO)</th>
		<td>0</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	<tr>
		<th>Spain    (SPTO)</th>
		<td>533</td>
		<td>533</td>
		<td>0</td>
		<td>533</td>
	</tr>
	<tr>
		<th>PCT-PPH    (CA ISA/IPEA)</th>
		<td>1</td>
		<td>533</td>
		<td>533</td>
		<td>533</td>
	</tr>
	</tbody>
</table>

Multiple Column Group Level

When we have more than row to compose the column heading, give the possibility to define multiple data column level.

"L" in the following table are a short hand for Data Column Level


<colgroup></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup>
Caption
Heading - L1 Heading - L1 Heading - L1
Heading - L2 Heading - L2 Heading - L2 Heading - L2 Heading - L2 Heading - L2
Data - L2 Summary - L2 Data - L2 Summary - L2 Data - L2 Summary - L2
Data - L2 Summary - L2 Data - L2 Summary - L2 Data - L2 Summary - L2
Data - L2 Summary - L2 Data - L2 Summary - L2 Data - L2 Summary - L2
Data - L2 Summary - L2 Data - L2 Summary - L2 Data - L2 Summary - L2

Source code


<table>
	<caption>
Caption
	</caption>

	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>


    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        </tr>

    	<tr>
        	<th>Heading - L2</th>
            <th>Heading - L2</th>
            <th>Heading - L2</th>
            <th>Heading - L2</th>
            <th>Heading - L2</th>
            <th>Heading - L2</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>

    </tbody>
</table>

Now if we play with the column group element.

 <colgroup span="6"></colgroup> 
Caption
Heading - L1 Heading - L1 Heading - L1
Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1
Data - L1 Data - L1 Data - L1 Data - L1 Data - L1 Data - L1
Data - L1 Data - L1 Data - L1 Data - L1 Data - L1 Data - L1
Data - L1 Data - L1 Data - L1 Data - L1 Data - L1 Data - L1
Data - L1 Data - L1 Data - L1 Data - L1 Data - L1 Data - L1

Source code


<table>
	<caption>
Caption
	</caption>

    <colgroup span="6"></colgroup>

    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        </tr>

    	<tr>
        	<th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
        </tr>

    </tbody>
</table>


<colgroup span="4"></colgroup>
<colgroup span="2"></colgroup>
Caption
Heading - L1 Heading - L1 Heading - L1
Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1
Data - L1 Data - L1 Data - L1 Data - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Data - L1 Data - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Data - L1 Data - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Data - L1 Data - L1 Summary - L1 Summary - L1

Source code


<table>
	<caption>
Caption
	</caption>

	<colgroup span="4"></colgroup>
	<colgroup span="2"></colgroup>

    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        </tr>

    	<tr>
        	<th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>

    </tbody>
</table>


<colgroup span="4"></colgroup>
<colgroup></colgroup> <colgroup></colgroup>
Caption
Heading - L1 Heading - L1 Heading - L1
Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L2 Heading - L2
Data - L1 Data - L1 Data - L1 Data - L1 Data - L2 Summary - L2
Data - L1 Data - L1 Data - L1 Data - L1 Data - L2 Summary - L2
Data - L1 Data - L1 Data - L1 Data - L1 Data - L2 Summary - L2
Data - L1 Data - L1 Data - L1 Data - L1 Data - L2 Summary - L2

Source code


<table>
	<caption>
Caption
	</caption>

	<colgroup span="4"></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>

    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        </tr>

    	<tr>
        	<th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L2</th>
            <th>Heading - L2</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Data - L2</td>
            <td>Summary - L2</td>
        </tr>

    </tbody>
</table>


<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
Caption
Heading - L1 Heading - L1 Heading - L0
Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L0 Heading - L0
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L0 Summary - L0
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L0 Summary - L0
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L0 Summary - L0
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L0 Summary - L0

Source code


<table>
	<caption>
Caption
	</caption>

	<colgroup span="2"></colgroup>
	<colgroup span="2"></colgroup>
	<colgroup span="2"></colgroup>


    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L0</th>
        </tr>

    	<tr>
        	<th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L0</th>
            <th>Heading - L0</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L0</td>
            <td>Summary - L0</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L0</td>
            <td>Summary - L0</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L0</td>
            <td>Summary - L0</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L0</td>
            <td>Summary - L0</td>
        </tr>
    </tbody>
</table>


<colgroup span="2"></colgroup>
<colgroup span="4"></colgroup>
Caption
Heading - L1 Heading - L1 Heading - L1
Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1 Heading - L1
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L1 Summary - L1
Data - L1 Data - L1 Summary - L1 Summary - L1 Summary - L1 Summary - L1

Source code


<table>
	<caption>
Caption
	</caption>

	<colgroup span="2"></colgroup>
	<colgroup span="4"></colgroup>

    <thead>
    	<tr>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        	<th colspan="2">Heading - L1</th>
        </tr>

    	<tr>
        	<th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
            <th>Heading - L1</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
        <tr>
            <td>Data - L1</td>
            <td>Data - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
            <td>Summary - L1</td>
        </tr>
    </tbody>
</table>

As you can see, depending how you define the colgroup element that can completly change you table meaning.

Three Data Column Level and More

Even if the table parser can understand the column data relationship in the next table, my recommendation is to only have one column level for your data and summaries it in lower level after.

  • "H" represent Header Cell
  • "D" represent Data Cell
  • "S" represent Summary Cell
  • "L" represent Data Column Level

<colgroup span="3"></colgroup> <colgroup span="3"></colgroup>
<colgroup span="3"></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
Caption
H - L1 H - L1 H - L1 H - L1 H - L1
H - L2 H - L2 H - L2
H - L2 H - L2 H - L2 H - L3 H - L3 H - L3
H - L3 H - L3 H - L4 H - L4
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1
D - L1 D - L1 D - L1 D - L2 D - L2 D - L2 D - L3 D - L3 D - L3 D - L4 S - L4 S - L2 S - L1

Source code


<table>
	<caption>Caption</caption>

	<colgroup span="3"></colgroup>
	<colgroup span="3"></colgroup>
	<colgroup span="3"></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>
	<colgroup></colgroup>

	<thead>
		<tr>
			<th rowspan="4">H - L1</th>
			<th rowspan="4">H - L1</th>
			<th rowspan="4">H - L1</th>
			<th colspan="9">H - L1</th>

			<th rowspan="4">H - L1</th>
		</tr>

		<tr>
			<th colspan="3">H - L2</th>
			<th colspan="5">H - L2</th>
			<th rowspan="3">H - L2</th>
		</tr>

		<tr>
			<th rowspan="2">H - L2</th>
			<th rowspan="2">H - L2</th>
			<th rowspan="2">H - L2</th>
			<th rowspan="2">H - L3</th>

			<th colspan="2">H - L3</th>
			<th colspan="2">H - L3</th>
		</tr>

		<tr>
			<th>H - L3</th>
			<th>H - L3</th>
			<th>H - L4</th>
			<th>H - L4</th>
		</tr>

	</thead>

	<tbody>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
		<tr>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L1</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L2</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L3</td>
			<td>D - L4</td>
			<td>S - L4</td>
			<td>S - L2</td>
			<td>S - L1</td>
		</tr>
	</tbody>
</table>

Row Summary

Documentation on development...

May you would like to see also...