Skip to content
Permalink
Browse files

[c] (2) rel='shortcut icon' requirement changes; extra sample table f…

…or sorting

Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@8558 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Apr 1, 2014
1 parent 375d427 commit 427c247ba3ffd61db556b4edfd2992e3ac7e6241

<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 &mdash; Last Updated 19 March 2014</h2>
<h2 class="no-num no-toc">Living Standard &mdash; 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>
<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>
<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>
<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>
<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>
<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>

<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&nbsp;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>
</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>

<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>&lt;table sortable&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th sorted&gt; Timestamp
&lt;th&gt; IP
&lt;th&gt; Message
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt; &lt;time&gt;21:01&lt;/time&gt;
&lt;td&gt; 128.30.52.199
&lt;td&gt; Exceeded ingress limit
&lt;tr&gt;
&lt;td&gt; &lt;time&gt;21:04&lt;/time&gt;
&lt;td&gt; 128.30.52.3
&lt;td&gt; Authentication failure
&lt;tr&gt;
&lt;td&gt; &lt;time&gt;22:35&lt;/time&gt;
&lt;td&gt; 128.30.52.29
&lt;td&gt; Malware command request blocked
&lt;tr&gt;
&lt;td&gt; &lt;time&gt;22:36&lt;/time&gt;
&lt;td&gt; 128.30.52.3
&lt;td&gt; Authentication failure
&lt;/table&gt;</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>

<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>




<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>




<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>


</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>

<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>

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>

Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit 427c247

Please sign in to comment.
You can’t perform that action at this time.