[html5] r8558 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Mon Mar 31 21:40:27 PDT 2014
Author: ianh
Date: 2014-03-31 21:40:24 -0700 (Mon, 31 Mar 2014)
New Revision: 8558
Added:
images/sample-table-sortable-1.png
images/sample-table-sortable-2.png
images/sample-table-sortable-3.png
Modified:
complete.html
index
source
Log:
[c] (2) rel='shortcut icon' requirement changes; extra sample table for sorting
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2014-03-22 07:59:40 UTC (rev 8557)
+++ complete.html 2014-04-01 04:40:24 UTC (rev 8558)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 19 March 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 1 April 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -709,7 +709,7 @@
<li><a href=#forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</a></li>
<li><a href=#header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></li>
<li><a href=#table-sorting-model><span class=secno>4.9.13 </span>Table sorting model</a></li>
- <li><a href=#examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
+ <li><a href=#table-examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
<li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
@@ -881,7 +881,7 @@
<li><a href=#shadows><span class=secno>4.12.4.2.19 </span>Shadows</a></li>
<li><a href=#drawing-model><span class=secno>4.12.4.2.20 </span>Drawing model</a></li>
<li><a href=#best-practices><span class=secno>4.12.4.2.21 </span>Best practices</a></li>
- <li><a href=#examples-0><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
+ <li><a href=#examples><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</a></li>
<li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
@@ -921,14 +921,14 @@
<li><a href=#vcard><span class=secno>5.4.1 </span>vCard</a>
<ol>
<li><a href=#conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</a></li>
- <li><a href=#examples-1><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
+ <li><a href=#examples-0><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
<li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a>
<ol>
<li><a href=#conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</a></li>
- <li><a href=#examples-2><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
+ <li><a href=#examples-1><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
<li><a href=#licensing-works><span class=secno>5.4.3 </span>Licensing works</a>
<ol>
- <li><a href=#examples-3><span class=secno>5.4.3.1 </span>Examples</a></ol></ol></li>
+ <li><a href=#examples-2><span class=secno>5.4.3.1 </span>Examples</a></ol></ol></li>
<li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
<ol>
<li><a href=#json><span class=secno>5.5.1 </span>JSON</a></ol></ol></li>
@@ -1143,7 +1143,7 @@
<ol>
<li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
<ol>
- <li><a href=#examples-4><span class=secno>9.5.1.1 </span>Examples</a></li>
+ <li><a href=#examples-3><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
<li><a href=#ports-as-the-basis-of-abstracting-out-service-implementations><span class=secno>9.5.1.3 </span>Ports as the basis of abstracting out service implementations</a></ol></li>
<li><a href=#message-channels><span class=secno>9.5.2 </span>Message channels</a></li>
@@ -1156,7 +1156,7 @@
<li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
- <li><a href=#examples-5><span class=secno>10.1.2 </span>Examples</a>
+ <li><a href=#examples-4><span class=secno>10.1.2 </span>Examples</a>
<ol>
<li><a href=#a-background-number-crunching-worker><span class=secno>10.1.2.1 </span>A background number-crunching worker</a></li>
<li><a href=#worker-used-for-background-i/o><span class=secno>10.1.2.2 </span>Worker used for background I/O</a></li>
@@ -33075,8 +33075,9 @@
<p>For historical reasons, the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword may be preceded by the
keyword "<code title="">shortcut</code>". If the "<code title="">shortcut</code>" keyword is
- present, it must be come immediately before the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword and the
- two keywords must be separated by only a single U+0020 SPACE character.</p>
+ present, the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute's entire value must be an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">shortcut icon</code>" (with a single U+0020 SPACE character between the tokens and
+ no other <a href=#space-character title="space character">space characters</a>).</p>
<h5 id=link-type-license><span class=secno>4.8.5.7 </span>Link type "<dfn title=rel-license><code>license</code></dfn>"</h5>
@@ -37189,7 +37190,7 @@
</div>
- <h4 id=examples><span class=secno>4.9.14 </span>Examples</h4>
+ <h4 id=table-examples><span class=secno>4.9.14 </span>Examples</h4>
<p><i>This section is non-normative.</i></p>
@@ -37359,8 +37360,45 @@
<td> $ 3,761 <td> $ 2,963 <td> $ 2,433
<tr><th scope=row> Percentage of net sales
<td> 11.6% <td> 12.3% <td> 12.6%
- </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+ </table><hr><p>Sometimes, tables are used for dense data. For examples, here a table is used to show entries
+ in an access log:</p>
+ <pre><table sortable>
+ <thead>
+ <tr>
+ <th sorted> Timestamp
+ <th> IP
+ <th> Message
+ <tbody>
+ <tr>
+ <td> <time>21:01</time>
+ <td> 128.30.52.199
+ <td> Exceeded ingress limit
+ <tr>
+ <td> <time>21:04</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+ <tr>
+ <td> <time>22:35</time>
+ <td> 128.30.52.29
+ <td> Malware command request blocked
+ <tr>
+ <td> <time>22:36</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+</table></pre>
+
+ <p>Because the <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-sortable><a href=#attr-table-sortable>sortable</a></code>
+ attribute, the column headers can be selected to change the table's sort order.</p>
+
+ <p>This might render as follows:</p>
+
+ <p><img width=418 src=http://images.whatwg.org/sample-table-sortable-1.png alt="The table as marked above, but with the column headers having interactive affordances to select which column to sort by, the first being already selected." height=109><p>If the user activates the second column, the table might change as follows:</p>
+
+ <p><img width=414 src=http://images.whatwg.org/sample-table-sortable-2.png alt="The same table, but with the second column header's interactive affordance marked as selected, with the IP addresses sorted in numeric order (first the rows with the address ending in '3', then the row with the address ending in '29', and finally the row with the address ending in '199'." height=109><p>If the user activates the second column again, reversing the sort order, it might change as follows:</p>
+
+ <p><img width=414 src=http://images.whatwg.org/sample-table-sortable-3.png alt="The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'." height=109><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+
<h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -59831,7 +59869,7 @@
<code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute.</p>
- <h6 id=examples-0><span class=secno>4.12.4.2.22 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.12.4.2.22 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -63761,7 +63799,7 @@
- <h5 id=examples-1><span class=secno>5.4.1.2 </span>Examples</h5>
+ <h5 id=examples-0><span class=secno>5.4.1.2 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -64524,7 +64562,7 @@
- <h5 id=examples-2><span class=secno>5.4.2.2 </span>Examples</h5>
+ <h5 id=examples-1><span class=secno>5.4.2.2 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -64675,7 +64713,7 @@
</dd>
- </dl><h5 id=examples-3><span class=secno>5.4.3.1 </span>Examples</h5>
+ </dl><h5 id=examples-2><span class=secno>5.4.3.1 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -82320,7 +82358,7 @@
<pre>port1.postMessage(['hello', 'world']);</pre>
- <h5 id=examples-4><span class=secno>9.5.1.1 </span>Examples</h5>
+ <h5 id=examples-3><span class=secno>9.5.1.1 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -83303,7 +83341,7 @@
high per-instance memory cost.</p>
- <h4 id=examples-5><span class=secno>10.1.2 </span>Examples</h4>
+ <h4 id=examples-4><span class=secno>10.1.2 </span>Examples</h4>
<p><i>This section is non-normative.</i></p>
Added: images/sample-table-sortable-1.png
===================================================================
(Binary files differ)
Property changes on: images/sample-table-sortable-1.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: images/sample-table-sortable-2.png
===================================================================
(Binary files differ)
Property changes on: images/sample-table-sortable-2.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: images/sample-table-sortable-3.png
===================================================================
(Binary files differ)
Property changes on: images/sample-table-sortable-3.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: index
===================================================================
--- index 2014-03-22 07:59:40 UTC (rev 8557)
+++ index 2014-04-01 04:40:24 UTC (rev 8558)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 19 March 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 1 April 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -709,7 +709,7 @@
<li><a href=#forming-a-table><span class=secno>4.9.12.1 </span>Forming a table</a></li>
<li><a href=#header-and-data-cell-semantics><span class=secno>4.9.12.2 </span>Forming relationships between data cells and header cells</a></ol></li>
<li><a href=#table-sorting-model><span class=secno>4.9.13 </span>Table sorting model</a></li>
- <li><a href=#examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
+ <li><a href=#table-examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
<li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
@@ -881,7 +881,7 @@
<li><a href=#shadows><span class=secno>4.12.4.2.19 </span>Shadows</a></li>
<li><a href=#drawing-model><span class=secno>4.12.4.2.20 </span>Drawing model</a></li>
<li><a href=#best-practices><span class=secno>4.12.4.2.21 </span>Best practices</a></li>
- <li><a href=#examples-0><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
+ <li><a href=#examples><span class=secno>4.12.4.2.22 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.12.4.3 </span>Color spaces and color correction</a></li>
<li><a href=#serializing-bitmaps-to-a-file><span class=secno>4.12.4.4 </span>Serializing bitmaps to a file</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.12.4.5 </span>Security with <code>canvas</code> elements</a></ol></ol></li>
@@ -921,14 +921,14 @@
<li><a href=#vcard><span class=secno>5.4.1 </span>vCard</a>
<ol>
<li><a href=#conversion-to-vcard><span class=secno>5.4.1.1 </span>Conversion to vCard</a></li>
- <li><a href=#examples-1><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
+ <li><a href=#examples-0><span class=secno>5.4.1.2 </span>Examples</a></ol></li>
<li><a href=#vevent><span class=secno>5.4.2 </span>vEvent</a>
<ol>
<li><a href=#conversion-to-icalendar><span class=secno>5.4.2.1 </span>Conversion to iCalendar</a></li>
- <li><a href=#examples-2><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
+ <li><a href=#examples-1><span class=secno>5.4.2.2 </span>Examples</a></ol></li>
<li><a href=#licensing-works><span class=secno>5.4.3 </span>Licensing works</a>
<ol>
- <li><a href=#examples-3><span class=secno>5.4.3.1 </span>Examples</a></ol></ol></li>
+ <li><a href=#examples-2><span class=secno>5.4.3.1 </span>Examples</a></ol></ol></li>
<li><a href=#converting-html-to-other-formats><span class=secno>5.5 </span>Converting HTML to other formats</a>
<ol>
<li><a href=#json><span class=secno>5.5.1 </span>JSON</a></ol></ol></li>
@@ -1143,7 +1143,7 @@
<ol>
<li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
<ol>
- <li><a href=#examples-4><span class=secno>9.5.1.1 </span>Examples</a></li>
+ <li><a href=#examples-3><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
<li><a href=#ports-as-the-basis-of-abstracting-out-service-implementations><span class=secno>9.5.1.3 </span>Ports as the basis of abstracting out service implementations</a></ol></li>
<li><a href=#message-channels><span class=secno>9.5.2 </span>Message channels</a></li>
@@ -1156,7 +1156,7 @@
<li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
- <li><a href=#examples-5><span class=secno>10.1.2 </span>Examples</a>
+ <li><a href=#examples-4><span class=secno>10.1.2 </span>Examples</a>
<ol>
<li><a href=#a-background-number-crunching-worker><span class=secno>10.1.2.1 </span>A background number-crunching worker</a></li>
<li><a href=#worker-used-for-background-i/o><span class=secno>10.1.2.2 </span>Worker used for background I/O</a></li>
@@ -33075,8 +33075,9 @@
<p>For historical reasons, the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword may be preceded by the
keyword "<code title="">shortcut</code>". If the "<code title="">shortcut</code>" keyword is
- present, it must be come immediately before the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword and the
- two keywords must be separated by only a single U+0020 SPACE character.</p>
+ present, the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute's entire value must be an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">shortcut icon</code>" (with a single U+0020 SPACE character between the tokens and
+ no other <a href=#space-character title="space character">space characters</a>).</p>
<h5 id=link-type-license><span class=secno>4.8.5.7 </span>Link type "<dfn title=rel-license><code>license</code></dfn>"</h5>
@@ -37189,7 +37190,7 @@
</div>
- <h4 id=examples><span class=secno>4.9.14 </span>Examples</h4>
+ <h4 id=table-examples><span class=secno>4.9.14 </span>Examples</h4>
<p><i>This section is non-normative.</i></p>
@@ -37359,8 +37360,45 @@
<td> $ 3,761 <td> $ 2,963 <td> $ 2,433
<tr><th scope=row> Percentage of net sales
<td> 11.6% <td> 12.3% <td> 12.6%
- </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+ </table><hr><p>Sometimes, tables are used for dense data. For examples, here a table is used to show entries
+ in an access log:</p>
+ <pre><table sortable>
+ <thead>
+ <tr>
+ <th sorted> Timestamp
+ <th> IP
+ <th> Message
+ <tbody>
+ <tr>
+ <td> <time>21:01</time>
+ <td> 128.30.52.199
+ <td> Exceeded ingress limit
+ <tr>
+ <td> <time>21:04</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+ <tr>
+ <td> <time>22:35</time>
+ <td> 128.30.52.29
+ <td> Malware command request blocked
+ <tr>
+ <td> <time>22:36</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+</table></pre>
+
+ <p>Because the <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-sortable><a href=#attr-table-sortable>sortable</a></code>
+ attribute, the column headers can be selected to change the table's sort order.</p>
+
+ <p>This might render as follows:</p>
+
+ <p><img width=418 src=http://images.whatwg.org/sample-table-sortable-1.png alt="The table as marked above, but with the column headers having interactive affordances to select which column to sort by, the first being already selected." height=109><p>If the user activates the second column, the table might change as follows:</p>
+
+ <p><img width=414 src=http://images.whatwg.org/sample-table-sortable-2.png alt="The same table, but with the second column header's interactive affordance marked as selected, with the IP addresses sorted in numeric order (first the rows with the address ending in '3', then the row with the address ending in '29', and finally the row with the address ending in '199'." height=109><p>If the user activates the second column again, reversing the sort order, it might change as follows:</p>
+
+ <p><img width=414 src=http://images.whatwg.org/sample-table-sortable-3.png alt="The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'." height=109><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
+
<h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -59831,7 +59869,7 @@
<code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute.</p>
- <h6 id=examples-0><span class=secno>4.12.4.2.22 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.12.4.2.22 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
@@ -63761,7 +63799,7 @@
- <h5 id=examples-1><span class=secno>5.4.1.2 </span>Examples</h5>
+ <h5 id=examples-0><span class=secno>5.4.1.2 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -64524,7 +64562,7 @@
- <h5 id=examples-2><span class=secno>5.4.2.2 </span>Examples</h5>
+ <h5 id=examples-1><span class=secno>5.4.2.2 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -64675,7 +64713,7 @@
</dd>
- </dl><h5 id=examples-3><span class=secno>5.4.3.1 </span>Examples</h5>
+ </dl><h5 id=examples-2><span class=secno>5.4.3.1 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -82320,7 +82358,7 @@
<pre>port1.postMessage(['hello', 'world']);</pre>
- <h5 id=examples-4><span class=secno>9.5.1.1 </span>Examples</h5>
+ <h5 id=examples-3><span class=secno>9.5.1.1 </span>Examples</h5>
<p><i>This section is non-normative.</i></p>
@@ -83303,7 +83341,7 @@
high per-instance memory cost.</p>
- <h4 id=examples-5><span class=secno>10.1.2 </span>Examples</h4>
+ <h4 id=examples-4><span class=secno>10.1.2 </span>Examples</h4>
<p><i>This section is non-normative.</i></p>
Modified: source
===================================================================
--- source 2014-03-22 07:59:40 UTC (rev 8557)
+++ source 2014-04-01 04:40:24 UTC (rev 8558)
@@ -35946,8 +35946,10 @@
<p>For historical reasons, the <code data-x="rel-icon">icon</code> keyword may be preceded by the
keyword "<code data-x="">shortcut</code>". If the "<code data-x="">shortcut</code>" keyword is
- present, it must be come immediately before the <code data-x="rel-icon">icon</code> keyword and the
- two keywords must be separated by only a single U+0020 SPACE character.</p>
+ present, the <code data-x="attr-hyperlink-rel">rel</code> attribute's entire value must be an
+ <span>ASCII case-insensitive</span> match for the string "<code
+ data-x="">shortcut icon</code>" (with a single U+0020 SPACE character between the tokens and
+ no other <span data-x="space character">space characters</span>).</p>
<h5>Link type "<dfn data-x="rel-license"><code>license</code></dfn>"</h5>
@@ -40521,7 +40523,7 @@
</div>
- <h4>Examples</h4>
+ <h4 id="table-examples">Examples</h4>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
@@ -40730,8 +40732,53 @@
<td> 11.6% <td> 12.3% <td> 12.6%
</table>
+ <hr>
+ <p>Sometimes, tables are used for dense data. For examples, here a table is used to show entries
+ in an access log:</p>
+ <pre><table sortable>
+ <thead>
+ <tr>
+ <th sorted> Timestamp
+ <th> IP
+ <th> Message
+ <tbody>
+ <tr>
+ <td> <time>21:01</time>
+ <td> 128.30.52.199
+ <td> Exceeded ingress limit
+ <tr>
+ <td> <time>21:04</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+ <tr>
+ <td> <time>22:35</time>
+ <td> 128.30.52.29
+ <td> Malware command request blocked
+ <tr>
+ <td> <time>22:36</time>
+ <td> 128.30.52.3
+ <td> Authentication failure
+</table></pre>
+
+ <p>Because the <code>table</code> element has a <code data-x="attr-table-sortable">sortable</code>
+ attribute, the column headers can be selected to change the table's sort order.</p>
+
+ <p>This might render as follows:</p>
+
+ <p><img width=418 height=109 src="images/sample-table-sortable-1.png" alt="The table as marked above, but with the column headers having interactive affordances to select which column to sort by, the first being already selected.">
+
+ <p>If the user activates the second column, the table might change as follows:</p>
+
+ <p><img width=414 height=109 src="images/sample-table-sortable-2.png" alt="The same table, but with the second column header's interactive affordance marked as selected, with the IP addresses sorted in numeric order (first the rows with the address ending in '3', then the row with the address ending in '29', and finally the row with the address ending in '199'.">
+
+ <p>If the user activates the second column again, reversing the sort order, it might change as follows:</p>
+
+ <p><img width=414 height=109 src="images/sample-table-sortable-3.png" alt="The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'.">
+
+
+
<h3 id="forms">Forms</h3>
<h4>Introduction</h4>
More information about the Commit-Watchers
mailing list