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 Column object
The HTML DOM Column object represents the HTML <col> element in the Document Object Model. This object allows you to manipulate column properties within HTML tables programmatically. The <col> element is used exclusively within <table> elements to define column properties that can be applied to entire table columns at once.
Syntax
Following is the syntax for accessing an existing Column object −
var columnElement = document.getElementById("columnId");
Following is the syntax for creating a new Column object −
var newColumn = document.createElement("COL");
Properties
The Column object supports the following key property −
| Property | Description |
|---|---|
span |
Sets or returns the number of columns the <col> element should span across. |
How Column Objects Work
The <col> element is placed inside a <colgroup> element within the table structure. It allows you to apply styling and properties to entire columns without having to style each individual cell. The span attribute determines how many consecutive columns the column definition affects.
Example − Accessing Column Span Property
Following example demonstrates how to access and display the span property of a Column object −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Column Object</title>
<style>
table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 8px;
}
#Col1 {
background-color: lightblue;
}
#Col2 {
background-color: lightgreen;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>HTML DOM Column Object Example</h3>
<table>
<colgroup>
<col id="Col1" span="2">
<col id="Col2">
</colgroup>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$999</td>
</tr>
<tr>
<td>Phone</td>
<td>Electronics</td>
<td>$599</td>
</tr>
</table>
<p>Click the button to get the span value of the first column group:</p>
<button onclick="getColumnSpan()">Get Column Span</button>
<p id="result"></p>
<script>
function getColumnSpan() {
var columnElement = document.getElementById("Col1");
var spanValue = columnElement.span;
document.getElementById("result").innerHTML =
"The first column element spans " + spanValue + " columns.";
}
</script>
</body>
</html>
The output displays a styled table where the first two columns have a light blue background (due to span="2") and the third column has a light green background −
Product Category Price Laptop Electronics $999 Phone Electronics $599 (First two columns: light blue, Third column: light green) Clicking button displays: "The first column element spans 2 columns."
Example − Creating a Column Object
Following example shows how to dynamically create a new Column object and add it to a table −
<!DOCTYPE html>
<html>
<head>
<title>Creating Column Object</title>
<style>
table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Dynamic Column Creation</h3>
<table id="myTable">
<colgroup id="colGroup">
<!-- Columns will be added dynamically -->
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
<button onclick="addColumn()">Add Column Styling</button>
<script>
function addColumn() {
var newCol = document.createElement("COL");
newCol.span = 2;
newCol.style.backgroundColor = "yellow";
var colGroup = document.getElementById("colGroup");
colGroup.appendChild(newCol);
}
</script>
</body>
</html>
Clicking the button creates a new <col> element with span="2" and yellow background, styling the first two columns of the table.
Common Use Cases
Column objects are particularly useful for −
Table styling − Applying consistent styles to entire columns without repeating CSS for each cell.
Column grouping − Using the
spanattribute to group multiple columns under one styling rule.Dynamic table manipulation − Adding or modifying column properties programmatically based on user interaction or data changes.
Responsive design − Modifying column properties to adapt table layouts for different screen sizes.
Browser Compatibility
The HTML DOM Column object is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. The span property is universally supported across these browsers.
Conclusion
The HTML DOM Column object provides a powerful way to manipulate table column properties through JavaScript. By using the span property and CSS styling, you can create flexible, well-structured table layouts that can be dynamically modified based on application requirements.
181 Views
