HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
60087468[Authors] [Conformance Checkers] apply wg decision (add the <table border=1> talisman)2011-04-14 23:46
@@ -41519,74 +41519,91 @@ function AddCloud(data, x, y) { ... }</pre>
    <dd>In this order: optionally a <code>caption</code> element,
    followed by zero or more <code>colgroup</code> elements, followed
    optionally by a <code>thead</code> element, followed optionally by
    a <code>tfoot</code> element, followed by either zero or more
    <code>tbody</code> elements or one or more <code>tr</code>
    elements, followed optionally by a <code>tfoot</code> element (but
    there can only be one <code>tfoot</code> element child in
    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> {
            attribute <span>HTMLTableCaptionElement</span> <span title="dom-table-caption">caption</span>;
   <span>HTMLElement</span> <span title="dom-table-createCaption">createCaption</span>();
   void <span title="dom-table-deleteCaption">deleteCaption</span>();
            attribute <span>HTMLTableSectionElement</span> <span title="dom-table-tHead">tHead</span>;
   <span>HTMLElement</span> <span title="dom-table-createTHead">createTHead</span>();
   void <span title="dom-table-deleteTHead">deleteTHead</span>();
            attribute <span>HTMLTableSectionElement</span> <span title="dom-table-tFoot">tFoot</span>;
   <span>HTMLElement</span> <span title="dom-table-createTFoot">createTFoot</span>();
   void <span title="dom-table-deleteTFoot">deleteTFoot</span>();
   readonly attribute <span>HTMLCollection</span> <span title="dom-table-tBodies">tBodies</span>;
   <span>HTMLElement</span> <span title="dom-table-createTBody">createTBody</span>();
   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>
 
   <p>The <code>table</code> element <span>represents</span> data with
   more than one dimension, in the form of a <span
   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.
 
   Historically, some Web authors have misused tables in HTML as a way
   to control their page layout. This usage is non-conforming, because
   tools attempting to extract tabular data from such documents would
   obtain very confusing results.
 
   In particular, users of accessibility tools like screen readers are
   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:
 
    * "should not" implies that there may be valid reasons to use
      tables for layout, which there are not.
 
    * The second sentence appears to be grammatically incorrect, and
      more importantly, does not clearly state that use of tables for
      layout has always been a misuse. This implies it may have once
@@ -41636,43 +41653,90 @@ function AddCloud(data, x, y) { ... }</pre>
   the table to an assistive technology and to properly convey the
   intent of the author to tools that wish to extract tabular data from
   the document.</p>
 
 <!--START html--><!--START complete--><!--START epub--><!--START dev-html--><!--FORK-->
 
   <p class="note">There are a variety of alternatives to using HTML
   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>
    <dd>
     <p>Returns the table's <code>caption</code> element.</p>
     <p>Can be set, to replace the <code>caption</code> element. If the
     new value is not a <code>caption</code> element, throws a
     <code>HIERARCHY_REQUEST_ERR</code> exception.</p>
    </dd>
 
@@ -41934,20 +41998,24 @@ function AddCloud(data, x, y) { ... }</pre>
    title="dom-table-rows">rows</code> collection, the method must
    instead raise an <code>INDEX_SIZE_ERR</code> exception, and these
    steps must be aborted.</p></li>
 
    <li><p>Otherwise, the method must remove the <var
    title="">index</var>th element in the <code
    title="dom-table-rows">rows</code> collection from its parent.</p>
 
   </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">
 
    <p>Here is an example of a table being used to mark up a Sudoku
    puzzle. Observe the lack of headers, which are not necessary in
    such a table.</p>
 
    <pre>&lt;section>
  &lt;style scoped>
@@ -41971,20 +42039,22 @@ function AddCloud(data, x, y) { ... }</pre>
   &lt;tbody>
    &lt;tr> &lt;td> 6 &lt;td>   &lt;td>   &lt;td>   &lt;td> 5 &lt;td>   &lt;td>   &lt;td>   &lt;td> 2
    &lt;tr> &lt;td>   &lt;td>   &lt;td>   &lt;td>   &lt;td> 7 &lt;td>   &lt;td>   &lt;td>   &lt;td>
    &lt;tr> &lt;td> 9 &lt;td>   &lt;td>   &lt;td> 8 &lt;td>   &lt;td> 2 &lt;td>   &lt;td>   &lt;td> 5
  &lt;/table>
 &lt;/section></pre>
 
   </div>
 
 
+
+
   <h5 id="table-descriptions-techniques">Techniques for describing tables</h5>
 
   <p id="table-descriptions">For tables that consist of more than just
   a grid of cells with headers in the first row and headers in the
   first column, and for any table in general where the reader might
   have difficulty understanding the content, authors should include
   explanatory information introducing the table. This information is
   useful for all users, but is especially useful for users who cannot
   see the table, e.g. users of screen readers.</p>
 
@@ -42198,20 +42268,49 @@ side in the right column.&lt;/p>
   &lt;tr>
    &lt;th> Grade
    &lt;td> Failing
    &lt;td> Passing
 &lt;/table></pre>
 
   </div>
 
 
 
+  <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>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd>None.</dd>
    <dt>Contexts in which this element can be used:</dt>
    <dd>As the first element child of a <code>table</code> element.</dd>
    <dt>Content model:</dt>
    <dd><span>Flow content</span>, but with no descendant <code>table</code> elements.</dd>
@@ -104587,21 +104686,20 @@ if (s = prompt('What is your name?')) {
    <dt><dfn title="attr-menu-compact"><code>compact</code></dfn> on <code>menu</code> elements</dt>
    <dt><dfn title="attr-object-align"><code>align</code></dfn> on <code>object</code> elements</dt>
    <dt><dfn title="attr-object-border"><code>border</code></dfn> on <code>object</code> elements</dt>
    <dt><dfn title="attr-object-hspace"><code>hspace</code></dfn> on <code>object</code> elements</dt>
    <dt><dfn title="attr-object-vspace"><code>vspace</code></dfn> on <code>object</code> elements</dt>
    <dt><dfn title="attr-ol-compact"><code>compact</code></dfn> on <code>ol</code> elements</dt>
    <dt><dfn title="attr-p-align"><code>align</code></dfn> on <code>p</code> elements</dt>
    <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>
    <dt><dfn title="attr-table-rules"><code>rules</code></dfn> on <code>table</code> elements</dt>
    <dt><dfn title="attr-table-width"><code>width</code></dfn> on <code>table</code> elements</dt>
    <dt><dfn title="attr-tbody-align"><code>align</code></dfn> on <code>tbody</code>, <code>thead</code>, and <code>tfoot</code> elements</dt>
    <dt><dfn title="attr-tbody-char"><code>char</code></dfn> on <code>tbody</code>, <code>thead</code>, and <code>tfoot</code> elements</dt>
    <dt><dfn title="attr-tbody-charoff"><code>charoff</code></dfn> on <code>tbody</code>, <code>thead</code>, and <code>tfoot</code> elements</dt>
    <dt><dfn title="attr-tbody-vAlign"><code>valign</code></dfn> on <code>tbody</code>, <code>thead</code>, and <code>tfoot</code> elements</dt>
    <dt><dfn title="attr-tdth-align"><code>align</code></dfn> on <code>td</code> and <code>th</code> elements</dt>
@@ -104617,20 +104715,33 @@ if (s = prompt('What is your name?')) {
    <dt><dfn title="attr-tr-char"><code>char</code></dfn> on <code>tr</code> elements</dt>
    <dt><dfn title="attr-tr-charoff"><code>charoff</code></dfn> on <code>tr</code> elements</dt>
    <dt><dfn title="attr-tr-valign"><code>valign</code></dfn> on <code>tr</code> elements</dt>
    <dt><dfn title="attr-ul-compact"><code>compact</code></dfn> on <code>ul</code> elements</dt>
    <dt><dfn title="attr-ul-type"><code>type</code></dfn> on <code>ul</code> elements</dt>
    <dt><dfn title="attr-background"><code>background</code></dfn> on <code>body</code>, <code>table</code>, <code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>td</code>, and <code>th</code> elements</dt>
    <dd><p>Use CSS instead.</p></dd>
 
   </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">
 
   <h3>Requirements for implementations</h3>
 
   <h4>The <dfn><code>applet</code></dfn> element</h4>
 
   <p>The <code>applet</code> element is a Java-specific variant of the
   <code>embed</code> element. The <code>applet</code> element is now
   obsoleted so that all extension frameworks (Java, .NET, Flash, etc)
@@ -105767,31 +105878,29 @@ interface <span>HTMLScriptElement</span> {
   <dfn title="dom-script-htmlFor"><code>htmlFor</code></dfn> IDL
   attributes of the <code>script</code> element must return the empty
   string on getting, and do nothing on setting.</p>
 
   <hr>
 
   <pre class="idl">[Supplemental]
 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>;
            attribute DOMString <span title="dom-table-rules">rules</span>;
            attribute DOMString <span title="dom-table-summary">summary</span>;
            attribute DOMString <span title="dom-table-width">width</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
   title="dom-table-width"><code>width</code></dfn>, IDL attributes of
   the <code>table</code> element must <span>reflect</span> the
   respective content attributes of the same name.</p>
 
   <p>The <dfn title="dom-table-bgColor"><code>bgColor</code></dfn> IDL
   attribute of the <code>table</code> element must <span>reflect</span>
   the element's <code title="attr-table-bgcolor">bgcolor</code> content
@@ -108075,21 +108184,22 @@ interface <span>HTMLDocument</span> {
      <th><code>table</code></th>
      <td>Table</td>
      <td><span title="Flow content">flow</span></td>
      <td><span title="Flow content">flow</span></td>
      <td><code>caption</code>*;
          <code>colgroup</code>*;
          <code>thead</code>*;
          <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>
 
     <tr>
      <th><code>tbody</code></th>
      <td>Group of rows in a table</td>
      <td>none</td>
      <td><code>table</code></td>
      <td><code>tr</code></td>
      <td><span title="global attributes">globals</span></td>
@@ -108708,20 +108818,25 @@ interface <span>HTMLDocument</span> {
           <code title="attr-fe-autofocus">textarea</code>
      <td> Automatically focus the form control when the page is loaded
      <td> <span>Boolean attribute</span>
     <tr>
      <th> <code title="">autoplay</code>
      <td> <code title="attr-media-autoplay">audio</code>;
           <code title="attr-media-autoplay">video</code>
      <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
      <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code title="">charset</code>
      <td> <code title="attr-meta-charset">meta</code>
      <td> <span>Character encoding declaration</span>
      <td> <span>Preferred MIME name</span> of an encoding*
     <tr>

|