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";
}