Permalink
Browse files

[ac] (1) apply wg decision (add the <table border=1> talisman)

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...
1 parent c2695e1 commit 026606a2416d132eef4f93e2a2ddfcd7a577fb3c @Hixie Hixie committed Apr 14, 2011
Showing with 386 additions and 93 deletions.
  1. +122 −33 complete.html
  2. +122 −33 index
  3. +142 −27 source
View
155 complete.html
@@ -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>
@@ -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> {
@@ -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
@@ -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:
@@ -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
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>;
@@ -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>
@@ -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>
@@ -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
View
155 index
@@ -664,7 +664,8 @@
<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>
@@ -37414,6 +37415,7 @@ function AddCloud(data, x, y) { ... }</pre>
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> {
@@ -37431,21 +37433,38 @@ function AddCloud(data, x, y) { ... }</pre>
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
@@ -37456,15 +37475,6 @@ function AddCloud(data, x, y) { ... }</pre>
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:
@@ -37509,28 +37519,58 @@ function AddCloud(data, x, y) { ... }</pre>
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
@@ -37778,7 +37818,11 @@ function AddCloud(data, x, y) { ... }</pre>
<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>
@@ -37815,6 +37859,8 @@ function AddCloud(data, x, y) { ... }</pre>
</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
@@ -38029,6 +38075,35 @@ side in the right column.&lt;/p&gt;
+ <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>
@@ -88187,7 +88262,6 @@ if (s = prompt('What is your name?')) {
<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>
@@ -88215,7 +88289,18 @@ if (s = prompt('What is your name?')) {
<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>14.3 </span>Requirements for implementations</h3>
@@ -89130,7 +89215,6 @@ interface <a href=#htmlscriptelement>HTMLScriptElement</a> {
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>;
@@ -89139,7 +89223,7 @@ interface <a href=#htmltableelement>HTMLTableElement</a> {
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>
@@ -91051,7 +91135,8 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<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>
@@ -91598,6 +91683,10 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<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
View
169 source
@@ -41526,6 +41526,7 @@ function AddCloud(data, x, y) { ... }</pre>
total).</dd>
<dt>Content attributes:</dt>
<dd><span>Global attributes</span></dd>
+ <dd><code title="attr-table-border">border</code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn>HTMLTableElement</dfn> : <span>HTMLElement</span> {
@@ -41543,6 +41544,7 @@ function AddCloud(data, x, y) { ... }</pre>
readonly attribute <span>HTMLCollection</span> <span title="dom-table-rows">rows</span>;
<span>HTMLElement</span> <span title="dom-table-insertRow">insertRow</span>(in optional long index);
void <span title="dom-table-deleteRow">deleteRow</span>(in long index);
+ attribute DOMString <span title="dom-table-border">border</span>;
};</pre>
</dd>
</dl>
@@ -41552,12 +41554,36 @@ function AddCloud(data, x, y) { ... }</pre>
title="concept-table">table</span>.</p>
<div class="impl">
-
<p>The <code>table</code> element takes part in the <span>table
model</span>.</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 <span>table model</span>.</p>
</div>
+ <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>
+
+ <div class="impl">
+ <p>If a <code>table</code> element has a <code
+ title="attr-table-summary">summary</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>
+
<!--END w3c-html--><!--FORK-->
<p>Tables must not be used as layout aids.
@@ -41571,15 +41597,6 @@ function AddCloud(data, x, y) { ... }</pre>
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:
@@ -41643,29 +41660,76 @@ function AddCloud(data, x, y) { ... }</pre>
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 title="attr-table-border"><code>border</code></dfn>
+ attribute may be specified on a <code>table</code> element to
+ explicitly indicate that the <code>table</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 <span>table model</span>.</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
+<!--END w3c-html--><!--FORK-->
+ (non-conforming)
+<!--START w3c-html--><!--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>table</code> element has a <code
- title="attr-table-summary">summary</code> attribute, the user agent
- may report the contents of that attribute to the user.</p>
+ <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">border</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">cellspacing</code> and <code title="attr-table-cellpadding">cellpadding</code> attributes with the value 0
+ <td>Probably a layout table
+ <tbody>
+ <tr>
+ <td>The use of <code>caption</code>, <code>thead</code>, or <code>th</code> elements
+ <td>Probably a non-layout table
+ <tr>
+ <td>The use of the <code title="attr-tdth-headers">headers</code> and <code title="attr-th-scope">scope</code> attributes
+ <td>Probably a non-layout table
+ <tr>
+ <td>The use of the <code title="attr-table-border">border</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">summary</code> attribute
+ <td>Not a good indicator (both layout and non-layout tables have historically been given this attribute)
+ </table>
</div>
+ <hr>
+
<dl class="domintro">
<dt><var title="">table</var> . <code title="dom-table-caption">caption</code> [ = <var title="">value</var> ]</dt>
@@ -41941,6 +42005,10 @@ function AddCloud(data, x, y) { ... }</pre>
</ol>
+ <p>The <dfn title="dom-table-border"><code>border</code></dfn> IDL
+ attribute must <span>reflect</span> the content attribute of the
+ same name.</p>
+
</div>
<div class="example">
@@ -41978,6 +42046,8 @@ function AddCloud(data, x, y) { ... }</pre>
</div>
+
+
<h5 id="table-descriptions-techniques">Techniques for describing tables</h5>
<p id="table-descriptions">For tables that consist of more than just
@@ -42205,6 +42275,35 @@ side in the right column.&lt;/p>
+ <h5 id="table-layout-techniques">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>The <dfn><code>caption</code></dfn> element</h4>
@@ -104594,7 +104693,6 @@ if (s = prompt('What is your name?')) {
<dt><dfn title="attr-pre-width"><code>width</code></dfn> on <code>pre</code> elements</dt>
<dt><dfn title="attr-table-align"><code>align</code></dfn> on <code>table</code> elements</dt>
<dt><dfn title="attr-table-bgcolor"><code>bgcolor</code></dfn> on <code>table</code> elements</dt>
- <dt><dfn title="attr-table-border"><code>border</code></dfn> on <code>table</code> elements</dt>
<dt><dfn title="attr-table-cellpadding"><code>cellpadding</code></dfn> on <code>table</code> elements</dt>
<dt><dfn title="attr-table-cellspacing"><code>cellspacing</code></dfn> on <code>table</code> elements</dt>
<dt><dfn title="attr-table-frame"><code>frame</code></dfn> on <code>table</code> elements</dt>
@@ -104624,6 +104722,19 @@ if (s = prompt('What is your name?')) {
</dl>
+ <hr>
+
+ <p>The <code title="attr-table-border">border</code> attribute on
+ the <code>table</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">border</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">
@@ -105774,7 +105885,6 @@ interface <span>HTMLScriptElement</span> {
interface <span>HTMLTableElement</span> {
attribute DOMString <span title="dom-table-align">align</span>;
attribute DOMString <span title="dom-table-bgColor">bgColor</span>;
- attribute DOMString <span title="dom-table-border">border</span>;
attribute DOMString <span title="dom-table-cellPadding">cellPadding</span>;
attribute DOMString <span title="dom-table-cellSpacing">cellSpacing</span>;
attribute DOMString <span title="dom-table-frame">frame</span>;
@@ -105784,7 +105894,6 @@ interface <span>HTMLTableElement</span> {
};</pre>
<p>The <dfn title="dom-table-align"><code>align</code></dfn>, <dfn
- title="dom-table-border"><code>border</code></dfn>, <dfn
title="dom-table-frame"><code>frame</code></dfn>, <dfn
title="dom-table-summary"><code>summary</code></dfn>, <dfn
title="dom-table-rules"><code>rules</code></dfn>, and <dfn
@@ -108082,7 +108191,8 @@ interface <span>HTMLDocument</span> {
<code>tbody</code>*;
<code>tfoot</code>*;
<code>tr</code>*</td>
- <td><span title="global attributes">globals</span></td>
+ <td><span title="global attributes">globals</span>;
+ <code title="attr-table-border">border</code></td>
<td><code>HTMLTableElement</code></td>
</tr>
@@ -108715,6 +108825,11 @@ interface <span>HTMLDocument</span> {
<td> Hint that the <span>media resource</span> can be started automatically when the page is loaded
<td> <span>Boolean attribute</span>
<tr>
+ <th> <code title="">border</code>
+ <td> <code title="attr-table-border">border</code>
+ <td> Explicit indication that the <code>table</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">keygen</code>
<td> String to package with the generated and signed public key

0 comments on commit 026606a

Please sign in to comment.