Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM TableHeader abbr Property
  • Last Updated : 10 Apr, 2019

The DOM TableHeader abbr Property is used to sets or returns the value of the abbr attribute. The abbr attribute is used to specify the shorter version of the content in a header cell.
It has no visual effect on the ordinary web browser and can be used by screen readers.

Syntax:

  • It returns the abbr property.
    tableheaderObject.abbr
  • It is used to set the abbr property.
    tableheaderObject.abbr = text

Property Values: It contains the value i.e text which specify the shorter description of a header content cell.

Return Value: It returns a string value which represents the shorter description of a header content cell.

Example-1: This Example returns a abbr Property.






<!DOCTYPE html>
<html>
  
<head>
  
    <!-- style to set border -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
    <h2>
      DOM TableHeader abbr Property
  </h2>
  
    <table>
        <tr>
            <th id="table" 
                abbr="GeeksforGeeks">
              Username
          </th>
        </tr>
  
        <tr>
            <td>geeks</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="sudo"
       style="font-size:25px;
              color:green">
  </p>
    <!-- Script to access th element -->
    <script>
        function myGeeks() {
            var tab = document.getElementById(
              "table").abbr;
            document.getElementById(
              "sudo").innerHTML = tab;
        }
    </script>
</body>
  
</html>

Output:
Before Clicking On Button:

After Clicking On Button:

Example-2: This Example sets the abbr Property.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- style to set border -->
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
  
    <h2>
      DOM TableHeader abbr Property
  </h2>
  
    <table>
        <tr>
            <th id="table" 
                abbr="GeeksforGeeks">
              Username
          </th>
        </tr>
  
        <tr>
            <td>geeks</td>
        </tr>
    </table>
    <br>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="sudo" 
       style="font-size:25px;
              color:green">
  </p>
    <!-- Script to access th element -->
    <script>
        function myGeeks() {
            var tab = document.getElementById(
              "table").abbr = "GeeksUser";
            
            document.getElementById(
              "sudo").innerHTML =
              "The value of the abbr attribute was changed to "
            + tab;
        }
    </script>
</body>
  
</html>

Output:
Before Clicking On Button:

After Clicking On button:

Supported Browsers:

  • Google Chrome
  • Internet Explorer 10.0+
  • Opera
  • Apple Safari
  • Mozilla Firefox



My Personal Notes arrow_drop_up
Recommended Articles
Page :