How to specify shorter version of the content in a header cell in HTML5 ?
In this article, we will learn how to specify a shorter version of the content in a header cell. This can be helpful for screen reader users as they do not need to read out larger headings or make it easy to understand known abbreviations. The <th> tag is used to specify the heading for an <table> element and the content of the heading is defined in-between the heading tags.
Approach: The abbr attribute of the <th> tag is used to specify an abbreviation of the header content. This will have no effect on a normal web browser. However, screen readers would be able to read the information.
Syntax:
<th abbr="text">
The below examples illustrate the abbr attribute to specify the shorter version of the content of the header cell.
Example:
HTML
< html >
< style >
table {
border: 2px solid;
padding: 4px;
margin: 4px;
width: 100%;
}
th {
background-color: yellowgreen;
}
</ style >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to specify a shorter version of
the content in a header cell
</ h3 >
< table >
< tr >
< th abbr = "S. No" >Serial Number</ th >
< th abbr = "DOB" >Date of Birth</ th >
< th abbr = "Ph. No." >Phone Number</ th >
</ tr >
< tr >
< td >1</ td >
< td >12/04/1991</ td >
< td >099-91929349</ td >
</ tr >
< tr >
< td >2</ td >
< td >06/03/2000</ td >
< td >099-12345678</ td >
</ tr >
< tr >
< td >3</ td >
< td >16/07/2020</ td >
< td >099-12334678</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output: The abbreviations would not be displayed as normal web browsers do not display them.
Last Updated :
17 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...