“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>
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>
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>
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>
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>
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>
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>
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>
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>
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...
- Date modified: