Javascript Reference - HTML DOM Column span Property

The span property from Column class sets or gets the value of the span attribute.

The span attribute from col element defines the number of columns a <col> element should span.

Browser Support


`span`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the span property:

var aValue = columnObject.span;

Set the formMethod property:

columnObject.span = number;

Property Values

Value	Description
number	Set the number of columns a <col> element would span. Negative values are not allowed

Return Value

The number of columns a col element would span.

Example

The following code shows how to get the number of columns a <col> element should span.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--  www  .j av a2s  .c om-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <colgroup>
    <col id="myCol" span="2">
    <col style="background-color:red">
  </colgroup>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3</td>
    <td>HTML</td>
    <td>$3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>CSS</td>
    <td>$4</td>
  </tr>
</table>
<p id="demo"></p>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("myCol").span;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to set the background color of the first two columns to red and set the column span to 2.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--from   w w  w .j  a va  2 s. c  om-->
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <colgroup>
    <col id="myCol">
    <col style="background-color:blue">
  </colgroup>
  <tr>
    <th>A</th><th>B</th><th>Price</th>
  </tr>
  <tr><td>3</td><td>HTML</td><td>$5</td></tr>
  <tr><td>5</td><td>CSS</td><td>$49</td></tr>
</table>
<p id="demo"></p>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myCol").span = "2";
    document.getElementById("myCol").style.backgroundColor = "red";
}
</script>
</body>
</html>

The code above is rendered as follows: