HTML DOM ColumnGroup স্প্যান প্রপার্টি HTML
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলColumnGroup স্প্যান প্রপার্টি −
সেট করা হচ্ছেcolumngroupObject.span = number
এখানে, সংখ্যাটি
উদাহরণ
আসুন 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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা দুটি সারি এবং তিনটি কলাম সহ একটি টেবিল তৈরি করেছি৷ এছাড়াও টেবিল, থ এবং টিডি উপাদানগুলিতে কিছু স্টাইলিং প্রয়োগ করা হয়েছে -
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> তারপরে আমরা একটি পরিবর্তন বোতাম তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করলে changeColor() পদ্ধতি কার্যকর করবে৷
<button onclick="changeColor()">CHANGE</button>
changeColor() ফাংশন getElementById() পদ্ধতি ব্যবহার করে
function changeColor() {
document.getElementById("Colgroup1").span = "2";
document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
} 