Horje
What is HTML <th> Tag

Definition and Usage

The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the <th> element)
  • Data cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.


Browser Support

Attributes

Attribute Value Description
abbr text Specifies an abbreviated version of the content in a header cell
colspan number Specifies the number of columns a header cell should span
headers header_id Specifies one or more header cells a cell is related to
rowspan number Specifies the number of rows a header cell should span
scope col
colgroup
row
rowgroup
Specifies whether a header cell is a header for a column, row, or group of columns or rows

Global Attributes

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


Event Attributes

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


How to create HTML <th> Tag

It is A simple HTML table with three rows, two header cells and four data cells.
index.html
Example: HTML
 <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to create HTML <th> Tag

How to align content inside <th> (with CSS)

Left-align content in th.

index.html
Example: HTML
 <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>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to align content inside <th> (with CSS)

How to add background-color to table header cell (with CSS)

Add Background Color to th.

index.html
Example: HTML
 <table>
  <tr>
    <th style="background-color:#FF0000">Month</th>
    <th style="background-color:#00FF00">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table> 

Output should be:

How to add background-color to table header cell (with CSS)

How to set the height of a table header cell (with CSS)

Add Specific Height to th.

index.html
Example: HTML
 <table>
  <tr>
    <th style="height:100px">Month</th>
    <th style="height:100px">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

Output should be:

How to set the height of a table header cell (with CSS)

How to specify no word-wrapping in table header cell (with CSS)

Add Nowrap to th.

index.html
Example: HTML
 <table>
  <tr>
    <th>Month</th>
    <th style="white-space:nowrap">My Savings for a new car</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

Output should be:

How to specify no word-wrapping in table header cell (with CSS)

How to vertical align content inside <th> (with CSS)

Vertical-align content in th.

index.html
Example: HTML
 <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>$100</td>
  </tr>
</table> 

Output should be:

How to vertical align content inside <th> (with CSS)

How to set the width of a table header cell (with CSS)

Add a width i percent for ths.

index.html
Example: HTML
 <table style="width:100%">
  <tr>
    <th style="width:70%">Month</th>
    <th style="width:30%">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

Output should be:

How to set the width of a table header cell (with CSS)

How to create table headers with th

Table Headers
  1. Horizontal headers
  2. Vertical headers
index.html
Example: HTML
 <table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
  </tr>
</table> 

Output should be:

How to create table headers with th

How to create a table with a caption with th

The caption element.

index.html
Example: HTML
 <table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to create a table with a caption with th

How to define table cells that span more than one row or one column on th

Colspan and rowspan.

index.html
Example: HTML
 <table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table> 

Output should be:

How to define table cells that span more than one row or one column on th

How to set Default CSS Settings on HTML th Tag

Most browsers will display the <th> element with the following default values.

index.html
Example: HTML
<style>
th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}
</style>
 <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to set Default CSS Settings on HTML th Tag

How to add HTML <th> abbr Attribute

Use of the abbr attribute in an HTML table:

Definition and Usage

The abbr attribute specifies a shorter version of the content in a header cell.

Note: The abbr attribute has no visual effect in ordinary web browsers, but can be used by screen readers. 


Browser Support

Syntax

<th abbr="text">

Attribute Values

Value Description
text A short description of the header cell content
index.html
Example: HTML
 <table>
  <tr>
    <th abbr="Make">Toy manufacturer</th>
    <th abbr="Model">Vehicle model</th>
  </tr>
  <tr>
    <td>Bruder Toys</td>
    <td>Cross Country Vehicle</td>
  </tr>
  <tr>
    <td>Bruder Toys</td>
    <td>DHL Lorry</td>
  </tr>
</table> 

Output should be:

How to add HTML <th> abbr Attribute

How to add HTML <th> colspan Attribute

It is An HTML table with a header cell that spans two columns.

Definition and Usage

The colspan attribute defines the number of columns a header cell should span.


Browser Support

Note: Only Firefox supports colspan="0", which has a special meaning (look below in the "Attribute Values" table).


Syntax

<th colspan="number">

Attribute Values

Value Description
number Sets the number of columns a header cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
index.html
Example: HTML
 <table>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to add HTML <th> colspan Attribute

How to add HTML <th> headers Attribute

It Specify the <th> element each header cell is related to.

Definition and Usage

The headers attribute specifies one or more header cells a header cell is related to.

Note: The headers attribute has no visual effect in ordinary web browsers, but can be used by screen readers. 


Browser Support

Syntax

<th headers="header_id">

Attribute Values

Value Description
header_id Specifies a space-separated list of id's to one or more header cells the header cell is related to
index.html
Example: HTML
 <table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <th headers="name">Firsname</th>
    <th headers="name">Lastname</th>
  </tr>
</table> 

Output should be:

How to add HTML <th> headers Attribute

How to add HTML <th> rowspan Attribute

It is An HTML table with a header cell that spans three rows.

Definition and Usage

The rowspan attribute defines the number of rows a header cell should span.


Browser Support

Syntax

<th rowspan="number">

Attribute Values

Value Description
number Sets the number of rows a header cell should span. Note: rowspan="0" tells the browser to span the cell to the last row of the table section (thead, tbody, or tfoot)

 

index.html
Example: HTML
 <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th rowspan="3">Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to add HTML <th> rowspan Attribute

How to add HTML <th> scope Attribute

It Specify that the two header cells are headers for columns.

Definition and Usage

The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.

Note: The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers. 


Browser Support

Syntax

<th scope="col|row|colgroup|rowgroup">

Attribute Values

Value Description
col Specifies that the cell is a header for a column
row Specifies that the cell is a header for a row
colgroup Specifies that the cell is a header for a group of columns
rowgroup Specifies that the cell is a header for a group of rows
index.html
Example: HTML
 <table>
  <tr>
    <th></th>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td>1</td>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>2</td>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Output should be:

How to add HTML <th> scope Attribute




html th

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <th> TagHTML Tag
How to align content inside <th> (with CSS)HTML Tag
How to add background-color to table header cell (with CSS)HTML Tag
How to set the height of a table header cell (with CSS)HTML Tag
How to specify no word-wrapping in table header cell (with CSS)HTML Tag
How to vertical align content inside <th> (with CSS)HTML Tag
How to set the width of a table header cell (with CSS)HTML Tag
How to create table headers with thHTML Tag
How to create a table with a caption with thHTML Tag
How to define table cells that span more than one row or one column on thHTML Tag
How to set Default CSS Settings on HTML th TagHTML Tag
How to add HTML <th> abbr AttributeHTML Tag
How to add HTML <th> colspan AttributeHTML Tag
How to add HTML <th> headers AttributeHTML Tag
How to add HTML <th> rowspan AttributeHTML Tag
How to add HTML <th> scope AttributeHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded:
3 weeks ago
Uploaded by:
Admin
Views:
65


Reffered: https://www.w3schools.com/tags/tag_th.asp

Share on: