/
ExtendedDefinition.html
323 lines (246 loc) · 22.7 KB
/
ExtendedDefinition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.com/wet-boew/License-eng.txt / wet-boew.github.com/wet-boew/Licence-fra.txt -->
<title>Extended definition of HTML5 table elements - Table Usability - Web Experience Toolkit (WET)</title>
<link rel="shortcut icon" href="../../dist/theme-gcwu-fegc/images/favicon.ico" />
<meta name="description" content="English description / Description en anglais" />
<meta name="dcterms.creator" content="English name of the content author / Nom en anglais de l'auteur du contenu" />
<meta name="dcterms.title" content="English title / Titre en anglais" />
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" />
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" />
<meta name="dcterms.subject" title="scheme" content="English subject terms / Termes de sujet en anglais" />
<meta name="dcterms.language" title="ISO639-2" content="eng" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="../../dist/js/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="../../dist/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../dist/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../dist/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../dist/grids/css/util-min.css" />
<link rel="stylesheet" href="../../dist/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->
<noscript><link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ns-min.css" /></noscript>
<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>
<body><div id="wb-body">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li>
<li id="wb-skip2"><a href="#wb-nav">Skip to footer</a></li>
</ul>
</div>
<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2>Government of Canada navigation bar</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/depts/major/depind-eng.html">Departments</a></li>
<li id="gcwu-gcnb-lang"><a href="#" lang="fr">Français</a></li>
</ul>
</div></div></div></nav>
<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../index-eng.html">Web Experience Toolkit (WET)</a></p></div>
<section role="search"><div id="gcwu-srchbx"><h2>Search</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="text" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" data-icon="search" />
</div></form>
</div></section>
</div></div>
<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Site </span>menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.txt">
<li><div><a href="http://wet-boew.github.com/wet-boew/index-eng.html">WET project</a></div></li>
<li><div><a href="section2/index-eng.html">Section 2</a></div></li>
<li><div><a href="#">Section 3</a></div></li>
<li><div><a href="#">Section 4</a></div></li>
<li><div><a href="#">Section 5</a></div></li>
<li><div><a href="#">Section 6</a></div></li>
<li><div><a href="#">Section 7</a></div></li>
</ul>
</div></div></div></div>
<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in">
<ol>
<li><a href="../../index-eng.html">Home</a></li>
<li><a href="../index-eng.html">Working examples</a></li>
<li>Table Usability - Web Experience Toolkit (WET)</li>
</ol>
</div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>
<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->
<h1 id="wb-cont">Extended definition of HTML5 table elements</h1>
<p><strong>A knowledge about how to design a table in a HTML format</strong> would help to understand this documentation. The Table Usability Concept assume that you already know the definition from the W3C related to table elements defined in the <a href="http://www.w3.org/TR/html5/" rel="external">HTML5 specification</a>.</p>
<p>Here a quick view about the definition of each table related element:</p>
<ul>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element" rel="external">table</a>:</strong> The table element represents data with more than one dimension, in the form of a table. [...] Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap. [...] Authors are encouraged to provide information describing how to interpret complex tables.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-caption-element" rel="external">caption</a>:</strong> The caption element represents the title of the table that is its parent, if it has a parent and that is a table element. [..] A caption can introduce context for a table, making it significantly easier to understand.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element" rel="external">colgroup</a>:</strong> The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-col-element" rel="external">col</a>:</strong> If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element represents one or more columns in the column group represented by that colgroup.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-thead-element" rel="external">thead</a>:</strong> The thead element represents the block of rows that consist of the column labels (headers) for the parent table element, if the thead element has a parent and it is a table. [...] Notice the use of both th and td elements in the thead element: the first row is the headers, and the second row is an explanation of how to fill in the table.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element" rel="external">tbody</a>:</strong> The tbody element represents a block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element" rel="external">tfoot</a>:</strong> The tfoot element represents the block of rows that consist of the column summaries (footers) for the parent table element, if the tfoot element has a parent and it is a table.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tr-element" rel="external">tr</a>:</strong> The tr element represents a row of cells in a table.</li>
<li class="margin-bottom-large"><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-th-element" rel="external">th</a>:</strong> The th element represents a header cell in a table.</li>
<li><strong><a href="http://www.w3.org/TR/html5/tabular-data.html#the-td-element" rel="external">td</a>:</strong> The td element represents a data cell in a table.</li>
</ul>
<p><em>Information was token from the HTML5 specification, Editor's Draft 26 June 2012, Revision 1.5697</em></p>
<p>A basic knowledge about the <a href="http://www.w3.org/TR/html5/tabular-data.html#processing-model-1" rel="external">HTML table processing model</a> help on how to use the colspan and rowspan attribute on a cell in regards of the group element. The table usability concep should not conflic with the specification to <a href="http://www.w3.org/TR/html5/tabular-data.html#header-and-data-cell-semantics" rel="external">forming relationships between data cells and header cells</a> if the WCAG technique <a href="http://www.w3.org/TR/WCAG20-TECHS/H43.html" rel="external">H43: Using id and headers attributes to associate data cells with header cells in data tables</a> is used.</p>
<hr />
<p>The Table Usability define a new concept on how to create the relationship between the informative elements versus the tables structure elements. That is accomplished by following the HTML5 specification on how the HTML elements is nested. The Table Usability Concept are supported by a Javascript Parser build with the jQuery framework.</p>
<h2>Element Type</h2>
<ul>
<li class="margin-bottom-large"><strong>Informative:</strong> The informative element is related to the visual look of the table. In the HTML the table informative element are: <em>caption, th, td</em></li>
<li class="margin-bottom-large"><strong>Structural:</strong> A structural element is used to classify and give a particular sementic to the informative element and their styling would affect the informative element associated to them. In the HTML the table structural element are: <em>table, colgroup, col, thead, tbody, tfoot, tr</em>.</li>
</ul>
<h2>Element Classification</h2>
<p>The Informative and Structural element are classified in forth category</p>
<ul>
<li class="margin-bottom-large"><strong>Matrix:</strong> The matrix is the global container for a givin table. The matrix have a reference to all the group, all the vector and all the cell. The <em>table</em> HTML element is used to represent the matrix.</li>
<li class="margin-bottom-large"><strong>Group:</strong> A group is a data-set or a header-set inside a table. A group is normally represented by a cell header (th). The <em>colgroup</em>, <em>thead</em>, <em>tbody</em>, <em>tfoot</em> is used to represent each group. Here, the grouping concept is related but not directly associated to the visual representation of the data inside the table. Special note regarding the attribute <em>scope</em>: With this concept of element grouping, I recommend to do not set the scope attribute because a summary row group may don't have a representive header and this create inconsistancy in the table structure.</li>
<li class="margin-bottom-large"><strong>Vector:</strong> A vector is the linear representation of the table as per his column and row. The <em>col</em> and <em>row</em> is used to represent a vector.</li>
<li><strong>Cell:</strong> A cell is a visual element in a table. The <em>caption</em>, <em>th</em> and <em>td</em> is used to represent a cell.</li>
</ul>
<h2>Element Category</h2>
<p>The category is use to give a particular sementic to a classified element.</p>
<ul>
<li class="margin-bottom-large"><strong>Header:</strong> Basicly used to represent a header cell (th) and a header row group (thead), this concept is applied to the Group, Vector and Cell classification.</li>
<li class="margin-bottom-large"><strong>Data:</strong> Basicly used to represent a data cell (td), this concept is applied to the Group, Vector and Cell</li>
<li class="margin-bottom-large"><strong>Summary:</strong> Always preceded by a "Data", the summary category is determined on how the group and the cell is defined in a table. The <em>tfoot</em> element belong in the summary category.</li>
<li class="margin-bottom-large"><strong>Key:</strong> Similar to a primary key in a relational database, the key cell can only be defined for a row (Vector). The header cell associated is alway next to the key cell. Generally the key is not to intended to provide actual data but to provide a faster access to the data or to give a unique name for a cell header as reference. It's important that the key cell have the same width and height of his assoicated cell header.</li>
<li class="margin-bottom-large"><strong>Description:</strong> Used to provide additional information for a cell header. The description are not part of the actual tabular data. The description help to understand the cell header and/or provide additional information about the Vector. For a row (Vector), the cell description is next to the cell header for witch is providing a description. For a column (Vector), the cell description is directly bellow the cell header in the next row. It's important that the cell description have the same width and height of his assoicated cell header.</li>
<li class="margin-bottom-large"><strong>Layout:</strong> Only applicable to a cell, a layout cell don't provide any information. His location can only be at the intersection of two header group or at the insection of two summary group. His width and height need to correspond to the group intersection. Also to be considerated as a layout cell, the element <em>th, td</em> identified at the intersection need to be an empty tag.</li>
</ul>
<h2>Combinaison of Element Classification with the Element Category</h2>
<ul>
<li class="margin-bottom-large"><strong>Header Group:</strong> Represent a set of heading. In a row perpective this are represented by the <em>thead</em> element. In a column perpective this are represented by the first <em>colgroup</em> element. The key and the description is defined in the header group.</li>
<li class="margin-bottom-large"><strong>Data Group:</strong> Represent a data set. In a row perpective this are represented by the <em>tbody</em> element. In a column perpective this are represented by the first <em>colgroup</em> element if no column header group, Or by the second <em>colgroup</em> if a column header group exist. A table always have at least one data group for the column and one data group for the row. A Data Group can be represented by a group header cell.</li>
<li class="margin-bottom-large"><strong>Summary Group:</strong> Often smaller than his associated data group, the summary group include all the vector that show information like sub-total, total. The summary group share with his associated data group the same group header cell. However, it's possible, for a summary to do not share a group header cell with a data group. In this particular case the summary is set at the level 0 and no other group is allowed after.</li>
<li class="margin-bottom-large"><strong>Header Vector:</strong> A row or a column that is last cell is a header cell.</li>
<li class="margin-bottom-large"><strong>Data Vector:</strong> A row or a column that is last cell is a data cell. The only exception is a vector
contained inside a header group, that define the concept of the key and description cell.</li>
<li class="margin-bottom-large"><strong>Summary Vector:</strong> Similar to a data vector but defined inside a summary group.</li>
<li class="margin-bottom-large"><strong>Key Vector:</strong> Only defined inside a column header group, the key vector is simply the column of key cell.</li>
<li class="margin-bottom-large"><strong>Description Vector:</strong> Only defined inside a header group, the description vector represent the column or/and the row that is used to describe a cell header.</li>
<li class="margin-bottom-large"><strong>Header Cell:</strong> Represent a group or a vector. The table <em>caption</em> and <em>th</em> element is considerated to be header cell.</li>
<li class="margin-bottom-large"><strong>Group Header Cell:</strong> Derivated from a header cell, a group header cell represent a data group or a combinaison of a data group with a summary group. The table <em>caption</em> is considerated to be a group header cell.</li>
<li class="margin-bottom-large"><strong>Data Cell:</strong> Defined inside a data group and represented by the <em>td</em> element.</li>
<li class="margin-bottom-large"><strong>Summary Cell:</strong> Defined inside a summary group and represented by the <em>td</em> element.</li>
<li class="margin-bottom-large"><strong>Key Cell:</strong> His relation is defined by the column header group. Similar to a primary key in a relational database, the key cell can only be defined for a row (Vector). The header cell associated is alway next to the key cell. Generally the key is not to intended to provide actual data but to provide a faster access to the data or to give a unique name for a cell header as reference. It's important that the key cell have the same width and height of his assoicated cell header.</li>
<li class="margin-bottom-large"><strong>Description Cell:</strong> His relation is defined by the header group. Used to provide additional information for a cell header. The description category is not a data but help to understand the cell header and/or provide additional information about the Vector. For a row (Vector), the cell description is next to the cell header that his providing a description. For a column (Vector), the cell description is directly bellow the cell header in the next row. It's important that the cell description have the same width and height of his assoicated cell header.</li>
<li class="margin-bottom-large"><strong>Layout Cell:</strong> A layout cell don't provide any information. A layout cell need to be empty tag without any spaces inside. His location can only be at the intersection of the header group or at the insection of summary group. His width and height need to correspond to the group intersection. The layout cell can be a <em>th</em> or a <em>td</em> element.</li>
</ul>
<!--
<h2>Check this New Definition in Action</h2>
<ol>
<li><a href="SummaryRowGroup.html">Summary Row Group</a></li>
<li>Header Column Group
<ol>
<li>Key Cell</li>
<li>Descriptive Row Header Cell</li>
</ol>
</li>
<li>Header Row Group</li>
<li>Summary Column Group</li>
<li>Cell Header Nesting
<ol>
<li>Basic usage</li>
<li>Use of Key Cell and Descriptive Cell</li>
</ol>
</li>
</ol>
<hr />
<p>Note: the following need to be moved in the Cell Header Nesting documentation</p>
<h2>Data Level</h2>
<p>The Data Level is applied to a group. A header, data and summary Cell always have two level. One level for the row and one level for the column. The caption element is associated at the level 1 for both scope. When a data is classified to be at the level 0, this is attached to the matrix.<p>
<h3>Column Level</h3>
<p>Defined by a group header cell in the row group header, the column level is calculated by the position of the cell header in the header row. The number of row header included in the row group header will determinate the available number of level for the column scope.</p>
<h3>Row Level</h3>
<p>The row level is calculated by the number of row header inside a data row group. The level always increase and decrease of one level for the next summary row group.</p>
<h3>Row Level Inside a Data Group</h3>
<p>A row level can be increased inside a data group if the table structure is constant. This create a sub group based on the number of row the group header cell is spanned. However no summary can be defined in that sub row group because in the <a href="http://www.w3.org/TR/html5/tabular-data.html#processing-model-1">4.9.12 Processing model</a> from the HTML5 specification said: <cite>A cell cannot cover slots that are from two or more row groups.</cite>.</p>
-->
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2013-04-10</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>
</div></div>
<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Footer</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" rel="license">Terms and conditions</a></li>
<li class="gcwu-tr"><a href="#">Transparency</a></li>
</ul>
</div>
<div class="clear"></div>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">About us</a></h4>
<ul>
<li><a href="#">Our Mandate</a></li>
<li><a href="#">Our Minister</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">News</a></h4>
<ul>
<li><a href="#">News releases</a></li>
<li><a href="#">Media advisories</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contact us</a></h4>
<address>
<ul>
<li><a href="#">Phone numbers</a></li>
<li><a href="#">Office locations</a></li>
</ul>
</address>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Stay connected</a></h4>
<ul>
<li><a rel="external" href="#">YouTube</a></li>
<li><a rel="external" href="#">Twitter</a></li>
<li><a href="#">Feeds</a></li>
</ul>
</div></section>
</div></div></nav>
<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li>
<li><a rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li>
<li><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li>
<li><a rel="external" href="http://actionplan.gc.ca/en"><span>Economy</span><br />actionplan.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>
<!-- ScriptsStart -->
<script src="../../dist/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../dist/js/settings.js"></script>
<script src="../../dist/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>