HTML <col> ট্যাগ

<col> ট্যাগ HTML টেবিলে প্রতিটি কলামের প্রোপার্টি (স্টাইল, প্রস্থ ইত্যাদি) সেট করতে ব্যবহৃত হয়। এটি অবশ্যই <colgroup> এলিমেন্টের ভিতরে থাকতে হয়।

অ্যাট্রিবিউট

span: একটি <col> এলিমেন্ট কতগুলো কলামে প্রসারিত হবে (ডিফল্ট: ১)

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 2px solid black; border-collapse: collapse; }
  </style>
</head>
<body>
  <h2>ICC র‍্যাঙ্কিং</h2>
  <table>
    <colgroup>
      <col span="2" style="background-color:magenta;">
      <col style="background-color:blue;">
    </colgroup>
    <tr>
      <th>খেলোয়াড়</th> <th>দেশ</th> <th>র‍্যাঙ্ক</th>
    </tr>
    <tr><td>Jack</td><td>WI</td><td>1</td></tr>
    <tr><td>Tom</td><td>AUS</td><td>2</td></tr>
    <tr><td>Virat</td><td>IND</td><td>3</td></tr>
    <tr><td>Steve</td><td>AUS</td><td>4</td></tr>
    <tr><td>Kane</td><td>NZ</td><td>5</td></tr>
    <tr><td>David</td><td>AUS</td><td>6</td></tr>
  </table>
</body>
</html>

আউটপুট

HTML <col> ট্যাগ

ব্যাখ্যা

<col span="2" style="background-color:magenta;"> — প্রথম ২ কলাম (খেলোয়াড়, দেশ) ম্যাজেন্টা ব্যাকগ্রাউন্ড পাবে।
<col style="background-color:blue;"> — ৩ নম্বর কলাম (র‍্যাঙ্ক) ব্লু ব্যাকগ্রাউন্ড পাবে।
<col> ট্যাগের কোনো ক্লোজিং ট্যাগ নেই (void element)।

সাধারণ ভুল

ভুল: <col> কে <colgroup> বাইরে রাখা।
সঠিক: <colgroup><col><col></colgroup>

সেরা অনুশীলন

কলাম প্রস্থ সেট করতে <col style="width: 200px;"> ব্যবহার করুন।
CSS :nth-child() সিলেক্টরও কলাম স্টাইলিংয়ে কাজ করে, কিন্তু <col> পারফরম্যান্সে ভালো।
span অ্যাট্রিবিউট দিয়ে একসাথে একাধিক কলাম গ্রুপ করুন।