Javascript Reference - HTML DOM TableData ColSpan Property

Trang chủ » Html Colspan Javascript » Javascript Reference - HTML DOM TableData ColSpan Property

Có thể bạn quan tâm

Javascript Reference - HTML DOM TableData colSpan Property

The colSpan property sets or gets the colspan attribute.

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

Browser Support

colSpan Yes Yes Yes Yes Yes

Syntax

Return the colSpan property.

var v = tabledataObject.colSpan

Set the colSpan property.

tabledataObject.colSpan=number

Property Values

Value Description
number Specifies the number of columns a cell should span

Return Value

A Number type value representing the number of columns a table cell should span.

Example

The following code shows how to change the number of columns a table cell should span.

<!DOCTYPEhtml> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td id="myTd" colspan="2">A</td> <td>$1</td> </tr> <tr> <td>February</td> <td>$0</td> </tr> </table> <br> <button onclick="myFunction()">test</button> <script> function myFunction() { document.getElementById("myTd").colSpan = "1"; } </script> </body> </html>

The code above is rendered as follows:

Example 2

The following code shows how to get the number of columns a specific table cell should span.

<!DOCTYPEhtml> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td id="myTd" colspan="2">A</td> <td>$1</td> </tr> <tr> <td>B</td> <td>$10</td> </tr> </table> <br> <button onclick="myFunction()">test</button> <p id="demo"></p> <script> function myFunction(x) { var x = document.getElementById("myTd").colSpan; document.getElementById("demo").innerHTML = "The value of colspan is: " + x; } </script> </body> </html>

The code above is rendered as follows:

  • Back to <td> ↑

Từ khóa » Html Colspan Javascript