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> <!-- Use the abbr attribute to specify the shorter version --> <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.
Please Login to comment...