Open In App

How to specify shorter version of the content in a header cell in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 17 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads