“Data” 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.
Data Cell
JQuery Selector: ":collevel(LEVEL)"
JQuery Selector: ":Data"
Defined by a data cell element (td). A set of data cell for a given level can be associate to a summary group.
Here an example of data cell compared to summary cell
<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 class="wet-boew-zebra">
<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 data column or a data 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. An empty data cell means that are no data and can not be a layout cell.
Intersection between 2 data group
The cell that represent the intersection of 2 data group are always data cell.
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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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 class="wet-boew-zebra">
<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: