Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM TableHeader abbr Property
The HTML DOM TableHeader abbr property sets or returns the value of the abbr attribute of a table header cell (<th> element). The abbr attribute provides a short abbreviation or description for the header cell content, which is helpful for screen readers and accessibility tools.
Syntax
Following is the syntax for getting the abbr value −
object.abbr
Following is the syntax for setting the abbr value −
object.abbr = "text"
Parameters
text − A string value that specifies the abbreviation or short description for the table header cell.
Return Value
The property returns a string representing the current value of the abbr attribute, or an empty string if the attribute is not set.
Example − Getting abbr Property
Following example demonstrates how to retrieve the abbr property value from table header cells −
<!DOCTYPE html>
<html>
<head>
<title>DOM TableHeader abbr Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; margin: 20px auto; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
th { background-color: #f0f0f0; }
.btn { background: #007bff; color: white; padding: 8px 16px; border: none; cursor: pointer; margin: 10px 5px; }
.result { margin: 20px 0; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM TableHeader abbr Property Demo</h1>
<table>
<thead>
<tr>
<th id="name-header" abbr="Name">Full Name</th>
<th id="lang-header" abbr="Lang">Programming Language</th>
<th id="exp-header" abbr="Exp">Years of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>JavaScript</td>
<td>5 years</td>
</tr>
<tr>
<td>Sarah Johnson</td>
<td>Python</td>
<td>3 years</td>
</tr>
</tbody>
</table>
<button onclick="showAbbr()" class="btn">Show abbr Values</button>
<div id="result" class="result"></div>
<script>
function showAbbr() {
var nameAbbr = document.getElementById("name-header").abbr;
var langAbbr = document.getElementById("lang-header").abbr;
var expAbbr = document.getElementById("exp-header").abbr;
document.getElementById("result").innerHTML =
"Name column abbr: " + nameAbbr + "<br>" +
"Language column abbr: " + langAbbr + "<br>" +
"Experience column abbr: " + expAbbr;
}
</script>
</body>
</html>
The output displays the table with headers containing abbr attributes. Clicking the button shows the abbreviation values −
Name column abbr: Name Language column abbr: Lang Experience column abbr: Exp
Example − Setting abbr Property
Following example shows how to set the abbr property dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting abbr Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; margin: 20px auto; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: center; }
th { background-color: #e8f4fd; }
.btn { background: #28a745; color: white; padding: 8px 16px; border: none; cursor: pointer; margin: 5px; }
.info { margin: 20px 0; padding: 10px; background: #f8f9fa; border-left: 4px solid #007bff; }
</style>
</head>
<body>
<h1>Setting TableHeader abbr Property</h1>
<table>
<thead>
<tr>
<th id="product">Product Name</th>
<th id="price">Price in USD</th>
<th id="rating">Customer Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smartphone</td>
<td>$599</td>
<td>4.5/5</td>
</tr>
<tr>
<td>Laptop</td>
<td>$899</td>
<td>4.8/5</td>
</tr>
</tbody>
</table>
<button onclick="setAbbr()" class="btn">Set abbr Attributes</button>
<button onclick="checkAbbr()" class="btn">Check abbr Values</button>
<div id="info" class="info"></div>
<script>
function setAbbr() {
document.getElementById("product").abbr = "Prod";
document.getElementById("price").abbr = "Price";
document.getElementById("rating").abbr = "Rating";
document.getElementById("info").innerHTML =
"abbr attributes have been set successfully!";
}
function checkAbbr() {
var prodAbbr = document.getElementById("product").abbr;
var priceAbbr = document.getElementById("price").abbr;
var ratingAbbr = document.getElementById("rating").abbr;
document.getElementById("info").innerHTML =
"Current abbr values:<br>" +
"Product: '" + prodAbbr + "'<br>" +
"Price: '" + priceAbbr + "'<br>" +
"Rating: '" + ratingAbbr + "'";
}
</script>
</body>
</html>
Initially, the headers have no abbr attributes. After clicking "Set abbr Attributes", the JavaScript adds abbreviations, which can then be viewed by clicking "Check abbr Values" −
Current abbr values: Product: 'Prod' Price: 'Price' Rating: 'Rating'
Browser Compatibility
The TableHeader abbr property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. However, the visual display of abbreviations may vary across different assistive technologies.
Key Points
-
The
abbrproperty only works on<th>(table header) elements, not on regular<td>elements. -
Setting an empty string (
"") effectively removes theabbrattribute from the header cell. -
The
abbrattribute improves table accessibility for screen readers by providing concise descriptions of header content. -
The property returns an empty string if no
abbrattribute is set on the header cell.
Conclusion
The HTML DOM TableHeader abbr property provides a way to programmatically access and modify abbreviations for table header cells. This property is particularly useful for enhancing table accessibility and creating dynamic, screen reader-friendly web applications.
95 Views
