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

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

colspan অ্যাট্রিবিউট HTML টেবিলে একটি সেল (<td> বা <th>) কতগুলো কলামে প্রসারিত (span) হবে তা নির্দেশ করে। ডিফল্ট মান ১।

<td> এলিমেন্টে colspan

<td> এলিমেন্টের colspan অ্যাট্রিবিউট ডেটা সেলকে একাধিক কলামে ফেলে।

সিনট্যাক্স

<td colspan="number">

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 2px solid blue; border-collapse: collapse; padding: 8px; }
  </style>
</head>
<body>
  <h2>প্রোডাক্ট খরচ</h2>
  <table>
    <tr><th>ডোমেইন</th><th>খরচ</th></tr>
    <tr><td>প্রোডাক্ট ডেভেলপমেন্ট</td><td>৫০০০০০</td></tr>
    <tr><td>мар्कেটিং</td><td>৫০০০০০</td></tr>
    <tr><td>সার্ভিস</td><td>১০০০০০</td></tr>
    <tr><td>সাপোর্ট</td><td>১০০০০০</td></tr>
    <tr><td>মেইনটেন্যান্স</td><td>১০০০০০</td></tr>
    <tr><td colspan="2">মোট বাজেট = ১৩০০০০০ টাকা</td></tr>
  </table>
</body>
</html>

আউটপুট

<th> এলিমেন্টে colspan

<th> এলিমেন্টের colspan অ্যাট্রিবিউট হেডার সেলকে একাধিক কলামে ফেলে।

সিনট্যাক্স

<th colspan="number">

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 2px solid green; border-collapse: collapse; padding: 8px; }
  </style>
</head>
<body>
  <h2>প্রোডাক্ট খরচ</h2>
  <table>
    <tr><th colspan="2">খরচ</th></tr>
    <tr><td>প্রোডাক্ট ডেভেলপমেন্ট</td><td>৫০০০০০</td></tr>
    <tr><td>মার্কেটিং</td><td>৫০০০০০</td></tr>
    <tr><td>সার্ভিস</td><td>১০০০০০</td></tr>
    <tr><td>সাপোর্ট</td><td>১০০০০০</td></tr>
    <tr><td>মেইনটেন্যান্স</td><td>১০০০০০</td></tr>
    <tr><td colspan="2">মোট বাজেট = ১৩০০০০০ টাকা</td></tr>
  </table>
</body>
</html>

আউটপুট

ব্যাখ্যা

<th colspan="2">Expenses</th>

হেডার সেল "Expenses" ২টি কলামে (Domains, Cost) প্রসারিত হয়েছে।

rowspan vs colspan

সেরা অনুশীলন

• colspan ব্যবহার করলে সেই রোয়ে কম <td> থাকবে (কলাম সংখ্যা মেলাতে হবে)।
• অ্যাক্সেসিবিলিটির জন্য <th scope="colgroup"> ব্যবহার করুন colspan হেডারের সাথে।
• CSS-এ td[colspan] { background: #f0f0f0; } দিয়ে স্প্যান করা সেল হাইলাইট করুন।