HTML | DOM TableHeader abbr Property

Last Updated : 24 Aug, 2022

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.

HTML

<!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 return TableHeader abbr Property -->
    <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.

HTML

<!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 set the TableHeader abbr Property -->
    <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>