Revision 1115059 of <th>

<p><span class="seoSummary">The HTML element <em>table header cell</em> <code>&lt;th&gt;</code> defines a cell as header of a group of table cells. This&nbsp;group&nbsp;is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attributes.</span></p>

<h2 id="Usage_context">Usage context</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
   <td>None.</td>
  </tr>
  <tr>
   <td>Permitted content</td>
   <td>
    <div class="content-models">
    <div id="table-mdls">Phrasing content.</div>
    </div>
   </td>
  </tr>
  <tr>
   <td>Tag omission</td>
   <td>The <span title="syntax-start-tag">start tag</span> is mandatory.<br />
    The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td>
  </tr>
  <tr>
   <td>Permitted parent elements</td>
   <td>A {{HTMLElement("tr")}} element.</td>
  </tr>
  <tr>
   <td>Normative document</td>
   <td><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element" rel="external nofollow" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">HTML5, section 4.9.10</a> (<a href="https://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6" title="https://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>This attribute contains a short abbreviated description of the cell's content. A user-agent (e.g.,&nbsp;a speech reader) &nbsp;may be present in front of&nbsp;the description.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it has become&nbsp;obsolete in the latest standard. Alternatively, you can put the abbreviated description inside the cell and place the long content in the&nbsp;<strong>title</strong> attribute.</div>
 </dd>
 <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>This enumerated attribute specifies how the cell&nbsp;content's horizontal alignment will be handled. Possible values are:
 <ul>
  <li><code>left</code>, the content is aligned to the left of the cell</li>
  <li><code>center</code>, the content is centered&nbsp;in the cell</li>
  <li><code>right</code>, &nbsp;the content is aligned to the right of the cell&nbsp;</li>
  <li><code>justify</code>, (with text only) the content&nbsp;is stretched out inside the cell&nbsp;so that it covers its entire width</li>
  <li><code>char</code>, (with text only) the content is aligned&nbsp;to a character inside the &lt;th&gt; element with minimal offset. This character is&nbsp;defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes<font face="Consolas, Liberation Mono, Courier, monospace">&nbsp;</font>{{unimplemented_inline("2212")}}.</li>
 </ul>

 <p>The <code>left</code> value is default when this attribute is not specified.</p>

 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer supported by the latest standard.

 <ul>
  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply&nbsp;the CSS {{cssxref("text-align")}} property to the attribute.</li>
  <li>To achieve the same effect as the <code>char</code> value, give the {{cssxref("text-align")}} property the same value you would use for&nbsp;the&nbsp;{{htmlattrxref("char", "th")}}.&nbsp;&nbsp;{{unimplemented_inline}} in CSS3,.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header applies&nbsp;to.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is obsolete in the latest standard: use the {{htmlattrxref("scope", "th")}} attribute instead.</div>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
 <dd>This attribute defines the background color of each cell in a&nbsp;column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB" title="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>&nbsp;and is&nbsp;prefixed by&nbsp;'#'. This attribute may be used with one of&nbsp;sixteen predefined color strings:
 <table>
  <tbody>
   <tr>
    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>black</code> = "#000000"</td>
    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>green</code> = "#008000"</td>
   </tr>
   <tr>
    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>silver</code> = "#C0C0C0"</td>
    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>lime</code> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>gray</code> = "#808080"</td>
    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>olive</code> = "#808000"</td>
   </tr>
   <tr>
    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>white</code> = "#FFFFFF"</td>
    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>yellow</code> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>maroon</code> = "#800000"</td>
    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>navy</code> = "#000080"</td>
   </tr>
   <tr>
    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>red</code> = "#FF0000"</td>
    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>blue</code> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>purple</code> = "#800080"</td>
    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>teal</code> = "#008080"</td>
   </tr>
   <tr>
    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>fuchsia</code> = "#FF00FF"</td>
    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>aqua</code> = "#00FFFF"</td>
   </tr>
  </tbody>
 </table>

 <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To create a similar effec&nbsp;use the {{cssxref("background-color")}} property in&nbsp;<a href="/en-US/docs/CSS" title="CSS">CSS</a>.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>The content&nbsp;of&nbsp;a column is&nbsp;aligned to a character in the <font face="Consolas, Liberation Mono, Courier, monospace">&lt;th&gt;&nbsp;</font>element&nbsp;.&nbsp;Typical values&nbsp;include a period (.) to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer&nbsp;supported by the latest standard. To achieve the same effect , you can specify the character as the first&nbsp;value of&nbsp;the&nbsp;{{cssxref("text-align")}} property,&nbsp;&nbsp;{{unimplemented_inline}} in CSS3.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>This attribute is used to&nbsp;shift column&nbsp;data to the right of the&nbsp;character specified by&nbsp;the <strong>char</strong> attribute. Its value specifies the length of this shift.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer supported&nbsp;by the latest standard.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("colspan")}}</dt>
 <dd>This attribute contains a positive integer value that indicates over&nbsp;how many columns a cell is&nbsp;extended. Its default value is <code>1. I</code>f its value is set to <code>0</code>, the cell is extended&nbsp;to the last element of the {{HTMLElement("colgroup")}}. Values higher than 1000 are clipped down to 1000.</dd>
 <dt>{{htmlattrdef("headers")}}</dt>
 <dd>This attribute contains&nbsp;a list of space-separated strings, each corresponding to the <strong>id</strong> attributes of other {{HTMLElement("th")}} elements that relate to this element.</dd>
 <dt>{{htmlattrdef("rowspan")}}</dt>
 <dd>This attribute contains a positive&nbsp;integer value that indicates over&nbsp;how many rows a cells is extended. Its default value is <code>1. I</code>f its value is set to <code>0</code>, the cell is extended to the last element of the&nbsp;table sections ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or&nbsp;{{HTMLElement("tfoot")}}). Values higher than 65534 are clipped down to 65534.</dd>
 <dt>{{htmlattrdef("scope")}}</dt>
 <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values:
 <ul>
  <li><code>row :&nbsp;</code>&nbsp;the header relates to all cells of the row it belongs to;</li>
  <li><code>col :&nbsp;</code>the header relates to all cells of the column&nbsp;it belongs to;</li>
  <li><code>rowgroup : </code>the header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on&nbsp;the value of the {{htmlattrxref("dir", "table")}} attribute in&nbsp;the {{HTMLElement("table")}} element;</li>
  <li><code>colgroup</code>, the header belongs to a colgroup and relates to all of its cells;</li>
  <li><code>auto</code></li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
 <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:
 <ul>
  <li><code>baseline</code>, which will position&nbsp;the text near the bottom of the cell&nbsp;and&nbsp;align it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" title="https://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom. If characters don't descend&nbsp;below&nbsp;the baseline, the baseline&nbsp;value achieves the same effect as 'bottom';</li>
  <li><code>bottom</code>, which will position&nbsp;the text near the bottom of the cell;</li>
  <li><code>middle</code>, which will center the text in the cell;</li>
  <li>and <code>top</code>, which will position&nbsp;the text near the top&nbsp;of the cell;</li>
 </ul>

 <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer supported&nbsp;by&nbsp;the latest standard: use&nbsp;the CSS&nbsp;{{cssxref("vertical-align")}} property instead.</div>
 </dd>
 <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt>
 <dd>This attribute is used to define a recommended cell width. &nbsp;Additional space can be added with the&nbsp;<a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a>&nbsp;properties and the width of the {{HTMLElement("col")}}&nbsp;element can also create extra width.&nbsp;But, if a column's width is too narrow to show a particular cell properly, it will be widened when&nbsp;displayed.
 <div class="note"><strong>Usage Note: </strong>Do not use this attribute in the latest standard: use the CSS {{cssxref("width")}} property instead.</div>
 </dd>
</dl>

<h2 id="DOM_interface">DOM interface</h2>

<p>This element implements the {{domxref("HTMLTableHeaderCellElement")}} interface.</p>

<h2 id="Examples">Examples</h2>

<p>See {{HTMLElement("table")}} for examples on <code>&lt;th&gt;</code>.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>1.0</td>
   <td>{{CompatNo}} [1]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>1.0</td>
   <td>{{CompatNo}} [2]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>align/valign</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} [1]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>char/charoff</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}} [2]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] See {{bug(915)}}.</p>

<p>[2] See {{bug(2212)}}.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
</ul>

<p>{{HTMLRef}}</p>