tabular-data.html 150 KB

Raw Blame History Permalink

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US-x-Hixie" ><head><title>4.9 Tabular data &#8212; HTML5 </title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   dt dfn { font-style: italic; }
   pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
   pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
   pre em { font-weight: bolder; font-style: normal; }
   @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead, table tbody { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table tbody th { text-align: left; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }

   .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
   .matrix, .matrix td { border: none; text-align: right; }
   .matrix { margin-left: 2em; }
   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   img.extra { float: right; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
   pre.css:first-line { color: #AAAA50; }
   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
   hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
   dl.domintro dd p { margin: 0.5em 0; }
   dl.switch { padding-left: 2em; }
   dl.switch > dt { text-indent: -1.5em; }
   dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
   dl.triple { padding: 0 0 0 1em; }
   dl.triple dt, dl.triple dd { margin: 0; display: inline }
   dl.triple dt:after { content: ':'; }
   dl.triple dd:after { content: '\A'; white-space: pre; }
   .diff-old { text-decoration: line-through; color: silver; background: transparent; }
   .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
   a .diff-new { border-bottom: 1px blue solid; }

   h2 { page-break-before: always; }
   h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
   h1 + h2, hr + h2.no-toc { page-break-before: auto; }

   p  > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
   li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }

   div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
   div.head p { margin: 0; }
   div.head h1 { margin: 0; }
   div.head .logo { float: right; margin: 0 1em; }
   div.head .logo img { border: none } /* remove border from top image */
   div.head dl { margin: 1em 0; }
   div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }

   body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
   body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
   body > .toc > li > * { margin-bottom: 0.5em; }
   body > .toc > li > * > li > * { margin-bottom: 0.25em; }
   .toc, .toc li { list-style: none; }

   .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
   .brief li { margin: 0; padding: 0; }
   .brief li p { margin: 0; padding: 0; }

   .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
   .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
   .category-list li { display: inline; }
   .category-list li:not(:last-child)::after { content: ', '; }
   .category-list li > span, .category-list li > a { text-transform: lowercase; }
   .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */

   .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .XXX > :first-child { margin-top: 0; }
   p .XXX { line-height: 3em; }
   .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
   .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
   .annotation :link, .annotation :visited { color: inherit; }
   .annotation :link:hover, .annotation :visited:hover { background: transparent; }
   .annotation span { border: none ! important; }
   .note { color: green; background: transparent; font-family: sans-serif; }
   .warning { color: red; background: transparent; }
   .note, .warning { font-weight: bolder; font-style: italic; }
   p.note, div.note { padding: 0.5em 2em; }
   span.note { padding: 0 2em; }
   .note p:first-child, .warning p:first-child { margin-top: 0; }
   .note p:last-child, .warning p:last-child { margin-bottom: 0; }
   .warning:before { font-style: normal; }
   p.note:before { content: 'Note: '; }
   p.warning:before { content: '\26A0 Warning! '; }

   .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
   .bookkeeping { font-size: 0.8em; margin: 2em 0; }
   .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
   .bookkeeping dt { margin: 0.5em 2em 0; }
   .bookkeeping dd { margin: 0 3em 0.5em; }

   h4 { position: relative; z-index: 3; }
   h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
   .element {
     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;
     position: relative;
     z-index: 1;
   }
   .element:before {
     position: absolute;
     z-index: 2;
     top: 0;
     left: -1.15em;
     height: 2em;
     width: 0.9em;
     background: #EEEEFF;
     content: ' ';
     border-style: none none solid solid;
     border-color: #9999FF;
     border-width: 0.25em;
   }

   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
   td > .example:only-child { margin: 0 0 0 0.1em; }

   ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
   ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
   ul.domTree li li { list-style: none; }
   ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree span { font-style: italic; font-family: serif; }
   ul.domTree .t1 code { color: purple; font-weight: bold; }
   ul.domTree .t2 { font-style: normal; font-family: monospace; }
   ul.domTree .t2 .name { color: black; font-weight: bold; }
   ul.domTree .t2 .value { color: blue; font-weight: normal; }
   ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
   ul.domTree .t7 code, .domTree .t8 code { color: green; }
   ul.domTree .t10 code { color: teal; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
   #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
   #configUI p label { display: block; }
   #configUI #updateUI, #configUI .loginUI { text-align: center; }
   #configUI input[type=button] { display: block; margin: auto; }

   fieldset { margin: 1em; padding: 0.5em 1em; }
   fieldset > legend + * { margin-top: 0; }
   fieldset > :last-child { margin-bottom: 0; }
   fieldset p { margin: 0.5em 0; }

   .stability {
     position: fixed;
     bottom: 0;
     left: 0; right: 0;
     margin: 0 auto 0 auto !important;
    z-index: 1000;
     width: 50%;
     background: maroon; color: yellow;
     -webkit-border-radius: 1em 1em 0 0;
     -moz-border-radius: 1em 1em 0 0;
     border-radius: 1em 1em 0 0;
     -moz-box-shadow: 0 0 1em #500;
     -webkit-box-shadow: 0 0 1em #500;
     box-shadow: 0 0 1em red;
     padding: 0.5em 1em;
     text-align: center;
   }
   .stability strong {
     display: block;
   }
   .stability input {
     appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
     position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
   }
   .stability input:hover {
     color: white;
     text-shadow: 0 0 2px black;
   }
   .stability input:active {
     padding: 0.3em 0.45em 0.2em 0.55em;
   }
   .stability :link, .stability :visited,
   .stability :link:hover, .stability :visited:hover {
     background: transparent;
     color: white;
   }

  </style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">

   .applies thead th > * { display: block; }
   .applies thead code { display: block; }
   .applies tbody th { whitespace: nowrap; }
   .applies td { text-align: center; }
   .applies .yes { background: yellow; }

   .matrix, .matrix td { border: hidden; text-align: right; }
   .matrix { margin-left: 2em; }

   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   td.eg { border-width: thin; text-align: center; }

   #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
   #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
   #table-example-1 caption { padding-bottom: 0.5em; }
   #table-example-1 thead, #table-example-1 tbody { border: none; }
   #table-example-1 th, #table-example-1 td { border: solid thin; }
   #table-example-1 th { font-weight: normal; }
   #table-example-1 td { border-style: none solid; vertical-align: top; }
   #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
   #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
   #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
   #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
   #table-example-1 tbody td:first-child::after { content: leader(". "); }
   #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
   #table-example-1 tbody td:first-child + td { width: 10em; }
   #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
   #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }

   .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
   .apple-table-examples * { font-family: "Times", serif; }
   .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
   .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
   .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
   .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
   .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
   .apple-table-examples td { text-align: right; vertical-align: top; }
   .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
   .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
   .apple-table-examples sup { line-height: 0; }

   .details-example img { vertical-align: top; }

   #base64-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 6em;
     column-count: 5;
     column-gap: 1em;
     -moz-column-width: 6em;
     -moz-column-count: 5;
     -moz-column-gap: 1em;
     -webkit-column-width: 6em;
     -webkit-column-count: 5;
     -webkit-column-gap: 1em;
   }
   #base64-table thead { display: none; }
   #base64-table * { border: none; }
   #base64-table tbody td:first-child:after { content: ':'; }
   #base64-table tbody td:last-child { text-align: right; }

   #named-character-references-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 30em;
     column-gap: 1em;
     -moz-column-width: 30em;
     -moz-column-gap: 1em;
     -webkit-column-width: 30em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:first-child + td,
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
   #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }

   .glyph.control { color: red; }

   @font-face {
     font-family: 'Essays1743';
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
   }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><script type="text/javascript">
   function getCookie(name) {
     var params = location.search.substr(1).split("&");
     for (var index = 0; index < params.length; index++) {
       if (params[index] == name)
         return "1";
       var data = params[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     var cookies = document.cookie.split("; ");
     for (var index = 0; index < cookies.length; index++) {
       var data = cookies[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     return null;
   }
  </script>
  <script src="link-fixup.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet"><link href="the-map-element.html" title="4.8.12 The map element" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="forms.html" title="4.10 Forms" rel="next">
  </head><body><div class="head" id="head">
<div id="multipage-common">
  <p class="stability" id="wip"><strong>This is a work in
  progress!</strong> For the latest updates from the HTML WG, possibly
  including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
  There may also be a more
  <a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
   with changes based on resolution of Last Call issues.
  <input onclick="closeWarning(this.parentNode)" type="button" value="&#9587;&#8413;"></p>
  <script type="text/javascript">
   function closeWarning(element) {
     element.parentNode.removeChild(element);
     var date = new Date();
     date.setDate(date.getDate()+4);
     document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
   }
   if (getCookie('hide-obsolescence-warning') == '1')
     setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
  </script></div>

   <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>

   <h1>HTML5</h1>
   </div><div>
   <a href="the-map-element.html" class="prev">4.8.12 The map element</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="forms.html" class="next">4.10 Forms</a>
  <ol class="toc"><li><ol><li><a href="tabular-data.html#tabular-data"><span class="secno">4.9 </span>Tabular data</a>
    <ol><li><a href="tabular-data.html#the-table-element"><span class="secno">4.9.1 </span>The <code>table</code> element</a>
      <ol><li><a href="tabular-data.html#table-descriptions-techniques"><span class="secno">4.9.1.1 </span>Techniques for describing tables</a></li><li><a href="tabular-data.html#table-layout-techniques"><span class="secno">4.9.1.2 </span>Techniques for table layout</a></li></ol></li><li><a href="tabular-data.html#the-caption-element"><span class="secno">4.9.2 </span>The <code>caption</code> element</a></li><li><a href="tabular-data.html#the-colgroup-element"><span class="secno">4.9.3 </span>The <code>colgroup</code> element</a></li><li><a href="tabular-data.html#the-col-element"><span class="secno">4.9.4 </span>The <code>col</code> element</a></li><li><a href="tabular-data.html#the-tbody-element"><span class="secno">4.9.5 </span>The <code>tbody</code> element</a></li><li><a href="tabular-data.html#the-thead-element"><span class="secno">4.9.6 </span>The <code>thead</code> element</a></li><li><a href="tabular-data.html#the-tfoot-element"><span class="secno">4.9.7 </span>The <code>tfoot</code> element</a></li><li><a href="tabular-data.html#the-tr-element"><span class="secno">4.9.8 </span>The <code>tr</code> element</a></li><li><a href="tabular-data.html#the-td-element"><span class="secno">4.9.9 </span>The <code>td</code> element</a></li><li><a href="tabular-data.html#the-th-element"><span class="secno">4.9.10 </span>The <code>th</code> element</a></li><li><a href="tabular-data.html#attributes-common-to-td-and-th-elements"><span class="secno">4.9.11 </span>Attributes common to <code>td</code> and <code>th</code> elements</a></li><li><a href="tabular-data.html#processing-model-0"><span class="secno">4.9.12 </span>Processing model</a>
      <ol><li><a href="tabular-data.html#forming-a-table"><span class="secno">4.9.12.1 </span>Forming a table</a></li><li><a href="tabular-data.html#header-and-data-cell-semantics"><span class="secno">4.9.12.2 </span>Forming relationships between data cells and header cells</a></li></ol></li><li><a href="tabular-data.html#examples"><span class="secno">4.9.13 </span>Examples</a></li></ol></li></ol></li></ol></div>

  <h3 id="tabular-data"><span class="secno">4.9 </span>Tabular data</h3><h4 id="the-table-element"><span class="secno">4.9.1 </span>The <dfn><code>table</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
   <dt>Content model:</dt>
   <dd>In this order: optionally a <code><a href="#the-caption-element">caption</a></code> element,
   followed by zero or more <code><a href="#the-colgroup-element">colgroup</a></code> elements, followed
   optionally by a <code><a href="#the-thead-element">thead</a></code> element, followed optionally by
   a <code><a href="#the-tfoot-element">tfoot</a></code> element, followed by either zero or more
   <code><a href="#the-tbody-element">tbody</a></code> elements or one or more <code><a href="#the-tr-element">tr</a></code>
   elements, followed optionally by a <code><a href="#the-tfoot-element">tfoot</a></code> element (but
   there can only be one <code><a href="#the-tfoot-element">tfoot</a></code> element child in
   total).</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#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="elements.html#htmlelement">HTMLElement</a> {
           attribute <a href="#htmltablecaptionelement">HTMLTableCaptionElement</a> <a href="#dom-table-caption" title="dom-table-caption">caption</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-table-createcaption" title="dom-table-createCaption">createCaption</a>();
  void <a href="#dom-table-deletecaption" title="dom-table-deleteCaption">deleteCaption</a>();
           attribute <a href="#htmltablesectionelement">HTMLTableSectionElement</a> <a href="#dom-table-thead" title="dom-table-tHead">tHead</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-table-createthead" title="dom-table-createTHead">createTHead</a>();
  void <a href="#dom-table-deletethead" title="dom-table-deleteTHead">deleteTHead</a>();
           attribute <a href="#htmltablesectionelement">HTMLTableSectionElement</a> <a href="#dom-table-tfoot" title="dom-table-tFoot">tFoot</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-table-createtfoot" title="dom-table-createTFoot">createTFoot</a>();
  void <a href="#dom-table-deletetfoot" title="dom-table-deleteTFoot">deleteTFoot</a>();
  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-table-tbodies" title="dom-table-tBodies">tBodies</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-table-createtbody" title="dom-table-createTBody">createTBody</a>();
  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-table-rows" title="dom-table-rows">rows</a>;
  <a href="elements.html#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="rendering.html#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><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><a href="#the-table-element">table</a></code> element has a <code title="attr-table-summary"><a href="obsolete.html#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><p>Tables should not be used as layout aids.

  Historically, many Web authors have tables in HTML as a way to
  control their page layout making it difficult to extract tabular
  data from such documents.

  In particular, users of accessibility tools, like screen readers,
  are likely to find it very difficult to navigate pages with tables
  used for layout.

  If a table is to be used for layout it must be marked with the
  attribute role="presentation" for a user agent to properly represent
  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><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>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>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
  layout table.</p>
  </div><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>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><th>Indication
   </th></tr></thead><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><td>Probably a layout table
    </td></tr><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><td>Probably a layout table
    </td></tr><tr><td>The use of the non-conforming <code title="attr-table-cellspacing"><a href="obsolete.html#attr-table-cellspacing">cellspacing</a></code> and <code title="attr-table-cellpadding"><a href="obsolete.html#attr-table-cellpadding">cellpadding</a></code> attributes with the value 0
     </td><td>Probably a layout table
   </td></tr></tbody><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><td>Probably a non-layout table
    </td></tr><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><td>Probably a non-layout table
    </td></tr><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><td>Probably a non-layout table
    </td></tr><tr><td>Explicit visible borders set using CSS
     </td><td>Probably a non-layout table
   </td></tr></tbody><tbody><tr><td>The use of the <code title="attr-table-summary"><a href="obsolete.html#attr-table-summary">summary</a></code> attribute
     </td><td>Not a good indicator (both layout and non-layout tables have historically been given this attribute)
  </td></tr></tbody></table></div><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
    new value is not a <code><a href="#the-caption-element">caption</a></code> element, throws a
    <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">caption</var> = <var title="">table</var> . <code title="dom-table-createCaption"><a href="#dom-table-createcaption">createCaption</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href="#the-caption-element">caption</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-deleteCaption"><a href="#dom-table-deletecaption">deleteCaption</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href="#the-caption-element">caption</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-tHead"><a href="#dom-table-thead">tHead</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the table's <code><a href="#the-thead-element">thead</a></code> element.</p>
    <p>Can be set, to replace the <code><a href="#the-thead-element">thead</a></code> element. If the
    new value is not a <code><a href="#the-thead-element">thead</a></code> element, throws a
    <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">thead</var> = <var title="">table</var> . <code title="dom-table-createTHead"><a href="#dom-table-createthead">createTHead</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href="#the-thead-element">thead</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-deleteTHead"><a href="#dom-table-deletethead">deleteTHead</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href="#the-thead-element">thead</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-tFoot"><a href="#dom-table-tfoot">tFoot</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the table's <code><a href="#the-tfoot-element">tfoot</a></code> element.</p>
    <p>Can be set, to replace the <code><a href="#the-tfoot-element">tfoot</a></code> element. If the
    new value is not a <code><a href="#the-tfoot-element">tfoot</a></code> element, throws a
    <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">tfoot</var> = <var title="">table</var> . <code title="dom-table-createTFoot"><a href="#dom-table-createtfoot">createTFoot</a></code>()</dt>
   <dd>
    <p>Ensures the table has a <code><a href="#the-tfoot-element">tfoot</a></code> element, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-deleteTFoot"><a href="#dom-table-deletetfoot">deleteTFoot</a></code>()</dt>
   <dd>
    <p>Ensures the table does not have a <code><a href="#the-tfoot-element">tfoot</a></code> element.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-tBodies"><a href="#dom-table-tbodies">tBodies</a></code></dt>
   <dd>
    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-tbody-element">tbody</a></code> elements of the table.</p>
   </dd>

   <dt><var title="">tbody</var> = <var title="">table</var> . <code title="dom-table-createTBody"><a href="#dom-table-createtbody">createTBody</a></code>()</dt>
   <dd>
    <p>Creates a <code><a href="#the-tbody-element">tbody</a></code> element, inserts it into the table, and returns it.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code></dt>
   <dd>
    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-tr-element">tr</a></code> elements of the table.</p>
   </dd>

   <dt><var title="">tr</var> = <var title="">table</var> . <code title="dom-table-insertRow"><a href="#dom-table-insertrow">insertRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Creates a <code><a href="#the-tr-element">tr</a></code> element, along with a <code><a href="#the-tbody-element">tbody</a></code> if required, inserts them into the table at the position given by the argument, and returns the <code><a href="#the-tr-element">tr</a></code>.</p>
    <p>The position is relative to the rows in the table. The index &#8722;1 is equivalent to inserting at the end of the table.</p>
    <p>If the given position is less than &#8722;1 or greater than the number of rows, throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">table</var> . <code title="dom-table-deleteRow"><a href="#dom-table-deleterow">deleteRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Removes the <code><a href="#the-tr-element">tr</a></code> element with the given position in the table.</p>
    <p>The position is relative to the rows in the table. The index &#8722;1 is equivalent to deleting the last row of the table.</p>
    <p>If the given position is less than &#8722;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-table-caption" title="dom-table-caption"><code>caption</code></dfn> IDL
  attribute must return, on getting, the first <code><a href="#the-caption-element">caption</a></code>
  element child of the <code><a href="#the-table-element">table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href="#the-caption-element">caption</a></code>
  element, the first <code><a href="#the-caption-element">caption</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any, must be removed, and the new
  value must be inserted as the first node of the <code><a href="#the-table-element">table</a></code>
  element. If the new value is not a <code><a href="#the-caption-element">caption</a></code> element,
  then a <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> DOM exception must be
  raised instead.</p>

  <p>The <dfn id="dom-table-createcaption" title="dom-table-createCaption"><code>createCaption()</code></dfn>
  method must return the first <code><a href="#the-caption-element">caption</a></code> element child of
  the <code><a href="#the-table-element">table</a></code> element, if any; otherwise a new
  <code><a href="#the-caption-element">caption</a></code> element must be created, inserted as the first
  node of the <code><a href="#the-table-element">table</a></code> element, and then returned.</p>

  <p>The <dfn id="dom-table-deletecaption" title="dom-table-deleteCaption"><code>deleteCaption()</code></dfn>
  method must remove the first <code><a href="#the-caption-element">caption</a></code> element child of
  the <code><a href="#the-table-element">table</a></code> element, if any.</p>

  <p>The <dfn id="dom-table-thead" title="dom-table-tHead"><code>tHead</code></dfn> IDL
  attribute must return, on getting, the first <code><a href="#the-thead-element">thead</a></code>
  element child of the <code><a href="#the-table-element">table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href="#the-thead-element">thead</a></code>
  element, the first <code><a href="#the-thead-element">thead</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any, must be removed, and the new
  value must be inserted immediately before the first element in the
  <code><a href="#the-table-element">table</a></code> element that is neither a <code><a href="#the-caption-element">caption</a></code>
  element nor a <code><a href="#the-colgroup-element">colgroup</a></code> element, if any, or at the end
  of the table if there are no such elements. If the new value is not
  a <code><a href="#the-thead-element">thead</a></code> element, then a
  <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
  instead.</p>

  <p>The <dfn id="dom-table-createthead" title="dom-table-createTHead"><code>createTHead()</code></dfn>
  method must return the first <code><a href="#the-thead-element">thead</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any; otherwise a new
  <code><a href="#the-thead-element">thead</a></code> element must be created and inserted immediately
  before the first element in the <code><a href="#the-table-element">table</a></code> element that is
  neither a <code><a href="#the-caption-element">caption</a></code> element nor a <code><a href="#the-colgroup-element">colgroup</a></code>
  element, if any, or at the end of the table if there are no such
  elements, and then that new element must be returned.</p>

  <p>The <dfn id="dom-table-deletethead" title="dom-table-deleteTHead"><code>deleteTHead()</code></dfn>
  method must remove the first <code><a href="#the-thead-element">thead</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any.</p>

  <p>The <dfn id="dom-table-tfoot" title="dom-table-tFoot"><code>tFoot</code></dfn> IDL
  attribute must return, on getting, the first <code><a href="#the-tfoot-element">tfoot</a></code>
  element child of the <code><a href="#the-table-element">table</a></code> element, if any, or null
  otherwise. On setting, if the new value is a <code><a href="#the-tfoot-element">tfoot</a></code>
  element, the first <code><a href="#the-tfoot-element">tfoot</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any, must be removed, and the new
  value must be inserted immediately before the first element in the
  <code><a href="#the-table-element">table</a></code> element that is neither a <code><a href="#the-caption-element">caption</a></code>
  element, a <code><a href="#the-colgroup-element">colgroup</a></code> element, nor a <code><a href="#the-thead-element">thead</a></code>
  element, if any, or at the end of the table if there are no such
  elements. If the new value is not a <code><a href="#the-tfoot-element">tfoot</a></code> element, then
  a <code><a href="common-dom-interfaces.html#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code> DOM exception must be raised
  instead.</p>

  <p>The <dfn id="dom-table-createtfoot" title="dom-table-createTFoot"><code>createTFoot()</code></dfn>
  method must return the first <code><a href="#the-tfoot-element">tfoot</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any; otherwise a new
  <code><a href="#the-tfoot-element">tfoot</a></code> element must be created and inserted immediately
  before the first element in the <code><a href="#the-table-element">table</a></code> element that is
  neither a <code><a href="#the-caption-element">caption</a></code> element, a <code><a href="#the-colgroup-element">colgroup</a></code>
  element, nor a <code><a href="#the-thead-element">thead</a></code> element, if any, or at the end of
  the table if there are no such elements, and then that new element
  must be returned.</p>

  <p>The <dfn id="dom-table-deletetfoot" title="dom-table-deleteTFoot"><code>deleteTFoot()</code></dfn>
  method must remove the first <code><a href="#the-tfoot-element">tfoot</a></code> element child of the
  <code><a href="#the-table-element">table</a></code> element, if any.</p>

  <p>The <dfn id="dom-table-tbodies" title="dom-table-tBodies"><code>tBodies</code></dfn>
  attribute must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="#the-table-element">table</a></code> node, whose filter matches only
  <code><a href="#the-tbody-element">tbody</a></code> elements that are children of the
  <code><a href="#the-table-element">table</a></code> element.</p>

  <p>The <dfn id="dom-table-createtbody" title="dom-table-createTBody"><code>createTBody()</code></dfn>
  method must create a new <code><a href="#the-tbody-element">tbody</a></code> element, insert it
  immediately after the last <code><a href="#the-tbody-element">tbody</a></code> element in the
  <code><a href="#the-table-element">table</a></code> element, if any, or at the end of the
  <code><a href="#the-table-element">table</a></code> element if the <code><a href="#the-table-element">table</a></code> element has no
  <code><a href="#the-tbody-element">tbody</a></code> element children, and then must return the new
  <code><a href="#the-tbody-element">tbody</a></code> element.</p>

  <p>The <dfn id="dom-table-rows" title="dom-table-rows"><code>rows</code></dfn> attribute
  must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="#the-table-element">table</a></code> node, whose filter matches only <code><a href="#the-tr-element">tr</a></code>
  elements that are either children of the <code><a href="#the-table-element">table</a></code> element,
  or children of <code><a href="#the-thead-element">thead</a></code>, <code><a href="#the-tbody-element">tbody</a></code>, or
  <code><a href="#the-tfoot-element">tfoot</a></code> elements that are themselves children of the
  <code><a href="#the-table-element">table</a></code> element. The elements in the collection must be
  ordered such that those elements whose parent is a
  <code><a href="#the-thead-element">thead</a></code> are included first, in tree order, followed by
  those elements whose parent is either a <code><a href="#the-table-element">table</a></code> or
  <code><a href="#the-tbody-element">tbody</a></code> element, again in tree order, followed finally by
  those elements whose parent is a <code><a href="#the-tfoot-element">tfoot</a></code> element, still
  in tree order.</p>

  <p>The behavior of the <dfn id="dom-table-insertrow" title="dom-table-insertRow"><code>insertRow(<var title="">index</var>)</code></dfn> method depends on the state of
  the table. When it is called, the method must act as required by the
  first item in the following list of conditions that describes the
  state of the table and the <var title="">index</var> argument:</p>

  <dl class="switch"><dt>If <var title="">index</var> is less than &#8722;1 or greater than
   the number of elements in <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code>
   collection:</dt>

   <dd>The method must raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code>
   exception.</dd>

   <dt>If the <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection has
   zero elements in it, and the <code><a href="#the-table-element">table</a></code> has no
   <code><a href="#the-tbody-element">tbody</a></code> elements in it:</dt>

   <dd>The method must create a <code><a href="#the-tbody-element">tbody</a></code> element, then
   create a <code><a href="#the-tr-element">tr</a></code> element, then append the <code><a href="#the-tr-element">tr</a></code>
   element to the <code><a href="#the-tbody-element">tbody</a></code> element, then append the
   <code><a href="#the-tbody-element">tbody</a></code> element to the <code><a href="#the-table-element">table</a></code> element, and
   finally return the <code><a href="#the-tr-element">tr</a></code> element.</dd>

   <dt>If the <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection has
   zero elements in it:</dt>

   <dd>The method must create a <code><a href="#the-tr-element">tr</a></code> element, append it to
   the last <code><a href="#the-tbody-element">tbody</a></code> element in the table, and return the
   <code><a href="#the-tr-element">tr</a></code> element.</dd>

   <dt>If <var title="">index</var> is missing, equal to &#8722;1, or
   equal to the number of items in <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection:</dt>

   <dd>The method must create a <code><a href="#the-tr-element">tr</a></code> element, and append it
   to the parent of the last <code><a href="#the-tr-element">tr</a></code> element in the <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection. Then, the newly
   created <code><a href="#the-tr-element">tr</a></code> element must be returned.</dd>

   <dt>Otherwise:</dt>

   <dd>The method must create a <code><a href="#the-tr-element">tr</a></code> element, insert it
   immediately before the <var title="">index</var>th <code><a href="#the-tr-element">tr</a></code>
   element in the <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection,
   in the same parent, and finally must return the newly created
   <code><a href="#the-tr-element">tr</a></code> element.</dd>

  </dl><p>When the <dfn id="dom-table-deleterow" title="dom-table-deleteRow"><code>deleteRow(<var title="">index</var>)</code></dfn> method is called, the user agent
  must run the following steps:</p>

  <ol><li><p>If <var title="">index</var> is equal to &#8722;1, then
   <var title="">index</var> must be set to the number if items in the
   <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection, minus
   one.</p></li>

   <li><p>Now, if <var title="">index</var> is less than zero, or
   greater than or equal to the number of elements in the <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection, the method must
   instead raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></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"><a href="#dom-table-rows">rows</a></code> collection from its parent.</p>

  </li></ol><p>The <dfn id="dom-table-border" title="dom-table-border"><code>border</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> 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&gt;
 &lt;style scoped&gt;
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 &lt;/style&gt;
 &lt;h1&gt;Today's Sudoku&lt;/h1&gt;
 &lt;table&gt;
  &lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;
  &lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;
  &lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;
  &lt;tbody&gt;
   &lt;tr&gt; &lt;td&gt; 1 &lt;td&gt;   &lt;td&gt; 3 &lt;td&gt; 6 &lt;td&gt;   &lt;td&gt; 4 &lt;td&gt; 7 &lt;td&gt;   &lt;td&gt; 9
   &lt;tr&gt; &lt;td&gt;   &lt;td&gt; 2 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 9 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 1 &lt;td&gt;
   &lt;tr&gt; &lt;td&gt; 7 &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 6
  &lt;tbody&gt;
   &lt;tr&gt; &lt;td&gt; 2 &lt;td&gt;   &lt;td&gt; 4 &lt;td&gt;   &lt;td&gt; 3 &lt;td&gt;   &lt;td&gt; 9 &lt;td&gt;   &lt;td&gt; 8
   &lt;tr&gt; &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;
   &lt;tr&gt; &lt;td&gt; 5 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 9 &lt;td&gt;   &lt;td&gt; 7 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 1
  &lt;tbody&gt;
   &lt;tr&gt; &lt;td&gt; 6 &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 5 &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 2
   &lt;tr&gt; &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 7 &lt;td&gt;   &lt;td&gt;   &lt;td&gt;   &lt;td&gt;
   &lt;tr&gt; &lt;td&gt; 9 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 8 &lt;td&gt;   &lt;td&gt; 2 &lt;td&gt;   &lt;td&gt;   &lt;td&gt; 5
 &lt;/table&gt;
&lt;/section&gt;</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
  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><p>Such explanatory information should introduce the purpose of the
  table, outline its basic cell structure, highlight any trends or
  patterns, and generally teach the user how to use the table.</p><p>For instance, the following table:</p><table><caption>Characteristics with positive and negative sides</caption>
   <thead><tr><th id="n"> Negative
     </th><th> Characteristic
     </th><th> Positive
   </th></tr></thead><tbody><tr><td headers="n r1"> Sad
     </td><th id="r1"> Mood
     </th><td> Happy
    </td></tr><tr><td headers="n r2"> Failing
     </td><th id="r2"> Grade
     </th><td> Passing
  </td></tr></tbody></table><p>...might benefit from a description explaining the way the table
  is laid out, something like "Characteristics are given in the
  second column, with the negative side in the left column and the
  positive side in the right column".</p><p>There are a variety of ways to include this information, such as:</p><dl><dt>In prose, surrounding the table</dt>

   <dd>
    <div class="example"><pre>&lt;p&gt;In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.&lt;/p&gt;
&lt;table&gt;
 &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>In the table's <code><a href="#the-caption-element">caption</a></code></dt>

   <dd>
    <div class="example"><pre>&lt;table&gt;
 &lt;caption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
  &lt;p&gt;Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.&lt;/p&gt;
 &lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>In the table's <code><a href="#the-caption-element">caption</a></code>, in a <code><a href="interactive-elements.html#the-details-element">details</a></code> element</dt>

   <dd>
    <div class="example"><pre>&lt;table&gt;
 &lt;caption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides.&lt;/strong&gt;
  &lt;details&gt;
   &lt;summary&gt;Help&lt;/summary&gt;
   &lt;p&gt;Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.&lt;/p&gt;
  &lt;/details&gt;
 &lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th id="n"&gt; Negative
   &lt;th&gt; Characteristic
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td headers="n r1"&gt; Sad
   &lt;th id="r1"&gt; Mood
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;td headers="n r2"&gt; Failing
   &lt;th id="r2"&gt; Grade
   &lt;td&gt; Passing
&lt;/table&gt;</pre></div>
   </dd>

   <dt>Next to the table, in the same <code><a href="grouping-content.html#the-figure-element">figure</a></code></dt>

   <dd>
    <div class="example"><pre>&lt;figure&gt;
 &lt;figcaption&gt;Characteristics with positive and negative sides&lt;/figcaption&gt;
 &lt;p&gt;Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.&lt;/p&gt;
 &lt;table&gt;
  &lt;thead&gt;
   &lt;tr&gt;
    &lt;th id="n"&gt; Negative
    &lt;th&gt; Characteristic
    &lt;th&gt; Positive
  &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td headers="n r1"&gt; Sad
    &lt;th id="r1"&gt; Mood
    &lt;td&gt; Happy
   &lt;tr&gt;
    &lt;td headers="n r2"&gt; Failing
    &lt;th id="r2"&gt; Grade
    &lt;td&gt; Passing
 &lt;/table&gt;
&lt;/figure&gt;</pre></div>
   </dd>

   <dt>Next to the table, in a <code><a href="grouping-content.html#the-figure-element">figure</a></code>'s <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code></dt>

   <dd>
    <div class="example"><pre>&lt;figure&gt;
 &lt;figcaption&gt;
  &lt;strong&gt;Characteristics with positive and negative sides&lt;/strong&gt;
  &lt;p&gt;Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.&lt;/p&gt;
 &lt;/figcaption&gt;
 &lt;table&gt;
  &lt;thead&gt;
   &lt;tr&gt;
    &lt;th id="n"&gt; Negative
    &lt;th&gt; Characteristic
    &lt;th&gt; Positive
  &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td headers="n r1"&gt; Sad
    &lt;th id="r1"&gt; Mood
    &lt;td&gt; Happy
   &lt;tr&gt;
    &lt;td headers="n r2"&gt; Failing
    &lt;th id="r2"&gt; Grade
    &lt;td&gt; Passing
 &lt;/table&gt;
&lt;/figure&gt;</pre></div>
   </dd>

  </dl><p>Authors may also use other techniques, or combinations of the
  above techniques, as appropriate.</p><p>The best option, of course, rather than writing a description
  explaining the way the table is laid out, is to adjust the table
  such that no explanation is needed.</p><div class="example">

   <p>In the case of the table used in the examples above, a simple
   rearrangement of the table so that the headers are on the top and
   left sides removes the need for an explanation as well as removing
   the need for the use of <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attributes:</p>

   <pre>&lt;table&gt;
 &lt;caption&gt;Characteristics with positive and negative sides&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt; Characteristic
   &lt;th&gt; Negative
   &lt;th&gt; Positive
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt; Mood
   &lt;td&gt; Sad
   &lt;td&gt; Happy
  &lt;tr&gt;
   &lt;th&gt; Grade
   &lt;td&gt; Failing
   &lt;td&gt; Passing
&lt;/table&gt;</pre>

  </div><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
  serializing 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><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><a href="#the-table-element">table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>, but with no descendant <code><a href="#the-table-element">table</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmltablecaptionelement">HTMLTableCaptionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href="#the-caption-element">caption</a></code> element <a href="rendering.html#represents">represents</a> the title of the
  <code><a href="#the-table-element">table</a></code> that is its parent, if it has a parent and that
  is a <code><a href="#the-table-element">table</a></code> element.</p><div class="impl">

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

  </div><p>When a <code><a href="#the-table-element">table</a></code> element is the only content in a
  <code><a href="grouping-content.html#the-figure-element">figure</a></code> element other than the <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code>,
  the <code><a href="#the-caption-element">caption</a></code> element should be omitted in favor of the
  <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code>.</p><p>A caption can introduce context for a table, making it
  significantly easier to understand.</p><div class="example">

   <p>Consider, for instance, the following table:</p>

   <table class="dice-example"><tr><th>   </th><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th><th> 6
    </th></tr><tr><th> 1 </th><td> 2 </td><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7
    </td></tr><tr><th> 2 </th><td> 3 </td><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8
    </td></tr><tr><th> 3 </th><td> 4 </td><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9
    </td></tr><tr><th> 4 </th><td> 5 </td><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10
    </td></tr><tr><th> 5 </th><td> 6 </td><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11
    </td></tr><tr><th> 6 </th><td> 7 </td><td> 8 </td><td> 9 </td><td> 10 </td><td> 11 </td><td> 12
   </td></tr></table><p>In the abstract, this table is not clear. However, with a
   caption giving the table's number (for reference in the main prose)
   and explaining its use, it makes more sense:</p>

   <pre>&lt;caption&gt;
&lt;p&gt;Table 1.
&lt;p&gt;This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
&lt;/caption&gt;</pre>


  </div><h4 id="the-colgroup-element"><span class="secno">4.9.3 </span>The <dfn><code>colgroup</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 a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code> elements and before any <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>, and <code><a href="#the-tr-element">tr</a></code>
   elements.</dd>
   <dt>Content model:</dt>
   <dd>If the <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute is present: Empty.</dd>
   <dd>If the <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute is absent: Zero or more <code><a href="#the-col-element">col</a></code> elements.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">interface <dfn id="htmltablecolelement">HTMLTableColElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute unsigned long <a href="#dom-colgroup-span" title="dom-colgroup-span">span</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-colgroup-element">colgroup</a></code> element <a href="rendering.html#represents">represents</a> a <a href="#concept-column-group" title="concept-column-group">group</a> of one or more <a href="#concept-column" title="concept-column">columns</a> in the <code><a href="#the-table-element">table</a></code> that
  is its parent, if it has a parent and that is a <code><a href="#the-table-element">table</a></code>
  element.</p><p>If the <code><a href="#the-colgroup-element">colgroup</a></code> element contains no <code><a href="#the-col-element">col</a></code>
  elements, then the element may have a <dfn id="attr-colgroup-span" title="attr-colgroup-span"><code>span</code></dfn> content attribute
  specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p><div class="impl">

  <p>The <code><a href="#the-colgroup-element">colgroup</a></code> element and its <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute take part in the
  <a href="#table-model">table model</a>.</p>

  <p>The <dfn id="dom-colgroup-span" title="dom-colgroup-span"><code>span</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The value must be <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
  numbers greater than zero</a>.</p>

  </div><h4 id="the-col-element"><span class="secno">4.9.4 </span>The <dfn><code>col</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 a child of a <code><a href="#the-colgroup-element">colgroup</a></code> element that doesn't have
   a <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute.</dd>
   <dt>Content model:</dt>
   <dd>Empty.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-col-span"><a href="#attr-col-span">span</a></code></dd>

   <dt>DOM interface:</dt>
   <dd>
    <p><code><a href="#htmltablecolelement">HTMLTableColElement</a></code>, same as for
    <code><a href="#the-colgroup-element">colgroup</a></code> elements. This interface defines one member,
    <code title="dom-col-span"><a href="#dom-col-span">span</a></code>.</p>
   </dd>
  </dl><p>If a <code><a href="#the-col-element">col</a></code> element has a parent and that is a
  <code><a href="#the-colgroup-element">colgroup</a></code> element that itself has a parent that is a
  <code><a href="#the-table-element">table</a></code> element, then the <code><a href="#the-col-element">col</a></code> element
  <a href="rendering.html#represents">represents</a> one or more <a href="#concept-column" title="concept-column">columns</a> in the <a href="#concept-column-group" title="concept-column-group">column group</a> represented by that
  <code><a href="#the-colgroup-element">colgroup</a></code>.</p><p>The element may have a <dfn id="attr-col-span" title="attr-col-span"><code>span</code></dfn> content attribute
  specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p><div class="impl">

  <p>The <code><a href="#the-col-element">col</a></code> element and its <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute take part in the
  <a href="#table-model">table model</a>.</p>

  <p>The <dfn id="dom-col-span" title="dom-col-span"><code>span</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The value must be <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
  numbers greater than zero</a>.</p>

  </div><h4 id="the-tbody-element"><span class="secno">4.9.5 </span>The <dfn><code>tbody</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 a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code>, <code><a href="#the-colgroup-element">colgroup</a></code>, and
   <code><a href="#the-thead-element">thead</a></code> elements, but only if there are no
   <code><a href="#the-tr-element">tr</a></code> elements that are children of the
   <code><a href="#the-table-element">table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmltablesectionelement">HTMLTableSectionElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-tbody-rows" title="dom-tbody-rows">rows</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-tbody-insertrow" title="dom-tbody-insertRow">insertRow</a>(in optional long index);
  void <a href="#dom-tbody-deleterow" title="dom-tbody-deleteRow">deleteRow</a>(in long index);
};</pre>
    <p>The <code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code> interface is also
    used for <code><a href="#the-thead-element">thead</a></code> and <code><a href="#the-tfoot-element">tfoot</a></code> elements.</p>
   </dd>
  </dl><p>The <code><a href="#the-tbody-element">tbody</a></code> element <a href="rendering.html#represents">represents</a> a <a href="#concept-row-group" title="concept-row-group">block</a> of <a href="#concept-row" title="concept-row">rows</a> that consist of a body of data for
  the parent <code><a href="#the-table-element">table</a></code> element, if the <code><a href="#the-tbody-element">tbody</a></code>
  element has a parent and it is a <code><a href="#the-table-element">table</a></code>.</p><div class="impl">

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

  </div><dl class="domintro"><dt><var title="">tbody</var> . <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code></dt>
   <dd>
    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-tr-element">tr</a></code> elements of the table section.</p>
   </dd>

   <dt><var title="">tr</var> = <var title="">tbody</var> . <code title="dom-tbody-insertRow"><a href="#dom-tbody-insertrow">insertRow</a></code>( [ <var title="">index</var> ] )</dt>
   <dd>
    <p>Creates a <code><a href="#the-tr-element">tr</a></code> element, inserts it into the table section at the position given by the argument, and returns the <code><a href="#the-tr-element">tr</a></code>.</p>
    <p>The position is relative to the rows in the table section. The index &#8722;1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.</p>
    <p>If the given position is less than &#8722;1 or greater than the number of rows, throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

   <dt><var title="">tbody</var> . <code title="dom-tbody-deleteRow"><a href="#dom-tbody-deleterow">deleteRow</a></code>(<var title="">index</var>)</dt>
   <dd>
    <p>Removes the <code><a href="#the-tr-element">tr</a></code> element with the given position in the table section.</p>
    <p>The position is relative to the rows in the table section. The index &#8722;1 is equivalent to deleting the last row of the table section.</p>
    <p>If the given position is less than &#8722;1 or greater than the index of the last row, or if there are no rows, throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-tbody-rows" title="dom-tbody-rows"><code>rows</code></dfn> attribute
  must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the element,
  whose filter matches only <code><a href="#the-tr-element">tr</a></code> elements that are children
  of the element.</p>

  <p>The <dfn id="dom-tbody-insertrow" title="dom-tbody-insertRow"><code>insertRow(<var title="">index</var>)</code></dfn> method must, when invoked on an
  element <var title="">table section</var>, act as follows:</p>

  <p>If <var title="">index</var> is less than &#8722;1 or greater than the
  number of elements in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code>
  collection, the method must raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &#8722;1, or
  equal to the number of items in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, the method must
  create a <code><a href="#the-tr-element">tr</a></code> element, append it to the element <var title="">table section</var>, and return the newly created
  <code><a href="#the-tr-element">tr</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href="#the-tr-element">tr</a></code> element,
  insert it as a child of the <var title="">table section</var>
  element, immediately before the <var title="">index</var>th
  <code><a href="#the-tr-element">tr</a></code> element in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, and finally must
  return the newly created <code><a href="#the-tr-element">tr</a></code> element.</p>

  <p>The <dfn id="dom-tbody-deleterow" title="dom-tbody-deleteRow"><code>deleteRow(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> collection, the method must
  instead raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>

  </div><h4 id="the-thead-element"><span class="secno">4.9.6 </span>The <dfn><code>thead</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 a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code>, and <code><a href="#the-colgroup-element">colgroup</a></code>
   elements and before any <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-tfoot-element">tfoot</a></code>, and
   <code><a href="#the-tr-element">tr</a></code> elements, but only if there are no other
   <code><a href="#the-thead-element">thead</a></code> elements that are children of the
   <code><a href="#the-table-element">table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
   <code><a href="#the-tbody-element">tbody</a></code> elements.</dd>
  </dl><p>The <code><a href="#the-thead-element">thead</a></code> element <a href="rendering.html#represents">represents</a> the <a href="#concept-row-group" title="concept-row-group">block</a> of <a href="#concept-row" title="concept-row">rows</a> that consist of the column labels
  (headers) for the parent <code><a href="#the-table-element">table</a></code> element, if the
  <code><a href="#the-thead-element">thead</a></code> element has a parent and it is a
  <code><a href="#the-table-element">table</a></code>.</p><div class="impl">

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

  </div><div class="example">

   <p>This example shows a <code><a href="#the-thead-element">thead</a></code> element being used.
   Notice the use of both <code><a href="#the-th-element">th</a></code> and <code><a href="#the-td-element">td</a></code> elements
   in the <code><a href="#the-thead-element">thead</a></code> element: the first row is the headers,
   and the second row is an explanation of how to fill in the
   table.</p>

   <pre>&lt;table&gt;
 &lt;caption&gt; School auction sign-up sheet &lt;/caption&gt;
<strong> &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;&lt;label for=e1&gt;Name&lt;/label&gt;
   &lt;th&gt;&lt;label for=e2&gt;Product&lt;/label&gt;
   &lt;th&gt;&lt;label for=e3&gt;Picture&lt;/label&gt;
   &lt;th&gt;&lt;label for=e4&gt;Price&lt;/label&gt;
  &lt;tr&gt;
   &lt;td&gt;Your name here
   &lt;td&gt;What are you selling?
   &lt;td&gt;Link to a picture
   &lt;td&gt;Your reserve price
</strong> &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Ms Danus
   &lt;td&gt;Doughnuts
   &lt;td&gt;&lt;img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus"&gt;
   &lt;td&gt;$45
  &lt;tr&gt;
   &lt;td&gt;&lt;input id=e1 type=text name=who required form=f&gt;
   &lt;td&gt;&lt;input id=e2 type=text name=what required form=f&gt;
   &lt;td&gt;&lt;input id=e3 type=url name=pic form=f&gt;
   &lt;td&gt;&lt;input id=e4 type=number step=0.01 min=0 value=0 required form=f&gt;
&lt;/table&gt;
&lt;form id=f action="/auction.cgi"&gt;
 &lt;input type=button name=add value="Submit"&gt;
&lt;/form&gt;</pre>

  </div><h4 id="the-tfoot-element"><span class="secno">4.9.7 </span>The <dfn><code>tfoot</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 a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code>, <code><a href="#the-colgroup-element">colgroup</a></code>, and <code><a href="#the-thead-element">thead</a></code>
   elements and before any <code><a href="#the-tbody-element">tbody</a></code> and <code><a href="#the-tr-element">tr</a></code>
   elements, but only if there are no other <code><a href="#the-tfoot-element">tfoot</a></code>
   elements that are children of the <code><a href="#the-table-element">table</a></code> element.</dd>
   <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code>, <code><a href="#the-colgroup-element">colgroup</a></code>, <code><a href="#the-thead-element">thead</a></code>,
   <code><a href="#the-tbody-element">tbody</a></code>, and <code><a href="#the-tr-element">tr</a></code> elements, but only if there
   are no other <code><a href="#the-tfoot-element">tfoot</a></code> elements that are children of the
   <code><a href="#the-table-element">table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-tr-element">tr</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd><code><a href="#htmltablesectionelement">HTMLTableSectionElement</a></code>, as defined for
   <code><a href="#the-tbody-element">tbody</a></code> elements.</dd>
  </dl><p>The <code><a href="#the-tfoot-element">tfoot</a></code> element <a href="rendering.html#represents">represents</a> the <a href="#concept-row-group" title="concept-row-group">block</a> of <a href="#concept-row" title="concept-row">rows</a> that consist of the column summaries
  (footers) for the parent <code><a href="#the-table-element">table</a></code> element, if the
  <code><a href="#the-tfoot-element">tfoot</a></code> element has a parent and it is a
  <code><a href="#the-table-element">table</a></code>.</p><div class="impl">

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

  </div><h4 id="the-tr-element"><span class="secno">4.9.8 </span>The <dfn><code>tr</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 a child of a <code><a href="#the-thead-element">thead</a></code> element.</dd>
   <dd>As a child of a <code><a href="#the-tbody-element">tbody</a></code> element.</dd>
   <dd>As a child of a <code><a href="#the-tfoot-element">tfoot</a></code> element.</dd>
   <dd>As a child of a <code><a href="#the-table-element">table</a></code> element, after any
   <code><a href="#the-caption-element">caption</a></code>, <code><a href="#the-colgroup-element">colgroup</a></code>, and <code><a href="#the-thead-element">thead</a></code>
   elements, but only if there are no <code><a href="#the-tbody-element">tbody</a></code> elements that
   are children of the <code><a href="#the-table-element">table</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd>Zero or more <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> elements</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmltablerowelement">HTMLTableRowElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
  readonly attribute long <a href="#dom-tr-rowindex" title="dom-tr-rowIndex">rowIndex</a>;
  readonly attribute long <a href="#dom-tr-sectionrowindex" title="dom-tr-sectionRowIndex">sectionRowIndex</a>;
  readonly attribute <a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-tr-cells" title="dom-tr-cells">cells</a>;
  <a href="elements.html#htmlelement">HTMLElement</a> <a href="#dom-tr-insertcell" title="dom-tr-insertCell">insertCell</a>(in optional long index);
  void <a href="#dom-tr-deletecell" title="dom-tr-deleteCell">deleteCell</a>(in long index);
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-tr-element">tr</a></code> element <a href="rendering.html#represents">represents</a> a <a href="#concept-row" title="concept-row">row</a> of <a href="#concept-cell" title="concept-cell">cells</a> in a <a href="#concept-table" title="concept-table">table</a>.</p><div class="impl">

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

  </div><dl class="domintro"><dt><var title="">tr</var> . <code title="dom-tr-rowIndex"><a href="#dom-tr-rowindex">rowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table's <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> list.</p>

    <p>Returns &#8722;1 if the element isn't in a table.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-sectionRowIndex"><a href="#dom-tr-sectionrowindex">sectionRowIndex</a></code></dt>

   <dd>

    <p>Returns the position of the row in the table section's <code title="dom-tbody-rows"><a href="#dom-tbody-rows">rows</a></code> list.</p>

    <p>Returns &#8722;1 if the element isn't in a table section.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code></dt>
   <dd>

    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements of the row.</p>

   </dd>

   <dt><var title="">cell</var> = <var title="">tr</var> . <code title="dom-tr-insertCell"><a href="#dom-tr-insertcell">insertCell</a></code>( [ <var title="">index</var> ] )</dt>

   <dd>

    <p>Creates a <code><a href="#the-td-element">td</a></code> element, inserts it into the table
    row at the position given by the argument, and returns the
    <code><a href="#the-td-element">td</a></code>.</p>

    <p>The position is relative to the cells in the row. The
    index &#8722;1, which is the default if the argument is omitted,
    is equivalent to inserting at the end of the row.</p>

    <p>If the given position is less than &#8722;1 or greater than
    the number of cells, throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code>
    exception.</p>

   </dd>

   <dt><var title="">tr</var> . <code title="dom-tr-deleteCell"><a href="#dom-tr-deletecell">deleteCell</a></code>(<var title="">index</var>)</dt>
   <dd>

    <p>Removes the <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element with the
    given position in the row.</p>

    <p>The position is relative to the cells in the row. The index
    &#8722;1 is equivalent to deleting the last cell of the row.</p>

    <p>If the given position is less than &#8722;1 or greater than
    the index of the last cell, or if there are no cells, throws an
    <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-tr-rowindex" title="dom-tr-rowIndex"><code>rowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href="#the-table-element">table</a></code>
  element, or a parent <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, or
  <code><a href="#the-tfoot-element">tfoot</a></code> element and a <em>grandparent</em>
  <code><a href="#the-table-element">table</a></code> element, return the index of the <code><a href="#the-tr-element">tr</a></code>
  element in that <code><a href="#the-table-element">table</a></code> element's <code title="dom-table-rows"><a href="#dom-table-rows">rows</a></code> collection. If there is no such
  <code><a href="#the-table-element">table</a></code> element, then the attribute must return
  &#8722;1.</p>

  <p>The <dfn id="dom-tr-sectionrowindex" title="dom-tr-sectionRowIndex"><code>sectionRowIndex</code></dfn>
  attribute must, if the element has a parent <code><a href="#the-table-element">table</a></code>,
  <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, or <code><a href="#the-tfoot-element">tfoot</a></code>
  element, return the index of the <code><a href="#the-tr-element">tr</a></code> element in the
  parent element's <code title="">rows</code> collection (for tables,
  that's the <code title="dom-table-rows"><a href="#dom-table-rows">HTMLTableElement.rows</a></code>
  collection; for table sections, that's the <code title="dom-tbody-rows"><a href="#dom-tbody-rows">HTMLTableRowElement.rows</a></code>
  collection). If there is no such parent element, then the attribute
  must return &#8722;1.</p>

  <p>The <dfn id="dom-tr-cells" title="dom-tr-cells"><code>cells</code></dfn> attribute
  must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="#the-tr-element">tr</a></code> element, whose filter matches only <code><a href="#the-td-element">td</a></code>
  and <code><a href="#the-th-element">th</a></code> elements that are children of the
  <code><a href="#the-tr-element">tr</a></code> element.</p>

  <p>The <dfn id="dom-tr-insertcell" title="dom-tr-insertCell"><code>insertCell(<var title="">index</var>)</code></dfn> method must act as follows:</p>

  <p>If <var title="">index</var> is less than &#8722;1 or greater than the
  number of elements in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code>
  collection, the method must raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code>
  exception.</p>

  <p>If <var title="">index</var> is missing, equal to &#8722;1, or
  equal to the number of items in <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, the method must create
  a <code><a href="#the-td-element">td</a></code> element, append it to the <code><a href="#the-tr-element">tr</a></code> element,
  and return the newly created <code><a href="#the-td-element">td</a></code> element.</p>

  <p>Otherwise, the method must create a <code><a href="#the-td-element">td</a></code> element,
  insert it as a child of the <code><a href="#the-tr-element">tr</a></code> element, immediately
  before the <var title="">index</var>th <code><a href="#the-td-element">td</a></code> or
  <code><a href="#the-th-element">th</a></code> element in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, and finally must
  return the newly created <code><a href="#the-td-element">td</a></code> element.</p>

  <p>The <dfn id="dom-tr-deletecell" title="dom-tr-deleteCell"><code>deleteCell(<var title="">index</var>)</code></dfn> method must remove the <var title="">index</var>th element in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection from its parent. If
  <var title="">index</var> is less than zero or greater than or equal
  to the number of elements in the <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection, the method must
  instead raise an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception.</p>

  </div><h4 id="the-td-element"><span class="secno">4.9.9 </span>The <dfn><code>td</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
   <dd><a href="sections.html#sectioning-root">Sectioning root</a>.</dd>
   <dt>Contexts in which this element can be used:</dt>
   <dd>As a child of a <code><a href="#the-tr-element">tr</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code></dd>
   <dd><code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code></dd>
   <dd><code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code></dd>

   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmltabledatacellelement">HTMLTableDataCellElement</dfn> : <a href="#htmltablecellelement">HTMLTableCellElement</a> {};</pre>
   </dd>
  </dl><p>The <code><a href="#the-td-element">td</a></code> element <a href="rendering.html#represents">represents</a> a data <a href="#concept-cell" title="concept-cell">cell</a> in a table.</p><div class="impl">

  <p>The <code><a href="#the-td-element">td</a></code> element and its <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code>, <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code>, and <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attributes take part in the
  <a href="#table-model">table model</a>.</p>

  </div><h4 id="the-th-element"><span class="secno">4.9.10 </span>The <dfn><code>th</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 a child of a <code><a href="#the-tr-element">tr</a></code> element.</dd>
   <dt>Content model:</dt>
   <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
   <dt>Content attributes:</dt>
   <dd><a href="elements.html#global-attributes">Global attributes</a></dd>
   <dd><code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code></dd>
   <dd><code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code></dd>
   <dd><code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code></dd>
   <dd><code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
    <pre class="idl">interface <dfn id="htmltableheadercellelement">HTMLTableHeaderCellElement</dfn> : <a href="#htmltablecellelement">HTMLTableCellElement</a> {
           attribute DOMString <a href="#dom-th-scope" title="dom-th-scope">scope</a>;
};</pre>
   </dd>
  </dl><p>The <code><a href="#the-th-element">th</a></code> element <a href="rendering.html#represents">represents</a> a header <a href="#concept-cell" title="concept-cell">cell</a> in a table.</p><p>The <code><a href="#the-th-element">th</a></code> element may have a <dfn id="attr-th-scope" title="attr-th-scope"><code>scope</code></dfn> content attribute
  specified. The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute is
  an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a> with five states, four of which
  have explicit keywords:</p><dl><dt>The <dfn id="attr-th-scope-row" title="attr-th-scope-row"><code>row</code></dfn>
   keyword, which maps to the <i>row</i> state</dt>

   <dd>The <i>row</i> state means the header cell applies to some of
   the subsequent cells in the same row(s).</dd>

   <dt>The <dfn id="attr-th-scope-col" title="attr-th-scope-col"><code>col</code></dfn>
   keyword, which maps to the <i>column</i> state</dt>

   <dd>The <i>column</i> state means the header cell applies to some
   of the subsequent cells in the same column(s).</dd>

   <dt>The <dfn id="attr-th-scope-rowgroup" title="attr-th-scope-rowgroup"><code>rowgroup</code></dfn> keyword,
   which maps to the <i>row group</i> state</dt>

   <dd>The <i>row group</i> state means the header cell applies to all
   the remaining cells in the row group. A <code><a href="#the-th-element">th</a></code> element's
   <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must not be in
   the <a href="#attr-th-scope-rowgroup" title="attr-th-scope-rowgroup">row group</a> state if
   the element is not anchored in a <a href="#concept-row-group" title="concept-row-group">row group</a>.</dd>

   <dt>The <dfn id="attr-th-scope-colgroup" title="attr-th-scope-colgroup"><code>colgroup</code></dfn> keyword,
   which maps to the <i>column group</i> state</dt>

   <dd>The <i>column group</i> state means the header cell applies to
   all the remaining cells in the column group. A <code><a href="#the-th-element">th</a></code>
   element's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute must
   not be in the <a href="#attr-th-scope-colgroup" title="attr-th-scope-colgroup">column
   group</a> state if the element is not anchored in a <a href="#concept-column-group" title="concept-column-group">column group</a>.</dd>

   <dt>The <dfn id="attr-th-scope-auto" title="attr-th-scope-auto">auto</dfn> state</dt>

   <dd>The <i>auto</i> state makes the header cell apply to a set of
   cells selected based on context.</dd>

  </dl><p>The <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute's
  <i>missing value default</i> is the <i>auto</i> state.</p><div class="impl">

  <p>The <code><a href="#the-th-element">th</a></code> element and its <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code>, <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code>, <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 take part in the
  <a href="#table-model">table model</a>.</p>

  <p>The <dfn id="dom-th-scope" title="dom-th-scope"><code>scope</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  </div><div class="example">

   <p>The following example shows how the <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute's <code title="attr-th-scope-rowgroup"><a href="#attr-th-scope-rowgroup">rowgroup</a></code> value affects which
   data cells a header cell applies to.</p>

   <p>Here is a markup fragment showing a table:</p>

   <pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; ID &lt;th&gt; Measurement &lt;th&gt; Average &lt;th&gt; Maximum
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; Cats &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 93 &lt;th scope=row&gt; Legs &lt;td&gt; 3.5 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 10 &lt;th scope=row&gt; Tails &lt;td&gt; 1 &lt;td&gt; 1
 &lt;tbody&gt;
  &lt;tr&gt; &lt;td&gt; &lt;th scope=rowgroup&gt; English speakers &lt;td&gt; &lt;td&gt;
  &lt;tr&gt; &lt;td&gt; 32 &lt;th scope=row&gt; Legs &lt;td&gt; 2.67 &lt;td&gt; 4
  &lt;tr&gt; &lt;td&gt; 35 &lt;th scope=row&gt; Tails &lt;td&gt; 0.33 &lt;td&gt; 1
&lt;/table&gt;</pre>

   <p>This would result in the following table:</p>

   <table><thead><tr><th> ID </th><th> Measurement </th><th> Average </th><th> Maximum
    </th></tr></thead><tbody><tr><td> </td><th scope="rowgroup"> Cats </th><td> </td><td>
     </td></tr><tr><td> 93 </td><th scope="row"> Legs </th><td> 3.5 </td><td> 4
     </td></tr><tr><td> 10 </td><th scope="row"> Tails </th><td> 1 </td><td> 1
    </td></tr></tbody><tbody><tr><td> </td><th scope="rowgroup"> English speakers </th><td> </td><td>
     </td></tr><tr><td> 32 </td><th scope="row"> Legs </th><td> 2.67 </td><td> 4
     </td></tr><tr><td> 35 </td><th scope="row"> Tails </th><td> 0.33 </td><td> 1
   </td></tr></tbody></table><p>The headers in the first row all apply directly down to the rows
   in their column.</p>

   <p>The headers with the explicit <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attributes apply to all the
   cells in their row group other than the cells in the first column.</p>

   <p>The remaining headers apply just to the cells to the right of
   them.</p>


   <img alt="" height="256" src="table-scope-diagram.png" width="459"></div><h4 id="attributes-common-to-td-and-th-elements"><span class="secno">4.9.11 </span>Attributes common to <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements</h4><p>The <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements may have a <dfn id="attr-tdth-colspan" title="attr-tdth-colspan"><code>colspan</code></dfn> content
  attribute specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a> greater than zero.</p><p>The <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements may also have a
  <dfn id="attr-tdth-rowspan" title="attr-tdth-rowspan"><code>rowspan</code></dfn> content
  attribute specified, whose value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
  integer</a>.</p><p>These attributes give the number of columns and rows respectively
  that the cell is to span. These attributes must not be used to
  overlap cells<span class="impl">, as described in the description of
  the <a href="#table-model">table model</a></span>.</p><hr><p>The <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> element may have a <dfn id="attr-tdth-headers" title="attr-tdth-headers"><code>headers</code></dfn> content
  attribute specified. The <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attribute, if specified,
  must contain a string consisting of an <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique
  space-separated tokens</a> that are <a href="infrastructure.html#case-sensitive">case-sensitive</a>,
  each of which must have the value of an <a href="elements.html#concept-id" title="concept-id">ID</a> of a <code><a href="#the-th-element">th</a></code> element taking
  part in the same <a href="#concept-table" title="concept-table">table</a> as the
  <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element<span class="impl"> (as
  defined by the <a href="#table-model">table model</a>)</span>.</p><p>A <code><a href="#the-th-element">th</a></code> element with <a href="elements.html#concept-id" title="concept-id">ID</a> <var title="">id</var> is said
  to be <i>directly targeted</i> by all <code><a href="#the-td-element">td</a></code> and
  <code><a href="#the-th-element">th</a></code> elements in the same <a href="#concept-table" title="concept-table">table</a> that have <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attributes whose values
  include as one of their tokens the <a href="elements.html#concept-id" title="concept-id">ID</a> <var title="">id</var>. A
  <code><a href="#the-th-element">th</a></code> element <var title="">A</var> is said to be
  <i>targeted</i> by a <code><a href="#the-th-element">th</a></code> or <code><a href="#the-td-element">td</a></code> element
  <var title="">B</var> if either <var title="">A</var> is <i>directly
  targeted</i> by <var title="">B</var> or if there exists an element
  <var title="">C</var> that is itself <i>targeted</i> by the element
  <var title="">B</var> and <var title="">A</var> is <i>directly
  targeted</i> by <var title="">C</var>.</p><p>A <code><a href="#the-th-element">th</a></code> element must not be <i>targeted</i> by
  itself.</p><div class="impl">

  <p>The <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code>, <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code>, and <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attributes take part in the
  <a href="#table-model">table model</a>.</p>

  </div><hr><p>The <code><a href="#the-td-element">td</a></code> and <code><a href="#the-th-element">th</a></code> elements implement
  interfaces that inherit from the <code><a href="#htmltablecellelement">HTMLTableCellElement</a></code>
  interface:</p><pre class="idl">interface <dfn id="htmltablecellelement">HTMLTableCellElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
           attribute unsigned long <a href="#dom-tdth-colspan" title="dom-tdth-colSpan">colSpan</a>;
           attribute unsigned long <a href="#dom-tdth-rowspan" title="dom-tdth-rowSpan">rowSpan</a>;
  [PutForwards=<a href="common-dom-interfaces.html#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="common-dom-interfaces.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-tdth-headers" title="dom-tdth-headers">headers</a>;
  readonly attribute long <a href="#dom-tdth-cellindex" title="dom-tdth-cellIndex">cellIndex</a>;
};</pre><dl class="domintro"><dt><var title="">cell</var> . <code title="dom-tdth-cellIndex"><a href="#dom-tdth-cellindex">cellIndex</a></code></dt>

   <dd>

    <p>Returns the position of the cell in the row's <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> list. This does not necessarily
    correspond to the <var title="">x</var>-position of the cell in
    the table, since earlier cells might cover multiple rows or
    columns.</p>

    <p>Returns 0 if the element isn't in a row.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-tdth-colspan" title="dom-tdth-colSpan"><code>colSpan</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. The value must be <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers-greater-than-zero">limited to only non-negative
  numbers greater than zero</a>.</p>

  <p>The <dfn id="dom-tdth-rowspan" title="dom-tdth-rowSpan"><code>rowSpan</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name. Its default value, which must be used if <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for parsing non-negative integers">parsing the
  attribute as a non-negative integer</a> returns an error, is 1.</p>

  <p>The <dfn id="dom-tdth-headers" title="dom-tdth-headers"><code>headers</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the
  same name.</p>

  <p>The <dfn id="dom-tdth-cellindex" title="dom-tdth-cellIndex"><code>cellIndex</code></dfn>
  IDL attribute must, if the element has a parent <code><a href="#the-tr-element">tr</a></code>
  element, return the index of the cell's element in the parent
  element's <code title="dom-tr-cells"><a href="#dom-tr-cells">cells</a></code> collection. If
  there is no such parent element, then the attribute must return
  0.</p>

  </div><div class="impl">

  <h4 id="processing-model-0"><span class="secno">4.9.12 </span>Processing model</h4>

  <p>The various table elements and their content attributes together
  define the <dfn id="table-model">table model</dfn>.</p>

  <p>A <dfn id="concept-table" title="concept-table">table</dfn> consists of cells
  aligned on a two-dimensional grid of <dfn id="concept-slots" title="concept-slots">slots</dfn> with coordinates (<var title="">x</var>, <var title="">y</var>). The grid is finite, and is
  either empty or has one or more slots. If the grid has one or more
  slots, then the <var title="">x</var> coordinates are always in the
  range <span title="">0&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">x<sub title="">width</sub></var></span>, and the <var title="">y</var>
  coordinates are always in the range <span title="">0&#160;&#8804;&#160;<var title="">y</var>&#160;&lt;&#160;<var title="">y<sub title="">height</sub></var></span>. If one or both of <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> are zero, then the table is empty (has
  no slots). Tables correspond to <code><a href="#the-table-element">table</a></code> elements.</p>

  <p>A <dfn id="concept-cell" title="concept-cell">cell</dfn> is a set of slots anchored
  at a slot (<var title="">cell<sub title="">x</sub></var>, <var title="">cell<sub title="">y</sub></var>), and with a particular
  <var title="">width</var> and <var title="">height</var> such that
  the cell covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">cell<sub title="">x</sub></var>&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span> and
  <span title=""><var title="">cell<sub title="">y</sub></var>&#160;&#8804;&#160;<var title="">y</var>&#160;&lt;&#160;<var title="">cell<sub title="">y</sub></var>+<var title="">height</var></span>. Cells can
  either be <em>data cells</em> or <em>header cells</em>. Data cells
  correspond to <code><a href="#the-td-element">td</a></code> elements, and header cells correspond
  to <code><a href="#the-th-element">th</a></code> elements. Cells of both types can have zero or
  more associated header cells.</p>

  <p>It is possible, in certain error cases, for two cells to occupy
  the same slot.</p>

  <p>A <dfn id="concept-row" title="concept-row">row</dfn> is a complete set of slots
  from <span title=""><var title="">x</var>=0</span> to <span title=""><var title="">x</var>=<var title="">x<sub title="">width</sub></var>-1</span>, for a particular value of <var title="">y</var>. Rows correspond to <code><a href="#the-tr-element">tr</a></code> elements.</p>

  <p>A <dfn id="concept-column" title="concept-column">column</dfn> is a complete set of
  slots from <span title=""><var title="">y</var>=0</span> to <span title=""><var title="">y</var>=<var title="">y<sub title="">height</sub></var>-1</span>, for a particular value of <var title="">x</var>. Columns can correspond to <code><a href="#the-col-element">col</a></code>
  elements. In the absence of <code><a href="#the-col-element">col</a></code> elements, columns are
  implied.</p>

  <p>A <dfn id="concept-row-group" title="concept-row-group">row group</dfn> is a set of
  <a href="#concept-row" title="concept-row">rows</a> anchored at a slot (0, <var title="">group<sub title="">y</sub></var>) with a particular <var title="">height</var> such that the row group covers all the slots
  with coordinates (<var title="">x</var>, <var title="">y</var>)
  where <span title="">0&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">x<sub title="">width</sub></var></span> and <span title=""><var title="">group<sub title="">y</sub></var>&#160;&#8804;&#160;<var title="">y</var>&#160;&lt;&#160;<var title="">group<sub title="">y</sub></var>+<var title="">height</var></span>. Row groups
  correspond to <code><a href="#the-tbody-element">tbody</a></code>, <code><a href="#the-thead-element">thead</a></code>, and
  <code><a href="#the-tfoot-element">tfoot</a></code> elements. Not every row is necessarily in a row
  group.</p>

  <p>A <dfn id="concept-column-group" title="concept-column-group">column group</dfn> is a set
  of <a href="#concept-column" title="concept-column">columns</a> anchored at a slot
  (<var title="">group<sub title="">x</sub></var>, 0) with a
  particular <var title="">width</var> such that the column group
  covers all the slots with coordinates (<var title="">x</var>, <var title="">y</var>) where <span title=""><var title="">group<sub title="">x</sub></var>&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">group<sub title="">x</sub></var>+<var title="">width</var></span> and
  <span title="">0&#160;&#8804;&#160;<var title="">y</var>&#160;&lt;&#160;<var title="">y<sub title="">height</sub></var></span>. Column groups
  correspond to <code><a href="#the-colgroup-element">colgroup</a></code> elements. Not every column is
  necessarily in a column group.</p>

  <p><a href="#concept-row-group" title="concept-row-group">Row groups</a> cannot overlap
  each other. Similarly, <a href="#concept-column-group" title="concept-column-group">column
  groups</a> cannot overlap each other.</p>

  <p>A <a href="#concept-cell" title="concept-cell">cell</a> cannot cover slots that
  are from two or more <a href="#concept-row-group" title="concept-row-group">row
  groups</a>. It is, however, possible for a cell to be in multiple
  <a href="#concept-column-group" title="concept-column-group">column groups</a>. All the
  slots that form part of one cell are part of zero or one <a href="#concept-row-group" title="concept-row-group">row groups</a> and zero or more <a href="#concept-column-group" title="concept-column-group">column groups</a>.</p>

  <p>In addition to <a href="#concept-cell" title="concept-cell">cells</a>, <a href="#concept-column" title="concept-column">columns</a>, <a href="#concept-row" title="concept-row">rows</a>, <a href="#concept-row-group" title="concept-row-group">row
  groups</a>, and <a href="#concept-column-group" title="concept-column-group">column
  groups</a>, <a href="#concept-table" title="concept-table">tables</a> can have a
  <code><a href="#the-caption-element">caption</a></code> element associated with them. This gives the
  table a heading, or legend.</p>

  <p>A <dfn id="table-model-error">table model error</dfn> is an error with the data
  represented by <code><a href="#the-table-element">table</a></code> elements and their
  descendants. Documents must not have table model errors.</p>


  <h5 id="forming-a-table"><span class="secno">4.9.12.1 </span>Forming a table</h5>

  <p>To determine which elements correspond to which slots in a <a href="#concept-table" title="concept-table">table</a> associated with a
  <code><a href="#the-table-element">table</a></code> element, to determine the dimensions of the table
  (<var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var>), and to determine if
  there are any <a href="#table-model-error" title="table model error">table model
  errors</a>, user agents must use the following algorithm:</p>

  <ol><li>
    <p>Let <var title="">x<sub title="">width</sub></var> be zero.</p>
   </li>

   <li>
    <p>Let <var title="">y<sub title="">height</sub></var> be zero.</p>
   </li>

   <li>

    <p>Let <var title="">pending <code><a href="#the-tfoot-element">tfoot</a></code> elements</var> be
    a list of <code><a href="#the-tfoot-element">tfoot</a></code> elements, initially empty.</p>

   </li>

   <li>
    <p>Let <var title="">the table</var> be the <a href="#concept-table" title="concept-table">table</a> represented by the
    <code><a href="#the-table-element">table</a></code> element. The <var title="">x<sub title="">width</sub></var> and <var title="">y<sub title="">height</sub></var> variables give <var title="">the
    table</var>'s dimensions. <var title="">The table</var> is
    initially empty.</p>
   </li>

   <li>


    <p>If the <code><a href="#the-table-element">table</a></code> element has no children elements,
    then return <var title="">the table</var> (which will be empty),
    and abort these steps.</p>

   </li>

   <li>

    <p>Associate the first <code><a href="#the-caption-element">caption</a></code> element child of the
    <code><a href="#the-table-element">table</a></code> element with <var title="">the table</var>. If
    there are no such children, then it has no associated
    <code><a href="#the-caption-element">caption</a></code> element.</p>

   </li>

   <li>

    <p>Let the <var title="">current element</var> be the first
    element child of the <code><a href="#the-table-element">table</a></code> element.</p>

    <p>If a step in this algorithm ever requires the <var title="">current element</var> to be <dfn id="concept-table-advance" title="concept-table-advance">advanced to the next child of the
    <code>table</code></dfn> when there is no such next child, then
    the user agent must jump to the step labeled <i>end</i>, near the
    end of this algorithm.</p>

   </li>

   <li>

    <p>While the <var title="">current element</var> is not one of the
    following elements, <a href="#concept-table-advance" title="concept-table-advance">advance</a> the <var title="">current element</var> to the next child of the
    <code><a href="#the-table-element">table</a></code>:</p>

    <ul class="brief"><li><code><a href="#the-colgroup-element">colgroup</a></code></li>
     <li><code><a href="#the-thead-element">thead</a></code></li>
     <li><code><a href="#the-tbody-element">tbody</a></code></li>
     <li><code><a href="#the-tfoot-element">tfoot</a></code></li>
     <li><code><a href="#the-tr-element">tr</a></code></li>
    </ul></li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href="#the-colgroup-element">colgroup</a></code>, follow these substeps:</p>

    <ol><li>

      <p><i>Column groups</i>: Process the <var title="">current
      element</var> according to the appropriate case below:</p>

      <dl class="switch"><dt>If the <var title="">current element</var> has any
       <code><a href="#the-col-element">col</a></code> element children</dt>

       <dd>

        <p>Follow these steps:</p>

        <ol><li>

          <p>Let <var title="">x<sub title="">start</sub></var> have
          the value of <span title=""><var title="">x<sub title="">width</sub></var></span>.</p>

         </li>

         <li>

          <p>Let the <var title="">current column</var> be the first
          <code><a href="#the-col-element">col</a></code> element child of the <code><a href="#the-colgroup-element">colgroup</a></code>
          element.</p>

         </li>

         <li>

          <p><i>Columns</i>: If the <var title="">current column</var>
          <code><a href="#the-col-element">col</a></code> element has a <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute, then parse its
          value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative
          integers</a>.</p>

          <p>If the result of parsing the value is not an error or
          zero, then let <var title="">span</var> be that value.</p>

          <p>Otherwise, if the <code><a href="#the-col-element">col</a></code> element has no <code title="attr-col-span"><a href="#attr-col-span">span</a></code> attribute, or if trying to
          parse the attribute's value resulted in an error or zero,
          then let <var title="">span</var> be 1.</p>

         </li>

         <li>

          <p>Increase <var title="">x<sub title="">width</sub></var> by
          <var title="">span</var>.</p>

         </li>

         <li>

          <p>Let the last <var title="">span</var> <a href="#concept-column" title="concept-column">columns</a> in <var title="">the
          table</var> correspond to the <var title="">current
          column</var> <code><a href="#the-col-element">col</a></code> element.</p>

         </li>

         <li>

          <p>If <var title="">current column</var> is not the last
          <code><a href="#the-col-element">col</a></code> element child of the <code><a href="#the-colgroup-element">colgroup</a></code>
          element, then let the <var title="">current column</var> be
          the next <code><a href="#the-col-element">col</a></code> element child of the
          <code><a href="#the-colgroup-element">colgroup</a></code> element, and return to the step
          labeled <i>columns</i>.</p>

         </li>

         <li>

          <p>Let all the last <a href="#concept-column" title="concept-column">columns</a> in <var title="">the
          table</var> from <span title="">x=<var title="">x<sub title="">start</sub></var></span> to <span title="">x=<var title="">x<sub title="">width</sub></var>-1</span> form a
          new <a href="#concept-column-group" title="concept-column-group">column group</a>,
          anchored at the slot (<var title="">x<sub title="">start</sub></var>, 0), with width <span title=""><var title="">x<sub title="">width</sub></var>-<var title="">x<sub title="">start</sub></var></span>,
          corresponding to the <code><a href="#the-colgroup-element">colgroup</a></code> element.</p>

         </li>

        </ol></dd>


       <dt>If the <var title="">current element</var> has no
       <code><a href="#the-col-element">col</a></code> element children</dt>

       <dd>

        <ol><li>

          <p>If the <code><a href="#the-colgroup-element">colgroup</a></code> element has a <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute, then parse
          its value using the <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers">rules for parsing non-negative
          integers</a>.</p>

          <p>If the result of parsing the value is not an error or
          zero, then let <var title="">span</var> be that value.</p>

          <p>Otherwise, if the <code><a href="#the-colgroup-element">colgroup</a></code> element has no
          <code title="attr-colgroup-span"><a href="#attr-colgroup-span">span</a></code> attribute, or
          if trying to parse the attribute's value resulted in an
          error or zero, then let <var title="">span</var> be 1.</p>

         </li>

         <li>

          <p>Increase <var title="">x<sub title="">width</sub></var> by
          <var title="">span</var>.</p>

         </li>

         <li>

          <p>Let the last <var title="">span</var> <a href="#concept-column" title="concept-column">columns</a> in <var title="">the
          table</var> form a new <a href="#concept-column-group" title="concept-column-group">column group</a>, anchored
          at the slot (<span title=""><var title="">x<sub title="">width</sub></var>-<var title="">span</var></span>,
          0), with width <var title="">span</var>, corresponding to
          the <code><a href="#the-colgroup-element">colgroup</a></code> element.</p>

         </li>

        </ol></dd>

      </dl></li>

     <li>

      <p><a href="#concept-table-advance" title="concept-table-advance">Advance</a> the <var title="">current element</var> to the next child of the
      <code><a href="#the-table-element">table</a></code>.</p>

     </li>

     <li>

      <p>While the <var title="">current element</var> is not one of
      the following elements, <a href="#concept-table-advance" title="concept-table-advance">advance</a> the <var title="">current element</var> to the next child of the
      <code><a href="#the-table-element">table</a></code>:</p>

      <ul class="brief"><li><code><a href="#the-colgroup-element">colgroup</a></code></li>
       <li><code><a href="#the-thead-element">thead</a></code></li>
       <li><code><a href="#the-tbody-element">tbody</a></code></li>
       <li><code><a href="#the-tfoot-element">tfoot</a></code></li>
       <li><code><a href="#the-tr-element">tr</a></code></li>
      </ul></li>

     <li>

      <p>If the <var title="">current element</var> is a
      <code><a href="#the-colgroup-element">colgroup</a></code> element, jump to the step labeled
      <i>column groups</i> above.</p>

     </li>

    </ol></li>

   <li>

    <p>Let <var title="">y<sub title="">current</sub></var> be
    zero.</p>

   </li>

   <li>

    <p>Let the <var title="">list of downward-growing cells</var> be
    an empty list.</p>

   </li>

   <li>

    <p><i>Rows</i>: While the <var title="">current element</var> is
    not one of the following elements, <a href="#concept-table-advance" title="concept-table-advance">advance</a> the <var title="">current element</var> to the next child of the
    <code><a href="#the-table-element">table</a></code>:</p>

    <ul class="brief"><li><code><a href="#the-thead-element">thead</a></code></li>
     <li><code><a href="#the-tbody-element">tbody</a></code></li>
     <li><code><a href="#the-tfoot-element">tfoot</a></code></li>
     <li><code><a href="#the-tr-element">tr</a></code></li>
    </ul></li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href="#the-tr-element">tr</a></code>, then run the <a href="#algorithm-for-processing-rows">algorithm for processing
    rows</a>, <a href="#concept-table-advance" title="concept-table-advance">advance</a>
    the <var title="">current element</var> to the next child of the
    <code><a href="#the-table-element">table</a></code>, and return to the step labeled
    <i>rows</i>.</p>

   </li>

   <li>

    <p>Run the <a href="#algorithm-for-ending-a-row-group">algorithm for ending a row group</a>.</p>

   </li>

   <li>

    <p>If the <var title="">current element</var> is a
    <code><a href="#the-tfoot-element">tfoot</a></code>, then add that element to the list of <var title="">pending <code><a href="#the-tfoot-element">tfoot</a></code> elements</var>, <a href="#concept-table-advance" title="concept-table-advance">advance</a> the <var title="">current element</var> to the next child of the
    <code><a href="#the-table-element">table</a></code>, and return to the step labeled
    <i>rows</i>.</p>

   </li>

   <li>

    <p>The <var title="">current element</var> is either a
    <code><a href="#the-thead-element">thead</a></code> or a <code><a href="#the-tbody-element">tbody</a></code>.</p>

    <p>Run the <a href="#algorithm-for-processing-row-groups">algorithm for processing row groups</a>.</p>

   </li>

   <li>

    <p><a href="#concept-table-advance" title="concept-table-advance">Advance</a> the <var title="">current element</var> to the next child of the
    <code><a href="#the-table-element">table</a></code>.</p>

   </li>

   <li>

    <p>Return to the step labeled <i>rows</i>.</p>

   </li>

   <li>

    <p><i>End</i>: For each <code><a href="#the-tfoot-element">tfoot</a></code> element in the list of
    <var title="">pending <code><a href="#the-tfoot-element">tfoot</a></code> elements</var>, in tree
    order, run the <a href="#algorithm-for-processing-row-groups">algorithm for processing row
    groups</a>.</p>

   </li>

   <li>

    <p>If there exists a <a href="#concept-row" title="concept-row">row</a> or <a href="#concept-column" title="concept-column">column</a> in <var title="">the
    table</var> containing only <a href="#concept-slots" title="concept-slots">slots</a> that do not have a <a href="#concept-cell" title="concept-cell">cell</a> anchored to them, then this is a
    <a href="#table-model-error">table model error</a>.</p>

   </li>

   <li>

    <p>Return <var title="">the table</var>.</p>

   </li>

  </ol><p>The <dfn id="algorithm-for-processing-row-groups">algorithm for processing row groups</dfn>, which is
  invoked by the set of steps above for processing
  <code><a href="#the-thead-element">thead</a></code>, <code><a href="#the-tbody-element">tbody</a></code>, and <code><a href="#the-tfoot-element">tfoot</a></code>
  elements, is:</p>

  <ol><li>

    <p>Let <var title="">y<sub title="">start</sub></var> have the
    value of <var title="">y<sub title="">height</sub></var>.</p>

   </li>

   <li>

    <p>For each <code><a href="#the-tr-element">tr</a></code> element that is a child of the element
    being processed, in tree order, run the <a href="#algorithm-for-processing-rows">algorithm for
    processing rows</a>.</p>

   </li>

   <li>


    <p>If <span title=""><var title="">y<sub title="">height</sub></var>&#160;&gt;&#160;<var title="">y<sub title="">start</sub></var></span>, then let all the last <a href="#concept-row" title="concept-row">rows</a> in <var title="">the table</var>
    from <span title="">y=<var title="">y<sub title="">start</sub></var></span>
    to <span title="">y=<var title="">y<sub title="">height</sub></var>-1</span> form a new <a href="#concept-row-group" title="concept-row-group">row group</a>, anchored at the slot
    with coordinate (0, <var title="">y<sub title="">start</sub></var>), with height <span title=""><var title="">y<sub title="">height</sub></var>-<var title="">y<sub title="">start</sub></var></span>, corresponding to the element
    being processed.</p>

   </li>

   <li>

    <p>Run the <a href="#algorithm-for-ending-a-row-group">algorithm for ending a row group</a>.</p>

   </li>

  </ol><p>The <dfn id="algorithm-for-ending-a-row-group">algorithm for ending a row group</dfn>, which is invoked
  by the set of steps above when starting and ending a block of rows,
  is:</p>

  <ol><li>

    <p>While <var title="">y<sub title="">current</sub></var> is less
    than <var title="">y<sub title="">height</sub></var>, follow these
    steps:</p>

    <ol><li>

      <p>Run the <a href="#algorithm-for-growing-downward-growing-cells">algorithm for growing downward-growing
      cells</a>.</p>

     </li>

     <li>

      <p>Increase <var title="">y<sub title="">current</sub></var> by
      1.</p>

     </li>

    </ol></li>

   <li>

    <p>Empty the <var title="">list of downward-growing
    cells</var>.</p>

   </li>

  </ol><p>The <dfn id="algorithm-for-processing-rows">algorithm for processing rows</dfn>, which is invoked by
  the set of steps above for processing <code><a href="#the-tr-element">tr</a></code> elements,
  is:</p>

  <ol><li>

    <p>If <var title="">y<sub title="">height</sub></var> is equal to
    <var title="">y<sub title="">current</sub></var>, then increase
    <var title="">y<sub title="">height</sub></var> by 1. (<var title="">y<sub title="">current</sub></var> is never
    <em>greater</em> than <var title="">y<sub title="">height</sub></var>.)</p>

   </li>

   <li>

    <p>Let <var title="">x<sub title="">current</sub></var> be 0.</p>

   </li>

   <li>

    <p>Run the <a href="#algorithm-for-growing-downward-growing-cells">algorithm for growing downward-growing
    cells</a>.</p>

   </li>

   <li>

    <p>If the <code><a href="#the-tr-element">tr</a></code> element being processed has no
    <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element children, then increase
    <var title="">y<sub title="">current</sub></var> by 1, abort this
    set of steps, and return to the algorithm above.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the first
    <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element in the <code><a href="#the-tr-element">tr</a></code>
    element being processed.</p>

   </li>

   <li>

    <p><i>Cells</i>: While <var title="">x<sub title="">current</sub></var> is less than <var title="">x<sub title="">width</sub></var> and the slot with coordinate (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>) already has a cell assigned to it,
    increase <var title="">x<sub title="">current</sub></var> by
    1.</p>

   </li>

   <li>

    <p>If <var title="">x<sub title="">current</sub></var> is equal to
    <var title="">x<sub title="">width</sub></var>, increase <var title="">x<sub title="">width</sub></var> by 1. (<var title="">x<sub title="">current</sub></var> is never
    <em>greater</em> than <var title="">x<sub title="">width</sub></var>.)</p>

   </li>

   <li>

    <p>If the <var title="">current cell</var> has a <code title="attr-tdth-colspan"><a href="#attr-tdth-colspan">colspan</a></code> attribute, then <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for parsing non-negative integers">parse that
    attribute's value</a>, and let <var title="">colspan</var> be
    the result.</p>

    <p>If parsing that value failed, or returned zero, or if the
    attribute is absent, then let <var title="">colspan</var> be 1,
    instead.</p>

   </li>

   <li>

    <p>If the <var title="">current cell</var> has a <code title="attr-tdth-rowspan"><a href="#attr-tdth-rowspan">rowspan</a></code> attribute, then <a href="common-microsyntaxes.html#rules-for-parsing-non-negative-integers" title="rules for
    parsing non-negative integers">parse that attribute's
    value</a>, and let <var title="">rowspan</var> be the
    result.</p>

    <p>If parsing that value failed or if the attribute is absent,
    then let <var title="">rowspan</var> be 1, instead.</p>

   </li>

   <li>

    <p>If <var title="">rowspan</var> is zero, then let <var title="">cell grows downward</var> be true, and set <var title="">rowspan</var> to 1. Otherwise, let <var title="">cell
    grows downward</var> be false.</p>

   </li>

   <li>

    <p>If <span title=""><var title="">x<sub title="">width</sub></var>&#160;&lt;&#160;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>,
    then let <var title="">x<sub title="">width</sub></var> be
    <span title=""><var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>.</p>

   </li>

   <li>

    <p>If <span title=""><var title="">y<sub title="">height</sub></var>&#160;&lt;&#160;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>,
    then let <var title="">y<sub title="">height</sub></var> be
    <span title=""><var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span>.</p>

   </li>

   <li>

    <p>Let the slots with coordinates (<var title="">x</var>, <var title="">y</var>) such that <span title=""><var title="">x<sub title="">current</sub></var>&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">x<sub title="">current</sub></var>+<var title="">colspan</var></span>
    and <span title=""><var title="">y<sub title="">current</sub></var>&#160;&#8804;&#160;<var title="">y</var>&#160;&lt;&#160;<var title="">y<sub title="">current</sub></var>+<var title="">rowspan</var></span> be
    covered by a new <a href="#concept-cell" title="concept-cell">cell</a> <var title="">c</var>, anchored at (<var title="">x<sub title="">current</sub></var>, <var title="">y<sub title="">current</sub></var>), which has width <var title="">colspan</var> and height <var title="">rowspan</var>,
    corresponding to the <var title="">current cell</var> element.</p>

    <p>If the <var title="">current cell</var> element is a
    <code><a href="#the-th-element">th</a></code> element, let this new cell <var title="">c</var>
    be a header cell; otherwise, let it be a data cell.</p>

    <p>To establish which header cells apply to the <var title="">current cell</var> element, use the <a href="#algorithm-for-assigning-header-cells">algorithm for
    assigning header cells</a> described in the next section.</p>

    <p>If any of the slots involved already had a <a href="#concept-cell" title="concept-cell">cell</a> covering them, then this is a
    <a href="#table-model-error">table model error</a>. Those slots now have two cells
    overlapping.</p>

   </li>

   <li>

    <p>If <var title="">cell grows downward</var> is true, then add
    the tuple {<var title="">c</var>, <var title="">x<sub title="">current</sub></var>, <var title="">colspan</var>} to the
    <var title="">list of downward-growing cells</var>.</p>

   </li>

   <li>

    <p>Increase <var title="">x<sub title="">current</sub></var> by
    <var title="">colspan</var>.</p>

   </li>

   <li>

    <p>If <var title="">current cell</var> is the last <code><a href="#the-td-element">td</a></code>
    or <code><a href="#the-th-element">th</a></code> element in the <code><a href="#the-tr-element">tr</a></code> element being
    processed, then increase <var title="">y<sub title="">current</sub></var> by 1, abort this set of steps, and
    return to the algorithm above.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the next
    <code><a href="#the-td-element">td</a></code> or <code><a href="#the-th-element">th</a></code> element in the <code><a href="#the-tr-element">tr</a></code>
    element being processed.</p>

   </li>

   <li>

    <p>Return to the step labelled <i>cells</i>.</p>

   </li>

  </ol><p>When the algorithms above require the user agent to run the
  <dfn id="algorithm-for-growing-downward-growing-cells">algorithm for growing downward-growing cells</dfn>, the user
  agent must, for each {<var title="">cell</var>, <var title="">cell<sub title="">x</sub></var>, <var title="">width</var>}
  tuple in the <var title="">list of downward-growing cells</var>, if
  any, extend the <a href="#concept-cell" title="concept-cell">cell</a> <var title="">cell</var> so that it also covers the slots with
  coordinates (<var title="">x</var>, <var title="">y<sub title="">current</sub></var>), where <span title=""><var title="">cell<sub title="">x</sub></var>&#160;&#8804;&#160;<var title="">x</var>&#160;&lt;&#160;<var title="">cell<sub title="">x</sub></var>+<var title="">width</var></span>.</p>


  <h5 id="header-and-data-cell-semantics"><span class="secno">4.9.12.2 </span>Forming relationships between data cells and header cells</h5>

  <p>Each cell can be assigned zero or more header cells. The
  <dfn id="algorithm-for-assigning-header-cells">algorithm for assigning header cells</dfn> to a cell <var title="">principal cell</var> is as follows.</p>

  <ol><!-- INITIALIZATION --><li>

    <p>Let <var title="">header list</var> be an empty list of
    cells.</p>

   </li>

   <li>

    <p>Let (<var title="">principal<sub title="">x</sub></var>, <var title="">principal<sub title="">y</sub></var>) be the coordinate
    of the slot to which the <var title="">principal cell</var> is
    anchored.</p>

   </li>

   <li>

    <dl class="switch"><dt>If the <var title="">principal cell</var> has a <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attribute specified</dt>

     <dd>

      <!-- HEADERS="" -->

      <ol><li>

        <p>Take the value of the <var title="">principal cell</var>'s
        <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attribute and
        <a href="common-microsyntaxes.html#split-a-string-on-spaces" title="split a string on spaces">split it on
        spaces</a>, letting <var title="">id list</var> be the list
        of tokens obtained.</p>

       </li>

       <li>


        <p>For each token in the <var title="">id list</var>, if the
        first element in the <code><a href="infrastructure.html#document">Document</a></code> with an <a href="elements.html#concept-id" title="concept-id">ID</a> equal to
        the token is a cell in the same <a href="#concept-table" title="concept-table">table</a>, and that cell is not the
        <var title="">principal cell</var>, then add that cell to <var title="">header list</var>.</p>

       </li>

      </ol></dd>


     <dt>If <var title="">principal cell</var> does not have a <code title="attr-tdth-headers"><a href="#attr-tdth-headers">headers</a></code> attribute specified</dt>

     <dd>

      <ol><li>

        <p>Let <var title="">principal<sub title="">width</sub></var>
        be the width of the <var title="">principal cell</var>.</p>

       </li>

       <li>

        <p>Let <var title="">principal<sub title="">height</sub></var>
        be the height of the <var title="">principal cell</var>.</p>

       </li>


       <!-- HORIZONTAL -->

       <li>

        <p>For each value of <var title="">y</var> from <var title="">principal<sub title="">y</sub></var> to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span>,
        run the <a href="#internal-algorithm-for-scanning-and-assigning-header-cells">internal algorithm for scanning and assigning
        header cells</a>, with the <var title="">principal
        cell</var>, the <var title="">header list</var>, the initial
        coordinate (<var title="">principal<sub title="">x</sub></var>,<var title="">y</var>), and the
        increments <span title="">&#916;<var title="">x</var>=&#8722;1</span>
        and <span title="">&#916;<var title="">y</var>=0</span>.</p>

       </li>


       <!-- VERTICAL -->

       <li>

        <p>For each value of <var title="">x</var> from <var title="">principal<sub title="">x</sub></var> to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span>,
        run the <a href="#internal-algorithm-for-scanning-and-assigning-header-cells">internal algorithm for scanning and assigning
        header cells</a>, with the <var title="">principal
        cell</var>, the <var title="">header list</var>, the initial
        coordinate (<var title="">x</var>,<var title="">principal<sub title="">y</sub></var>), and the increments <span title="">&#916;<var title="">x</var>=0</span> and <span title="">&#916;<var title="">y</var>=&#8722;1</span>.</p>

       </li>


       <!-- ROW GROUP HEADERS -->

       <li>

        <p>If the <var title="">principal cell</var> is anchored in a
        <a href="#concept-row-group" title="concept-row-group">row group</a>, then add all
        header cells that are <a href="#row-group-header" title="row group header">row group
        headers</a> and are anchored in the same row group with an
        <var title="">x</var>-coordinate less than or equal to
        <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and
        a <var title="">y</var>-coordinate less than or equal to
        <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
        <var title="">header list</var>.</p>


       </li>


       <!-- COLUMN GROUP HEADERS -->

       <li>

        <p>If the <var title="">principal cell</var> is anchored in a
        <a href="#concept-column-group" title="concept-column-group">column group</a>, then
        add all header cells that are <a href="#column-group-header" title="column group
        header">column group headers</a> and are anchored in the
        same column group with an <var title="">x</var>-coordinate
        less than or equal to <span title=""><var title="">principal<sub title="">x</sub></var>+<var title="">principal<sub title="">width</sub></var>-1</span> and a <var title="">y</var>-coordinate less than or equal to <span title=""><var title="">principal<sub title="">y</sub></var>+<var title="">principal<sub title="">height</sub></var>-1</span> to
        <var title="">header list</var>.</p>


       </li>

      </ol></dd>

    </dl></li>


   <!-- CLEANUP -->

   <li>

    <p>Remove all the <a href="#empty-cell" title="empty cell">empty cells</a> from
    the <var title="">header list</var>.</p>

   </li>

   <li>

    <p>Remove any duplicates from the <var title="">header
    list</var>.</p>

   </li>

   <li>

    <p>Remove <var title="">principal cell</var> from the <var title="">header list</var> if it is there.</p>
   </li>

   <li>

    <p>Assign the headers in the <var title="">header list</var> to
    the <var title="">principal cell</var>.</p>

   </li>

  </ol><p>The <dfn id="internal-algorithm-for-scanning-and-assigning-header-cells">internal algorithm for scanning and assigning header
  cells</dfn>, given a <var title="">principal cell</var>, a <var title="">header list</var>, an initial coordinate (<var title="">initial<sub title="">x</sub></var>, <var title="">initial<sub title="">y</sub></var>), and &#916;<var title="">x</var> and &#916;<var title="">y</var> increments, is as
  follows:</p>

  <ol><li>

    <p>Let <var title="">x</var> equal <var title="">initial<sub title="">x</sub></var>.</p>

   </li>

   <li>

    <p>Let <var title="">y</var> equal <var title="">initial<sub title="">y</sub></var>.</p>

   </li>

   <li>

    <p>Let <var title="">opaque headers</var> be an empty list of
    cells.</p>

   </li>

   <li>

    <dl class="switch"><dt>If <var title="">principal cell</var> is a header cell</dt>

     <dd><p>Let <var title="">in header block</var> be true, and let
     <var title="">headers from current header block</var> be a list
     of cells containing just the <var title="">principal
     cell</var>.</p></dd>

     <dt>Otherwise</dt>

     <dd><p>Let <var title="">in header block</var> be false and let
     <var title="">headers from current header block</var> be an
     empty list of cells.</p>

    </dd></dl></li>

   <li>

    <p><i>Loop</i>: Increment <var title="">x</var> by &#916;<var title="">x</var>; increment <var title="">y</var> by &#916;<var title="">y</var>.</p>

    <p class="note">For each invocation of this algorithm, one of
    &#916;<var title="">x</var> and &#916;<var title="">y</var> will
    be &#8722;1, and the other will be 0.</p>

   </li>

   <li>

    <p>If either <var title="">x</var> or <var title="">y</var> is
    less than 0, then abort this internal algorithm.</p>

   </li>

   <li>

    <p>If there is no cell covering slot (<var title="">x</var>,
    <var title="">y</var>), or if there is more than one cell
    covering slot (<var title="">x</var>, <var title="">y</var>),
    return to the substep labeled <i>loop</i>.</p>

   </li>

   <li>

    <p>Let <var title="">current cell</var> be the cell covering
    slot (<var title="">x</var>, <var title="">y</var>).</p>

   </li>

   <li>

    <dl class="switch"><dt>If <var title="">current cell</var> is a header cell</dt>

     <dd>

      <ol><li><p>Set <var title="">in header block</var> to
       true.</p></li>

       <li><p>Add <var title="">current cell</var> to <var title="">headers from current header block</var>.</p></li>

       <li><p>Let <var title="">blocked</var> be false.</p></li>

       <li>

        <dl class="switch"><dt>If &#916;<var title="">x</var> is 0</dt>

         <dd>

          <p>If there are any cells in the <var title="">opaque
          headers</var> list anchored with the same <var title="">x</var>-coordinate as the <var title="">current
          cell</var>, and with the same width as <var title="">current
          cell</var>, then let <var title="">blocked</var> be
          true.</p>

          <p>If the <var title="">current cell</var> is not a
          <a href="#column-header">column header</a>, then let <var title="">blocked</var> be true.</p>

         </dd>

         <dt>If &#916;<var title="">y</var> is 0</dt>

         <dd>

          <p>If there are any cells in the <var title="">opaque
          headers</var> list anchored with the same <var title="">y</var>-coordinate as the <var title="">current
          cell</var>, and with the same height as <var title="">current cell</var>, then let <var title="">blocked</var> be true.</p>

          <p>If the <var title="">current cell</var> is not a
          <a href="#row-header">row header</a>, then let <var title="">blocked</var> be true.</p>

         </dd>

        </dl></li>

       <li><p>If <var title="">blocked</var> is false, then add the
       <var title="">current cell</var> to the <var title="">headers
       list</var>.</p></li>

      </ol></dd>

     <dt>If <var title="">current cell</var> is a data cell and <var title="">in header block</var> is true</dt>

     <dd><p>Set <var title="">in header block</var> to false. Add
     all the cells in <var title="">headers from current header
     block</var> to the <var title="">opaque headers</var> list, and
     empty the <var title="">headers from current header block</var>
     list.</p>

    </dd></dl></li>

   <li>

    <p>Return to the step labeled <i>loop</i>.</p>

   </li>

  </ol><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
  to be a <dfn id="column-header">column header</dfn> if any of the following conditions
  are true:</p>

  <ul><li>The cell's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute
   is in the <a href="#attr-th-scope-col" title="attr-th-scope-col">column</a> state, or</li>

   <li>The cell's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute
   is in the <a href="#attr-th-scope-auto" title="attr-th-scope-auto">auto</a> state, and
   there are no data cells in any of the cells covering slots with
   <var title="">y</var>-coordinates <var title="">y</var>
   .. <span title=""><var title="">y</var>+<var title="">height</var>-1</span>.</li>

  </ul><p>A header cell anchored at the slot with coordinate (<var title="">x</var>, <var title="">y</var>) with width <var title="">width</var> and height <var title="">height</var> is said
  to be a <dfn id="row-header">row header</dfn> if any of the following conditions
  are true:</p>

  <ul><li>The cell's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute
   is in the <a href="#attr-th-scope-row" title="attr-th-scope-row">row</a> state, or</li>

   <li>The cell's <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute
   is in the <a href="#attr-th-scope-auto" title="attr-th-scope-auto">auto</a> state, the
   cell is not a <a href="#column-header">column header</a>, and there are no data
   cells in any of the cells covering slots with <var title="">x</var>-coordinates <var title="">x</var> .. <span title=""><var title="">x</var>+<var title="">width</var>-1</span>.</li>

  </ul><p>A header cell is said to be a <dfn id="column-group-header">column group header</dfn> if
  its <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute is in the
  <a href="#attr-th-scope-colgroup" title="attr-th-scope-colgroup">column group</a> state.</p>

  <p>A header cell is said to be a <dfn id="row-group-header">row group header</dfn> if
  its <code title="attr-th-scope"><a href="#attr-th-scope">scope</a></code> attribute is in the
  <a href="#attr-th-scope-rowgroup" title="attr-th-scope-rowgroup">row group</a> state.</p>

  <p>A cell is said to be an <dfn id="empty-cell">empty cell</dfn> if it contains no
  elements and its text content, if any, consists only of
  <a href="common-microsyntaxes.html#white_space">White_Space</a> characters.</p>

  </div><h4 id="examples"><span class="secno">4.9.13 </span>Examples</h4><p><i>This section is non-normative.</i></p><p>The following shows how might one mark up the bottom part of
  table 45 of the <cite>Smithsonian physical tables, Volume
  71</cite>:</p><pre>&lt;table&gt;
 &lt;caption&gt;Specification values: &lt;b&gt;Steel&lt;/b&gt;, &lt;b&gt;Castings&lt;/b&gt;,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.&lt;/caption&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th rowspan=2&gt;Grade.&lt;/th&gt;
   &lt;th rowspan=2&gt;Yield Point.&lt;/th&gt;
   &lt;th colspan=2&gt;Ultimate tensile strength&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent elong. 50.8mm or 2 in.&lt;/th&gt;
   &lt;th rowspan=2&gt;Per cent reduct. area.&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;th&gt;kg/mm&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
   &lt;th&gt;lb/in&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
  &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;Hard&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;56.2&lt;/td&gt;
   &lt;td&gt;80,000&lt;/td&gt;
   &lt;td&gt;15&lt;/td&gt;
   &lt;td&gt;20&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Medium&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;49.2&lt;/td&gt;
   &lt;td&gt;70,000&lt;/td&gt;
   &lt;td&gt;18&lt;/td&gt;
   &lt;td&gt;25&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;Soft&lt;/td&gt;
   &lt;td&gt;0.45 ultimate&lt;/td&gt;
   &lt;td&gt;42.2&lt;/td&gt;
   &lt;td&gt;60,000&lt;/td&gt;
   &lt;td&gt;22&lt;/td&gt;
   &lt;td&gt;30&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre><p>This table could look like this:</p><table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   <thead><tr><th rowspan="2">Grade.</th>
     <th rowspan="2">Yield Point.</th>
     <th colspan="2">Ultimate tensile strength</th>
     <th rowspan="2">Per cent elong. 50.8&#160;mm or&#160;2&#160;in.</th>
     <th rowspan="2">Per cent reduct. area.</th>
    </tr><tr><th>kg/mm<sup>2</sup></th>
     <th>lb/in<sup>2</sup></th>
    </tr></thead><tbody><tr><td>Hard</td>
     <td>0.45 ultimate</td>
     <td>56.2</td>
     <td>80,000</td>
     <td>15</td>
     <td>20</td>
    </tr><tr><td>Medium</td>
     <td>0.45 ultimate</td>
     <td>49.2</td>
     <td>70,000</td>
     <td>18</td>
     <td>25</td>
    </tr><tr><td>Soft</td>
     <td>0.45 ultimate</td>
     <td>42.2</td>
     <td>60,000</td>
     <td>22</td>
     <td>30</td>
    </tr></tbody></table><hr><p>The following shows how one might mark up the gross margin table
  on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:</p><pre>&lt;table&gt;
 &lt;thead&gt;
  &lt;tr&gt;
   &lt;th&gt;
   &lt;th&gt;2008
   &lt;th&gt;2007
   &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Net sales
   &lt;td&gt;$ 32,479
   &lt;td&gt;$ 24,006
   &lt;td&gt;$ 19,315
  &lt;tr&gt;
   &lt;th&gt;Cost of sales
   &lt;td&gt;  21,334
   &lt;td&gt;  15,852
   &lt;td&gt;  13,717
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin
   &lt;td&gt;$ 11,145
   &lt;td&gt;$  8,154
   &lt;td&gt;$  5,598
 &lt;tfoot&gt;
  &lt;tr&gt;
   &lt;th&gt;Gross margin percentage
   &lt;td&gt;34.3%
   &lt;td&gt;34.0%
   &lt;td&gt;29.0%
&lt;/table&gt;</pre><hr><p>The following shows how one might mark up the operating expenses
  table from lower on the same page of that document:</p><pre>&lt;table&gt;
 &lt;colgroup&gt; &lt;col&gt;
 &lt;colgroup&gt; &lt;col&gt; &lt;col&gt; &lt;col&gt;
 &lt;thead&gt;
  &lt;tr&gt; &lt;th&gt; &lt;th&gt;2008 &lt;th&gt;2007 &lt;th&gt;2006
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Research and development
       &lt;td&gt; $ 1,109 &lt;td&gt; $ 782 &lt;td&gt; $ 712
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 3.4% &lt;td&gt; 3.3% &lt;td&gt; 3.7%
 &lt;tbody&gt;
  &lt;tr&gt; &lt;th scope=rowgroup&gt; Selling, general, and administrative
       &lt;td&gt; $ 3,761 &lt;td&gt; $ 2,963 &lt;td&gt; $ 2,433
  &lt;tr&gt; &lt;th scope=row&gt; Percentage of net sales
       &lt;td&gt; 11.6% &lt;td&gt; 12.3% &lt;td&gt; 12.6%
&lt;/table&gt;</pre><p>This table could look like this:</p><table class="apple-table-examples e2"><thead><tr><th> </th><th>2008 </th><th>2007 </th><th>2006
   </th></tr></thead><tbody><tr><th scope="rowgroup"> Research and development
         </th><td> $ 1,109 </td><td> $ 782 </td><td> $ 712
    </td></tr><tr><th scope="row"> Percentage of net sales
         </th><td> 3.4% </td><td> 3.3% </td><td> 3.7%
   </td></tr></tbody><tbody><tr><th scope="rowgroup"> Selling, general, and administrative
         </th><td> $ 3,761 </td><td> $ 2,963 </td><td> $ 2,433
    </td></tr><tr><th scope="row"> Percentage of net sales
         </th><td> 11.6% </td><td> 12.3% </td><td> 12.6%
  </td></tr></tbody></table></body></html>