Javascript DOM TableData Get And Set Column Span Property

Trang chủ » Html Colspan Javascript » Javascript DOM TableData Get And Set Column Span Property

Có thể bạn quan tâm

Javascript DOM TableData Get and Set column Span Property PreviousNext

Example

Change the number of columns a table cell should span:

Copy document.getElementById("myTd").colSpan = "1"; Open in separate windowView full source codeCopy<!DOCTYPEhtml> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <p>Click the button to change the value of the colspan attribute, from 2 to 1, of td with id "myTd".</p> <table> <tr> <th>Month</th> <th>Usage</th> </tr> <tr> <td id="myTd" colspan="2">January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$100</td> </tr> </table> <br> <button onclick="myFunction()">Test</button> <script> function myFunction() { document.getElementById("myTd").colSpan = "1"; } </script> </body> </html>

Description

The colSpan property gets and sets the value of the colspan attribute.

The colspan attribute specifies the number of columns a table cell should span.

We can use the rowSpan property to set or return the value of the rowspan attribute.

Browser Compatibility

Chrome.png Node.png Firefox.png Safari.png Edge.png Opera.png
colSpan Yes Yes Yes Yes Yes Yes

Syntax

Return the colSpan property:

Copy let a = tabledataObject.colSpan;

Set the colSpan property:

Copy tabledataObject.colSpan = number;

Property Values

Parameter Description
number the number of columns a cell should span

Return Value

A Number, representing the number of columns a table cell should span

More Examples

Return the number of columns a specific table cell should span:

Copy let x = document.getElementById("myTd").colSpan; Open in separate windowView full source codeCopy<!DOCTYPEhtml> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <p>Click the button to return the value of the colspan attribute of td with id "myTd".</p> <table> <tr> <th>Month</th> <th>Usage</th> </tr> <tr> <td id="myTd" colspan="2">January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$100</td> </tr> </table> <br> <button onclick="myFunction()">Test</button> <p id="demo"></p> <script> function myFunction(x) { let x = document.getElementById("myTd").colSpan; document.getElementById("demo").innerHTML = "The value of colspan is: " + x; } </script> </body> </html> PreviousNext

Related

  • Javascript DOM TBody Object
  • Javascript DOM TableData Object
  • Javascript DOM TableData Get and Set cell Index Property
  • Javascript DOM TableData Get and Set column Span Property
  • Javascript DOM TableData Get and Set headers collection Property
  • Javascript DOM TableData Get and Set row Span Property
  • Javascript DOM Textarea Object

Từ khóa » Html Colspan Javascript