Thuộc tính span HTML ColumnGroup trong HTML được liên kết với thuộc tính span của phần tử HTML
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính span ColumnGroup -
columngroupObject.span = number
Ở đây, số chỉ định số cột mà phần tử
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính ColumnGroup span -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table> <p>lick the button to change the background color of the first two columns. <button onclick="changeColor()">CHANGE</button> <script> function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; } </script> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI -
Trong ví dụ trên -
Chúng tôi đã tạo một bảng có hai hàng và ba cột, cũng có một số kiểu được áp dụng cho các phần tử bảng, thứ và td -
table, th, td { border: 1px solid blue; } <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table>
Sau đó, chúng tôi đã tạo một nút CHANGE sẽ thực thi phương thức changeColor () khi người dùng nhấp vào.
<button onclick="changeColor()">CHANGE</button>
Hàm changeColor () nhận phần tử
function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; }