এইচটিএমএল <colgroup> ট্যাগ
<colgroup> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<colgroup> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
<colgroup> ট্যাগ ব্যবহার করে টেবিলের এক বা একাধিক কলামকে সাজানো হয়।
প্রতিটি কলাম, সারির জন্য স্টাইল রিপিট করার চেয়ে, <colgroup> এলিমেন্ট ব্যবহার করে সম্পূর্ন কলাম এবং সারির জন্য স্টাইল প্রয়োগ করা বেশি উপকারী।
<colgroup> ট্যাগটিকে অবশ্যই <table> এলিমেন্টের চাইল্ড হতে হবে। এছাড়াও এর অবস্থান অবশ্যই <caption> এলিমেন্টের পরে এবং <thead>, <tbody>, <tfoot>, এবং <tr> এলিমেন্টের পূর্বে হতে হবে।
একটি <colgroup> ট্যাগের মধ্যে বিভিন্ন প্রোপার্টি যুক্ত করতে, এর সাথে <col> ট্যাগ ব্যবহার করুন।
<colgroup> এবং <col> ট্যাগ ব্যবহার করে কিভাবে খুব সহজে কলামের ব্যাকগ্রাউন্ড কালার সেট করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:teal">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>নাম</th>
<th>আয়</th>
<th>সঞ্চয়</th>
</tr>
<tr>
<td>ভিভিয়ান ঘোষ</td>
<td>২৫০০০</td>
<td>৫০০০</td>
</tr>
<tr>
<td>আতাউর রহমান</td>
<td>২০০০০</td>
<td>৪০০০</td>
</tr>
<tr>
<td>নিজাম উদ্দীন</td>
<td>৩০০০০</td>
<td>৬০০০</td>
</tr>
</table>
</body>
</html>
ফলাফল
এট্রিবিউট
নিচের টেবিলে <colgroup> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| align | left right center justify char |
এইচটিএমএল(৫)-এ সাপোর্ট করে না।<col> এলিমেন্টের সাথে সম্পর্কিত কন্টেন্টের এলাইনমেন্ট নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
| char | character | এইচটিএমএল(৫)-এ সাপোর্ট করে না। একটি ক্যারেক্টারে <col>এলিমেন্টের সাথে সম্পর্কিত কন্টেন্টের এলাইনমেন্ট নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
| charoff | number | এইচটিএমএল(৫)-এ সাপোর্ট করে না। |
span |
number | <col> এলিমেন্টটি কতোটি span জুড়ে হবে তা নির্দিষ্ট করার জন্য ব্যবহার করা হয়। |
| valign | top middle bottom baseline |
এইচটিএমএল(৫)-এ সাপোর্ট করে না।<col> এলি্মেন্টের সাথে সম্পর্কিত কন্টেন্টের ভার্টিক্যাল এলাইনমেন্ট নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
| width | % pixels relative_length |
এইচটিএমএল(৫)-এ সাপোর্ট করে না।<col> এলিমেন্টের width নির্দিষ্ট করার জন্য ব্যবহৃত হয়। |
<colgroup> ট্যাগটি গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<colgroup> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <colgroup> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
col {
display: table-column;
}