HTML DOM Column object

The HTML DOM Column object is associated with the HTML

element. The Column object is used to get or set the properties of element. The tag is used only inside a element.

Properties

Following is the property for column object ?

Property	Description
Span	To set or return the span attribute value of a column.

Syntax

Following is the syntax for ?

Creating a Column object ?

var a = document.createElement("COL");

Example

Let us see an example for the column object ?

COL OBJECT

Fruit	Color	Price
Mango	Yellow	100Rs
Guava	Green	50Rs

Click the below button to get span of the "COL1" col element

COLUMN

Output

This will produce the following output ?

On clicking COLUMN button ?

In the above example we have created a table with 2 rows and 3 columns. The table overall has a style applied to it. Inside the table, we have two

elements with one having span equals 2 and other has an inline style applied to it. Since for the first span equals 2, its style will apply to exactly two columns and the second will apply its style to the remaining columns ?

table, th, td {
   border: 1px solid blue;
}
#Col1{
   background-color:pink;
}

Fruit	Color	Price
Mango	Yellow	100Rs
Guava	Green	50Rs

We have then created a button COLUMN that will execute the colObj() method when clicked by the user ?

COLUMN

The colObj() method gets the first

element by using the getElementById() method on document object. It then gets the span attribute value of the element and assigns it to the variable x. The span attribute value that is stored in variable x is then displayed in the paragraph with id "Sample" using the innerHTML property of the paragraph ?

function colObj() {
   var x = document.getElementById("Col1").span;
   document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}