টেবিল (Table)

১. ভূমিকা — পরীক্ষার ফলাফল কীভাবে লেখা থাকে?

মনে করো তোমার বার্ষিক পরীক্ষার রেজাল্ট শিট হাতে এলো। সেখানে লেখা — তোমার নাম, প্রতিটি বিষয়ের নাম, প্রাপ্ত নম্বর, গ্রেড।

ভাবো — এই তথ্যগুলো যদি এক লাইনে পরপর লেখা থাকত:

রাহাত বাংলা ৭৮ A ইংরেজি ৭২ A গণিত ৮৫ A+ ...

পড়া যেত? — না! মাথা ঘুরে যেত।

তাই রেজাল্ট সবসময় সারি (row) ও কলাম (column)-এ সাজানো থাকে। চোখ সহজে খুঁজে নেয় কোন বিষয়ে কত পেলে।

সারি-কলামে তথ্য সাজানোর এই কাঠামোর নাম Table (টেবিল)।

২. সমস্যা — সম্পর্কিত তথ্য সাজানো রাখব কীভাবে?

অনেক তথ্য আছে যেগুলো পরস্পর সম্পর্কিত:

ক্লাস রুটিন — দিন, সময়, বিষয়
দোকানের দাম তালিকা — পণ্য, পরিমাণ, দাম
ভোটার তালিকা — নাম, বয়স, এলাকা

এগুলো অনুচ্ছেদে (<p>) লিখলে এলোমেলো হয়ে যায় — কোনটা কার সাথে যায় বোঝা যায় না।

আসল সমস্যা: এমন কাঠামো দরকার যেখানে তথ্য সারি ও কলামে সাজানো থাকবে, আর প্রতিটি তথ্য তার সঠিক জায়গায় বসবে।

এই সমস্যার সমাধান — HTML Table।

৩. চিত্রের মাধ্যমে বোঝো

একটি Table-এর গঠন:

        কলাম১     কলাম২    কলাম৩
       ┌────────┬────────┬────────┐
সারি১  │  নাম   │ বিষয়   │ নম্বর  │  ← <th> (header)
       ├────────┼────────┼────────┤
সারি২  │ রাহাত  │  ICT   │  ৮৫    │  ← <td> (data)
       ├────────┼────────┼────────┤
সারি৩  │ নিশাত  │  ICT   │  ৯০    │  ← <td> (data)
       └────────┴────────┴────────┘

  প্রতিটি সারি = <tr>
  প্রতিটি ঘর (cell) = <th> অথবা <td>

৪. বাস্তব জীবনের সাথে মিল

দাবা বোর্ডের সাথে তুলনা করো:

দাবার বোর্ডে ৮টি সারি ও ৮টি কলাম — প্রতিটি ঘরের নির্দিষ্ট অবস্থান আছে। তুমি বলতে পারো "তৃতীয় সারির দ্বিতীয় ঘর"।

Table-ও তাই — প্রতিটি cell-এর নির্দিষ্ট সারি ও কলাম আছে। তাই তথ্য কখনো হারায় না, এলোমেলো হয় না।

Module 1: সংজ্ঞা ও মূল Tag

Table কী?

Table (টেবিল) হলো HTML-এর একটি কাঠামো যা তথ্যকে সারি (row) ও কলাম (column)-এ সাজিয়ে উপস্থাপন করে। যেখানে তথ্য পরস্পর সম্পর্কিত ও তুলনামূলক, সেখানে Table ব্যবহার হয়।

মূল Tag

Tag	পূর্ণ অর্থ	কাজ
`<table>`	Table	পুরো টেবিল শুরু ও শেষ
`<tr>`	Table Row	একটি সারি
`<th>`	Table Header	শিরোনাম ঘর (মোটা ও মাঝবরাবর)
`<td>`	Table Data	সাধারণ তথ্য ঘর

Module 2: প্রথম Table তৈরি

<table border="1">
  <tr>
    <th>নাম</th>
    <th>বিষয়</th>
    <th>নম্বর</th>
  </tr>
  <tr>
    <td>রাহাত</td>
    <td>ICT</td>
    <td>৮৫</td>
  </tr>
  <tr>
    <td>নিশাত</td>
    <td>ICT</td>
    <td>৯০</td>
  </tr>
</table>

ফলাফল: ৩ কলাম, ৩ সারির একটি টেবিল। প্রথম সারিটি শিরোনাম (মোটা ও মাঝবরাবর), বাকি দুটি তথ্য।

border="1" attribute টেবিলের চারপাশে রেখা (border) আঁকে।
<th>-এর লেখা স্বয়ংক্রিয়ভাবে bold ও center হয়; <td>-এর লেখা সাধারণ।

Module 3: Table-এর গঠনমূলক অংশ — thead, tbody, tfoot

বড় টেবিলকে তিন ভাগে ভাগ করা যায়:

Tag	অংশ
`<thead>`	টেবিলের শিরোনাম অংশ
`<tbody>`	মূল তথ্যের অংশ
`<tfoot>`	নিচের সারাংশ অংশ (যেমন মোট)

<table border="1">
  <thead>
    <tr><th>পণ্য</th><th>দাম</th></tr>
  </thead>
  <tbody>
    <tr><td>খাতা</td><td>৪০</td></tr>
    <tr><td>কলম</td><td>১০</td></tr>
  </tbody>
  <tfoot>
    <tr><td>মোট</td><td>৫০</td></tr>
  </tfoot>
</table>

এতে কোড গোছানো থাকে এবং বোঝা সহজ হয়।

Module 4: colspan — একাধিক কলাম জুড়ে দেওয়া

কখনো একটি cell-কে পাশাপাশি একাধিক কলাম জুড়ে বিস্তৃত করতে হয়। তখন colspan ব্যবহার হয়।

<table border="1">
  <tr>
    <th colspan="2">শিক্ষার্থীর তথ্য</th>
  </tr>
  <tr>
    <td>নাম</td>
    <td>রাহাত</td>
  </tr>
</table>

┌───────────────────────┐
│   শিক্ষার্থীর তথ্য      │  ← colspan="2" (২ কলাম জুড়ে)
├───────────┬───────────┤
│   নাম     │  রাহাত    │
└───────────┴───────────┘

colspan="2" মানে — এই cell ২টি কলামের জায়গা নেবে।

Module 5: rowspan — একাধিক সারি জুড়ে দেওয়া

rowspan দিয়ে একটি cell-কে উপর-নিচে একাধিক সারি জুড়ে বিস্তৃত করা যায়।

<table border="1">
  <tr>
    <td rowspan="2">রাহাত</td>
    <td>ICT</td>
    <td>৮৫</td>
  </tr>
  <tr>
    <td>বাংলা</td>
    <td>৭৮</td>
  </tr>
</table>

┌────────┬────────┬──────┐
│        │  ICT   │  ৮৫  │
│ রাহাত  ├────────┼──────┤  ← rowspan="2" (২ সারি জুড়ে)
│        │ বাংলা  │  ৭৮  │
└────────┴────────┴──────┘

লক্ষ্য করো — দ্বিতীয় <tr>-এ "রাহাত" আর লিখতে হয়নি, কারণ উপরের cell-টি rowspan দিয়ে নিচে নেমে এসেছে।

Attribute	কাজ
`colspan="n"`	cell-কে n কলাম জুড়ে বিস্তৃত করে (পাশাপাশি)
`rowspan="n"`	cell-কে n সারি জুড়ে বিস্তৃত করে (উপর-নিচ)

Module 6: ব্যবহারিক উদাহরণ — ক্লাস রুটিন

<table border="1">
  <tr>
    <th>দিন</th>
    <th>১ম পিরিয়ড</th>
    <th>২য় পিরিয়ড</th>
  </tr>
  <tr>
    <td>রবিবার</td>
    <td>বাংলা</td>
    <td>ICT</td>
  </tr>
  <tr>
    <td>সোমবার</td>
    <td colspan="2">পরীক্ষা</td>
  </tr>
</table>

সোমবারের সারিতে colspan="2" দিয়ে "পরীক্ষা" দুটি পিরিয়ড জুড়ে দেখানো হয়েছে।

Module 7: সাধারণ ভুল ও সতর্কতা

ভুল ১: <tr> বন্ধ করতে ভুলে যাওয়া

❌ <tr><td>রাহাত</td>        ✅ <tr><td>রাহাত</td></tr>

ভুল ২: colspan-এর সংখ্যা ভুল করা

৩ কলামের টেবিলে colspan="4" দিলে টেবিল ভেঙে যায়। মোট কলাম সংখ্যা ঠিক রাখো।

ভুল ৩: <th> ও <td> গুলিয়ে ফেলা

শিরোনামে <th>, তথ্যে <td>। সব <td> দিলে শিরোনাম আলাদা বোঝা যায় না।

ভুল ৪: rowspan ব্যবহারের পর বাড়তি cell লেখা

rowspan দিলে নিচের সারিতে ওই কলামের cell আবার লেখা যাবে না — টেবিল এলোমেলো হবে।

Module 8: সুবিধা-অসুবিধা

বিষয়	সুবিধা	অসুবিধা
Table	তথ্য পরিষ্কার ও তুলনাযোগ্য	বেশি কোড লাগে
colspan/rowspan	জটিল কাঠামো সম্ভব	ভুল করলে টেবিল ভাঙে
thead/tbody	কোড গোছানো	ছোট টেবিলে অপ্রয়োজনীয়
Table দিয়ে layout	আগে ব্যবহার হতো	এখন ভুল — layout-এ CSS ব্যবহার করো

🔁 নিজে পরীক্ষা করো

MCQ:

১. টেবিলের একটি সারি তৈরি করে কোন tag?

ক) <td>
খ) <tr> ✓
গ) <th>
ঘ) <table>

২. শিরোনাম ঘর (header cell) তৈরি করে কোনটি?

ক) <td>
খ) <tr>
গ) <th> ✓
ঘ) <thead>

৩. একটি cell-কে পাশাপাশি ৩ কলাম জুড়ে বিস্তৃত করতে —

ক) colspan="3" ✓
খ) rowspan="3"
গ) span="3"
ঘ) column="3"

৪. rowspan attribute কী করে?

ক) cell-কে কলাম জুড়ে বিস্তৃত করে
খ) cell-কে সারি জুড়ে বিস্তৃত করে ✓
গ) নতুন সারি যোগ করে
ঘ) border আঁকে

৫. <th>-এর লেখা স্বয়ংক্রিয়ভাবে কেমন দেখায়?

ক) তির্যক ও বাম
খ) মোটা ও মাঝবরাবর ✓
গ) ছোট ও ডান
ঘ) সাধারণ

সংক্ষিপ্ত প্রশ্ন:

৬. <table>, <tr>, <th>, <td> — প্রতিটির কাজ লেখো।

৭. colspan ও rowspan-এর পার্থক্য উদাহরণসহ লেখো।

📝 HSC পরীক্ষার প্রস্তুতি

১. নিচের টেবিলটি তৈরির HTML কোড লেখো:

┌──────────────────────┐
│      ফলাফল পত্র       │   (colspan)
├────────┬─────────────┤
│  নাম   │   রাহাত     │
├────────┼─────────────┤
│ বিষয়   │    ICT      │
└────────┴─────────────┘

২. একটি ৩ কলামের রেজাল্ট টেবিল লেখো যেখানে এক শিক্ষার্থীর ২টি বিষয় rowspan দিয়ে দেখানো হবে।

৩. colspan ও rowspan একসাথে ব্যবহার করে একটি টেবিল লেখো।

💡 পরীক্ষার টিপস: HSC ব্যবহারিক পরীক্ষায় colspan/rowspan সহ টেবিল প্রায় সবসময় আসে — হাতে-কলমে অনুশীলন করো।

🎯 অনুশীলন প্রশ্ন

সহজ: ২ কলাম, ৩ সারির একটি দাম তালিকা টেবিল লেখো (পণ্য ও দাম)।

মাঝারি: তোমার সাপ্তাহিক ক্লাস রুটিন একটি টেবিলে দেখাও।

কঠিন: একটি রেজাল্ট শিট টেবিল বানাও যেখানে — উপরে colspan দিয়ে শিরোনাম, প্রতি শিক্ষার্থীর নাম rowspan দিয়ে একাধিক বিষয় জুড়ে দেখানো হবে।

✅ সারাংশ

🎯 মনে রেখো:

Table = তথ্যকে সারি ও কলামে সাজানোর HTML কাঠামো
<table> = পুরো টেবিল; <tr> = সারি; <th> = শিরোনাম ঘর; <td> = তথ্য ঘর
<th> → স্বয়ংক্রিয় bold ও center; <td> → সাধারণ
গঠনমূলক অংশ: <thead>, <tbody>, <tfoot>
colspan → cell পাশাপাশি কলাম জুড়ে; rowspan → cell উপর-নিচ সারি জুড়ে
rowspan ব্যবহারের পর নিচের সারিতে ওই cell আবার লিখবে না