Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 17 Mar, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :