HTML/Elements/th

From W3C Wiki
< HTML‎ | Elements
Jump to: navigation, search

<th>

The <th> element represents a header cell in a table.

Point

  • The th element can specify the cell which the influence of headding cell reaches by the scope attribute.

HTML Attributes

  • colspan = valid non-negative integer
    This attribute gives the number of columns respectively that the cell is to span.
  • rowspan = valid non-negative integer
    This attribute gives the number of rows respectively that the cell is to span. [Example B]
  • headers = unordered set of unique space-separated tokens
    The value of this attribute must have the value of an id attribute of the th element that is targeted. [Example C]
  • scope = row/ col/ rowgroup/ colgroup
    The scope attribute specifies the cell which the influence of headding cell reaches. [Example D]
    • row
      The header cell applies to some of the subsequent cells in the same row(s).
    • col
      The header cell applies to some of the subsequent cells in the same column(s).
    • rowgroup
      The header cell applies to all the remaining cells in the row group. A th element's scope attribute must not be in the row group state if the element is not anchored in a row group.
    • colgroup
      The header cell applies to all the remaining cells in the column group. A th element's scope attribute must not be in the column group state if the element is not anchored in a column group.

See also global attributes.

Examples

Example A

[try it]

<table>
  <caption>
    <p>table 1. List of HTML elements</p>
  </caption>
  <thead>
    <tr>
      <th>Number</th>
      <th>element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4.1.1</td>
      <td>html</td>
    </tr>
    <tr>
      <td>4.2.1</td>
      <td>head</td>
    </tr>
  </tbody>
</table>

Th01.png

Example B

[try it]:

<table>
  <caption>
    <p>table 1. Sample table</p>
  </caption>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

Th02.png

Example C

Use case of the headers attribute [try it]:

<table>
  <caption>
    <p>table 1. List of HTML elements</p>
  </caption>
  <thead>
    <tr>
      <th id="c1">Number</th>
      <th id="c2">element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="c1">4.1.1</td>
      <td headers="c2">html</td>
    </tr>
    <tr>
      <td headers="c1">4.2.1</td>
      <td headers="c2">head</td>
    </tr>
  </tbody>
</table>

Th03.png

Example D

The scope attribute specifies the cell which the influence of headding cell reaches [try it]:

<table>
  <caption>
    <p>table 1. List of HTML elements</p>
  </caption>
  <thead>
    <tr>
      <th scope="row">Number</th>
      <th scope="row">element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4.1.1</td>
      <td>html</td>
    </tr>
    <tr>
      <td>4.2.1</td>
      <td>head</td>
    </tr>
  </tbody>
</table>

Th04.png

HTML Reference

The HTML5 specification defines the <th> element in 4.9.10 The th element.