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 Table caption Property
The HTML DOM table caption property is used to get or set the caption of an HTML table element. The caption provides a title or description for the table content and is typically displayed above the table.
Syntax
Following is the syntax for getting the caption property −
tableObject.caption
Following is the syntax for setting the caption property −
tableObject.caption = captionObject
Property Values
The caption property accepts the following values −
- captionObject − A reference to the caption element object, or null if no caption exists.
Return Value
The caption property returns a reference to the <caption> element of the table, or null if no caption element exists.
Getting Table Caption
The caption property allows you to access the existing caption element of a table. If no caption exists, it returns null.
Example
Following example demonstrates how to get the table caption −
<!DOCTYPE html>
<html>
<head>
<title>Get Table Caption</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Table Caption Example</h2>
<table border="1" id="myTable" style="margin: 20px auto;">
<caption style="font-weight: bold; color: blue;">Student Records</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
<button onclick="getCaption()" style="padding: 10px; margin: 10px;">Get Caption</button>
<p id="result"></p>
<script>
function getCaption() {
var table = document.getElementById("myTable");
var caption = table.caption;
if (caption) {
document.getElementById("result").innerHTML = "Caption text: " + caption.innerHTML;
} else {
document.getElementById("result").innerHTML = "No caption found.";
}
}
</script>
</body>
</html>
The output displays the existing caption text when the button is clicked −
Caption text: Student Records
Setting Table Caption
You can set or modify the caption of a table by assigning a caption element to the caption property. If no caption exists, you can create one using createCaption() method first.
Example
Following example shows how to set a table caption −
<!DOCTYPE html>
<html>
<head>
<title>Set Table Caption</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Table Caption Example</h2>
<table border="1" id="dataTable" style="margin: 20px auto;">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Phone</td>
<td>$699</td>
</tr>
</table>
<button onclick="setCaption()" style="padding: 10px; margin: 10px;">Add Caption</button>
<script>
function setCaption() {
var table = document.getElementById("dataTable");
// Create caption if it doesn't exist
if (!table.caption) {
table.createCaption();
}
// Set caption text and style
table.caption.innerHTML = "Product Price List";
table.caption.style.fontWeight = "bold";
table.caption.style.color = "green";
table.caption.style.fontSize = "18px";
}
</script>
</body>
</html>
Clicking the button adds a styled caption above the table.
Using createCaption() Method
The createCaption() method creates an empty <caption> element and adds it to the table. If a caption already exists, it returns the existing one without creating a new one.
Example
Following example demonstrates the createCaption() method −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table createCaption() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>DOM Table createCaption() Method Demo</h1>
<table border="2" id="studentTable" style="margin: 20px auto;">
<tr>
<td>Name</td>
<td>Roll No.</td>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="createCaption()" style="background: #007bff; border: none; padding: 10px 20px; color: white; border-radius: 4px; cursor: pointer; margin: 10px;">Create Caption</button>
<script>
function createCaption() {
var table = document.getElementById('studentTable');
var tableCaption = table.createCaption();
tableCaption.innerHTML = "Student Data";
tableCaption.style.color = "#dc3545";
tableCaption.style.fontSize = "20px";
tableCaption.style.fontWeight = "bold";
}
</script>
</body>
</html>
The output shows a table without caption initially. Clicking "Create Caption" adds a red, bold caption above the table −
Before click: Table without caption After click: Student Data (red, bold text above table)
Removing Table Caption
To remove a table caption, you can use the deleteCaption() method or set the caption property to null.
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Table Caption</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Remove Caption Example</h2>
<table border="1" id="sampleTable" style="margin: 20px auto;">
<caption style="font-weight: bold; color: red;">Sample Table Caption</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<button onclick="removeCaption()" style="padding: 10px; margin: 10px;">Remove Caption</button>
<script>
function removeCaption() {
var table = document.getElementById("sampleTable");
table.deleteCaption();
}
</script>
</body>
</html>
Clicking the button removes the caption from the table entirely.
Conclusion
The HTML DOM table caption property provides access to the table's caption element for reading, setting, or modifying table captions dynamically. Use createCaption() to add captions and deleteCaption() to remove them, making tables more accessible and user-friendly.
205 Views
