Skip to content

Commit

Permalink
[ac] (1) apply wg decision (add the <table border=1> talisman)
Browse files Browse the repository at this point in the history 
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=7468

git-svn-id: http://svn.whatwg.org/webapps@6008 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Apr 14, 2011
1 parent c2695e1 commit 026606a
Show file tree
Hide file tree
Showing 3 changed files with 386 additions and 93 deletions.
155 changes: 122 additions & 33 deletions complete.html
View file
Expand Up @@ -656,7 +656,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<ol>
<li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a>
<ol>
<li><a href=#table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques for describing tables</a></ol></li>
<li><a href=#table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques for describing tables</a></li>
<li><a href=#table-layout-techniques><span class=secno>4.9.1.2 </span>Techniques for table layout</a></ol></li>
<li><a href=#the-caption-element><span class=secno>4.9.2 </span>The <code>caption</code> element</a></li>
<li><a href=#the-colgroup-element><span class=secno>4.9.3 </span>The <code>colgroup</code> element</a></li>
<li><a href=#the-col-element><span class=secno>4.9.4 </span>The <code>col</code> element</a></li>
Expand Down Expand Up @@ -37402,6 +37403,7 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
total).</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dd><code title=attr-table-border><a href=#attr-table-border>border</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class=idl>interface <dfn id=htmltableelement>HTMLTableElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
Expand All @@ -37419,21 +37421,38 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
readonly attribute <a href=#htmlcollection>HTMLCollection</a> <a href=#dom-table-rows title=dom-table-rows>rows</a>;
<a href=#htmlelement>HTMLElement</a> <a href=#dom-table-insertrow title=dom-table-insertRow>insertRow</a>(in optional long index);
void <a href=#dom-table-deleterow title=dom-table-deleteRow>deleteRow</a>(in long index);
attribute DOMString <a href=#dom-table-border title=dom-table-border>border</a>;
};</pre>
</dd>
</dl><p>The <code><a href=#the-table-element>table</a></code> element <a href=#represents>represents</a> data with
more than one dimension, in the form of a <a href=#concept-table title=concept-table>table</a>.</p>

<div class=impl>

<p>The <code><a href=#the-table-element>table</a></code> element takes part in the <a href=#table-model>table
model</a>.</p>
</div>

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

<div class=impl>
<p class=note>Precise rules for determining whether this
conformance requirement is met are described in the description of
the <a href=#table-model>table model</a>.</p>
</div>

<!--FORK-->
<hr><p>Authors are encouraged to provide information describing how to
interpret complex tables. Guidance on how <a href=#table-descriptions-techniques>provide such information</a>
is given below.</p>

<p>Tables must not be used as layout aids.
<div class=impl>
<p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, and the user
agent has not classified the table as a layout table, the user agent
may report the contents of that attribute to the user.</p>
</div>

<hr><!--FORK--><p>Tables must not be used as layout aids.

Historically, some Web authors have misused tables in HTML as a way
to control their page layout. This usage is non-conforming, because
Expand All @@ -37444,15 +37463,6 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
likely to find it very difficult to navigate pages with tables used
for layout.</p>

<div class=impl>

<p>User agents that do table analysis on arbitrary content are
encouraged to find heuristics to determine which tables actually
contain data and which are merely being used for layout. This
specification does not define a precise heuristic.</p>

</div>

<!-- The paragraph below replaces the above one in the W3C copy due
to a WG decision. It is not used in the WHATWG copy for the
following reasons:
Expand Down Expand Up @@ -37497,28 +37507,58 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
tables for layout, primarily using CSS positioning and the CSS table
model.</p>

<p>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.</p>
<p>The <dfn id=attr-table-border title=attr-table-border><code>border</code></dfn>
attribute may be specified on a <code><a href=#the-table-element>table</a></code> element to
explicitly indicate that the <code><a href=#the-table-element>table</a></code> element is not being
used for layout purposes. If specified, the attribute's value must
either be the empty string or the value "<code title="">1</code>".
The attribute is used by certain user agents as an indication that
borders should be drawn around cells of the table.</p>

<div class=impl>
<p class=note>Precise rules for determining whether this
conformance requirement is met are described in the description of
the <a href=#table-model>table model</a>.</p>
<p>Tables can be complicated to understand and navigate. To help
users with this, user agents should clearly dilineate cells in a
table from each other, unless the user agent has classified the
table as a
<!--FORK-->
(non-conforming)
<!--FORK-->
layout table.</p>
</div>

<p>Authors are encouraged to provide information describing how to
interpret complex tables. Guidance on how <a href=#table-descriptions-techniques>provide such information</a>
is given below.</p>
<p class=note>Authors <span class=impl>and implementors</span>
are encouraged to consider using some of the <a href=#table-layout-techniques>table layout techniques</a>
described below to make tables easier to navigate for users.</p>

<div class=impl>

<p>If a <code><a href=#the-table-element>table</a></code> element has a <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute, the user agent
may report the contents of that attribute to the user.</p>

</div>
<p>User agents, especially those that do table analysis on arbitrary
content, are encouraged to find heuristics to determine which tables
actually contain data and which are merely being used for layout.
This specification does not define a precise heuristic, but the
following are suggested as possible indicators:</p>

<table><thead><tr><th>Feature
<th>Indication
<tbody><tr><td>The use of the <code title=attr-aria-role>role</code> attribute with the value <code title=attr-aria-role-presentation>presentation</code>
<td>Probably a layout table
<tr><td>The use of the <code title=attr-table-border><a href=#attr-table-border>border</a></code> attribute with the non-conforming value 0
<td>Probably a layout table
<tr><td>The use of the non-conforming <code title=attr-table-cellspacing><a href=#attr-table-cellspacing>cellspacing</a></code> and <code title=attr-table-cellpadding><a href=#attr-table-cellpadding>cellpadding</a></code> attributes with the value 0
<td>Probably a layout table
<tbody><tr><td>The use of <code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>, or <code><a href=#the-th-element>th</a></code> elements
<td>Probably a non-layout table
<tr><td>The use of the <code title=attr-tdth-headers><a href=#attr-tdth-headers>headers</a></code> and <code title=attr-th-scope><a href=#attr-th-scope>scope</a></code> attributes
<td>Probably a non-layout table
<tr><td>The use of the <code title=attr-table-border><a href=#attr-table-border>border</a></code> attribute with a value other than 0
<td>Probably a non-layout table
<tr><td>Explicit visible borders set using CSS
<td>Probably a non-layout table
<tbody><tr><td>The use of the <code title=attr-table-summary><a href=#attr-table-summary>summary</a></code> attribute
<td>Not a good indicator (both layout and non-layout tables have historically been given this attribute)
</table></div>

<dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
<hr><dl class=domintro><dt><var title="">table</var> . <code title=dom-table-caption><a href=#dom-table-caption>caption</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the table's <code><a href=#the-caption-element>caption</a></code> element.</p>
<p>Can be set, to replace the <code><a href=#the-caption-element>caption</a></code> element. If the
Expand Down Expand Up @@ -37766,7 +37806,11 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co

<li><p>Otherwise, the method must remove the <var title="">index</var>th element in the <code title=dom-table-rows><a href=#dom-table-rows>rows</a></code> collection from its parent.</p>

</ol></div>
</ol><p>The <dfn id=dom-table-border title=dom-table-border><code>border</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>

</div>

<div class=example>

Expand Down Expand Up @@ -37803,6 +37847,8 @@ <h4 id=the-table-element><span class=secno>4.9.1 </span>The <dfn><code>table</co
</div>




<h5 id=table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques for describing tables</h5>

<p id=table-descriptions>For tables that consist of more than just
Expand Down Expand Up @@ -38017,6 +38063,35 @@ <h5 id=table-descriptions-techniques><span class=secno>4.9.1.1 </span>Techniques



<h5 id=table-layout-techniques><span class=secno>4.9.1.2 </span>Techniques for table layout</h5>

<p>Good table layout is key to making tables more readable and usable.</p>

<p>In visual media, providing column and row borders and alternating
row backgrounds can be very effective to make complicated tables
more readable.</p>

<p>For tables with large volumes of numeric content, using
monospaced fonts can help users see patterns, especially in
situations where a user agent does not render the borders.
(Unfortunately, for historical reasons, not rendering borders on
tables is a common default.)</p>

<p>In speech media, table cells can be distinguished by reporting
the corresponding headers before reading the cell's contents, and by
allowing users to navigate the table in a grid fashion, rather than
serialising the entire contents of the table in source order.</p>

<p>Authors are encouraged to use CSS to achieve these effects.</p>

<div class=impl>
<p>User agents are encouraged to render tables using these
techniques whenever the page does not use CSS and the table is not
classified as a layout table.</p>
</div>




<h4 id=the-caption-element><span class=secno>4.9.2 </span>The <dfn><code>caption</code></dfn> element</h4>

Expand Down Expand Up @@ -92222,7 +92297,6 @@ <h3 id=non-conforming-features><span class=secno>16.2 </span>Non-conforming feat
<dt><dfn id=attr-pre-width title=attr-pre-width><code>width</code></dfn> on <code><a href=#the-pre-element>pre</a></code> elements</dt>
<dt><dfn id=attr-table-align title=attr-table-align><code>align</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
<dt><dfn id=attr-table-bgcolor title=attr-table-bgcolor><code>bgcolor</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
<dt><dfn id=attr-table-border title=attr-table-border><code>border</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
<dt><dfn id=attr-table-cellpadding title=attr-table-cellpadding><code>cellpadding</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
<dt><dfn id=attr-table-cellspacing title=attr-table-cellspacing><code>cellspacing</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
<dt><dfn id=attr-table-frame title=attr-table-frame><code>frame</code></dfn> on <code><a href=#the-table-element>table</a></code> elements</dt>
Expand Down Expand Up @@ -92250,7 +92324,18 @@ <h3 id=non-conforming-features><span class=secno>16.2 </span>Non-conforming feat
<dt><dfn id=attr-background title=attr-background><code>background</code></dfn> on <code><a href=#the-body-element-0>body</a></code>, <code><a href=#the-table-element>table</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, and <code><a href=#the-th-element>th</a></code> elements</dt>
<dd><p>Use CSS instead.</dd>

</dl><div class=impl>
</dl><hr><p>The <code title=attr-table-border><a href=#attr-table-border>border</a></code> attribute on
the <code><a href=#the-table-element>table</a></code> element can be used to provide basic fallback
styling for the purpose of making tables legible in browsing
environements where CSS support is limited or absent, such as
text-based browsers, WYSIWYG editors, and in situations where CSS
support is disabled or the style sheet is lost. Only the empty
string and the value "<code title="">1</code>" may be used as <code title=attr-table-border><a href=#attr-table-border>border</a></code> values for this purpose.
Other values are considered obsolete. To regulate the thickness of
such borders, authors should instead use CSS.</p>


<div class=impl>

<h3 id=requirements-for-implementations><span class=secno>16.3 </span>Requirements for implementations</h3>

Expand Down Expand Up @@ -93165,7 +93250,6 @@ <h4 id=other-elements,-attributes-and-apis><span class=secno>16.3.4 </span>Other
interface <a href=#htmltableelement>HTMLTableElement</a> {
attribute DOMString <a href=#dom-table-align title=dom-table-align>align</a>;
attribute DOMString <a href=#dom-table-bgcolor title=dom-table-bgColor>bgColor</a>;
attribute DOMString <a href=#dom-table-border title=dom-table-border>border</a>;
attribute DOMString <a href=#dom-table-cellpadding title=dom-table-cellPadding>cellPadding</a>;
attribute DOMString <a href=#dom-table-cellspacing title=dom-table-cellSpacing>cellSpacing</a>;
attribute DOMString <a href=#dom-table-frame title=dom-table-frame>frame</a>;
Expand All @@ -93174,7 +93258,7 @@ <h4 id=other-elements,-attributes-and-apis><span class=secno>16.3.4 </span>Other
attribute DOMString <a href=#dom-table-width title=dom-table-width>width</a>;
};</pre>

<p>The <dfn id=dom-table-align title=dom-table-align><code>align</code></dfn>, <dfn id=dom-table-border title=dom-table-border><code>border</code></dfn>, <dfn id=dom-table-frame title=dom-table-frame><code>frame</code></dfn>, <dfn id=dom-table-summary title=dom-table-summary><code>summary</code></dfn>, <dfn id=dom-table-rules title=dom-table-rules><code>rules</code></dfn>, and <dfn id=dom-table-width title=dom-table-width><code>width</code></dfn>, IDL attributes of
<p>The <dfn id=dom-table-align title=dom-table-align><code>align</code></dfn>, <dfn id=dom-table-frame title=dom-table-frame><code>frame</code></dfn>, <dfn id=dom-table-summary title=dom-table-summary><code>summary</code></dfn>, <dfn id=dom-table-rules title=dom-table-rules><code>rules</code></dfn>, and <dfn id=dom-table-width title=dom-table-width><code>width</code></dfn>, IDL attributes of
the <code><a href=#the-table-element>table</a></code> element must <a href=#reflect>reflect</a> the
respective content attributes of the same name.</p>

Expand Down Expand Up @@ -95086,7 +95170,8 @@ <h3 class=no-num id=elements-1>Elements</h3>
<code><a href=#the-tbody-element>tbody</a></code>*;
<code><a href=#the-tfoot-element>tfoot</a></code>*;
<code><a href=#the-tr-element>tr</a></code>*</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-table-border><a href=#attr-table-border>border</a></code></td>
<td><code><a href=#htmltableelement>HTMLTableElement</a></code></td>
<tr><th><code><a href=#the-tbody-element>tbody</a></code></th>
<td>Group of rows in a table</td>
Expand Down Expand Up @@ -95633,6 +95718,10 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<code title=attr-media-autoplay><a href=#attr-media-autoplay>video</a></code>
<td> Hint that the <a href=#media-resource>media resource</a> can be started automatically when the page is loaded
<td> <a href=#boolean-attribute>Boolean attribute</a>
<tr><th> <code title="">border</code>
<td> <code title=attr-table-border><a href=#attr-table-border>border</a></code>
<td> Explicit indication that the <code><a href=#the-table-element>table</a></code> element is not being used for layout purposes
<td> The empty string, or "<code title="">1</code>"
<tr><th> <code title="">challenge</code>
<td> <code title=attr-keygen-challenge><a href=#attr-keygen-challenge>keygen</a></code>
<td> String to package with the generated and signed public key
Expand Down

0 comments on commit 026606a

Please sign in to comment.