HTML <th> abbr Attribute

The abbr attribute on a <th> tag adds a shorter version of the text inside the table header cell. This value has no visual effect and is used by screenreaders, JavaScript, etc.

Example

#

An abbr attribute on <th> elements.

Product Name Country of Origin
Gucci Shoes Italy
Apple iPhone USA
Ikea Gerton Sweden
<style>
  table.tb { width: 350px; border-collapse: collapse; }
  .tb th { background-color: aliceblue; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
</style>

<table class="tb">
  <tr>
    <th abbr="Product">Product Name</th> 
    <th abbr="Country">Country of Origin</th>
  </tr>
  <tr>
    <td>Gucci Shoes</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Apple iPhone</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Ikea Gerton</td>
    <td>Sweden</td>
  </tr>
</table>

Using abbr

The abbr attribute adds a shorter version of the content of the table header cell.

This value does not add any visual effect.

It is used by screen readers, JavaScript, and others.


Syntax

<th abbr="text">

Values

#

Value Description
text A short text string.

Browser support

Here is when abbr support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <th>
Guides