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.
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>
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.
<th abbr="text">
| Value | Description |
|---|---|
| text | A short text string. |
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 |
Back to <th>
