HTML <th> tag

Definition and usage

<th> The <th> tag defines the title cell in an HTML table.

HTML tables have two types of cells:

  • Title cell - contains title information (using <th> element creation)
  • Data cell - contains data (using <td> element creation)

By default,<th> The text in the element is bold and centered.

By default, the text in <td> elements is plain and left-aligned.

See also:

HTML Tutorial:HTML Table

HTML DOM Reference Manual:TableHeader Object

CSS Tutorial:Set the style of the form

Example

Example 1

A simple HTML table containing three rows, two title cells, and four data cells:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Example 2

How to align <th> content (using CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Month</th>
    <th style="text-align:left">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Example 3

How to add background color to table title cells (using CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Month</th>
    <th style="background-color:#00FF00">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
 </table>

Try it yourself

Example 4

How to set the height of the table title cell (using CSS):

<table>
  <tr>
    <th style="height:100px">Month</th>
    <th style="height:100px">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 5

How to specify non-breaking in table caption cells (using CSS):

<table>
  <tr>
    <th>Month</th>
    <th style="white-space:nowrap">Money saved for a new car</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 6

How to vertically align <th> content (using CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Month</th>
    <th style="vertical-align:bottom">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 7

How to set the width of table caption cells (using CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Month</th>
    <th style="width:30%">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 8

How to create table captions:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try it yourself

Example 9

How to create a table with a caption:

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Example 10

How to define table cells spanning multiple rows or columns:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Try it yourself

Attribute

Attribute Value Description
abbr Text Specify the abbreviated version of the content in the header cell.
colspan Number Specify the number of columns that the header cell should span.
headers header_id Specify one or more header cells related to the cell.
rowspan Number Specify the number of rows that the header cell should span.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Whether the table header cell is a column header, row header, or the header of a group of columns or rows.

Global Attributes

<th> The tag also supports Global Attributes in HTML.

Event Attributes

<th> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <th> Element:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
{}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support