এইচটিএমএল টেবিল তৈরি ও ডাটা বিন্যাস

এইচটিএমএল টেবিল তৈরি ও ডাটা বিন্যাস

হ্যালো এবং স্বাগতম! আজকের ক্লাসে আমরা শিখব ওয়েব ডিজাইনের অন্যতম গুরুত্বপূর্ণ একটি বিষয়—এইচটিএমএল টেবিল। এই লেকচার শেষে আমরা এইচটিএমএল ব্যবহার করে যেকোনো ধরনের টেবিল তৈরি করতে পারব। আমরা জানব টেবিলের বিভিন্ন অংশ যেমন Row, Data এবং Heading কীভাবে কাজ করে। এছাড়া টেবিলের সৌন্দর্য বৃদ্ধির জন্য বিভিন্ন অ্যাট্রিবিউট এবং জটিল সব ডিজাইন করার জন্য Rowspan ও Colspan এর ব্যবহারও আমরা বিস্তারিত শিখব। চলো শুরু করা যাক!

তথ্য যখন সাজানো থাকে...

একটু ভাবো তো, তুমি যদি ক্রিকেট খেলার স্কোর দেখতে চাও আর তোমাকে যদি একটা প্যারাগ্রাফ আকারে সব রান, উইকেট আর বলের হিসাব দেওয়া হয়, তোমার কেমন লাগবে? নিশ্চয়ই বিরক্তিকর এবং বোঝা কঠিন হবে! কিন্তু সেটাই যখন একটা স্কোরবোর্ডে সুন্দর করে সারি এবং কলামে সাজানো থাকে, তখন এক নজরেই সব বোঝা যায়। এটাই টেবিলের শক্তি। ওয়েব পেজেও আমরা তথ্যের সুশৃঙ্খল উপস্থাপনা এবং সহজে তুলনা করার জন্য টেবিল ব্যবহার করি। আজকের ক্লাসে আমরা দেখব কীভাবে কোড করে এই স্ট্রাকচার তৈরি করা যায়।

টেবিলের মৌলিক ট্যাগ পরিচিতি

এইচটিএমএল এ টেবিল তৈরি করা অনেকটা একটা বাড়ি বানানোর মতো। প্রথমে তোমাকে বাউন্ডারি দিতে হবে, সেটার জন্য আমরা ব্যবহার করি `<table>` ট্যাগ। এরপর বাড়িটা যেমন তলায় তলায় বা ফ্লোর বাই ফ্লোর তৈরি হয়, টেবিলও তেমনি `<tr>` বা Table Row দিয়ে সারি বাই সারি তৈরি হয়। মনে রাখবে, টেবিল কিন্তু কলাম ধরে তৈরি হয় না, হয় সারি বা Row ধরে। আর প্রতিটা সারির ভেতরে ছোট ছোট রুম বা ঘর থাকে, যেগুলোকে আমরা `<td>` বা Table Data বলি। তবে একদম উপরের সারিতে সাধারণত আমরা `<th>` বা Table Header ব্যবহার করি, যাতে লেখাগুলো একটু বোল্ড দেখায়।

একটি সাধারণ টেবিল তৈরি (কোড ডেমো)

<table>
  <caption>Student List</caption>
  <tr>
    <th>Roll</th> <th>Name</th> <th>GPA</th>
  </tr>
  <tr>
    <td>101</td> <td>Rahim</td> <td>5.00</td>
  </tr>
  <tr>
    <td>102</td> <td>Karim</td> <td>4.50</td>
  </tr>
</table>

চলো এবার হাতে কলমে দেখি। পাশের ছবিতে খেয়াল করো। বাম পাশে আমাদের কোড আর ডান পাশে ব্রাউজারে তার ফলাফল। প্রথমে আমরা `<table>` ট্যাগ দিয়ে শুরু করেছি। এরপর `<caption>` দিয়ে টেবিলের নাম দিয়েছি 'Student List'। এরপর প্রথম `<tr>` বা সারিতে আমরা `<th>` ব্যবহার করেছি কারণ এগুলো হেডিং—Roll, Name, GPA। লক্ষ্য করো আউটপুটে এগুলো বোল্ড দেখাচ্ছে। এরপরের সারিগুলোতে আমরা `<td>` ব্যবহার করেছি আসল তথ্যের জন্য। যেমন ১০১, রহিম, ৫.০০। এভাবে একটার পর একটা `<tr>` দিয়ে আমরা পুরো টেবিলটি সাজিয়েছি।

টেবিলের সৌন্দর্য বৃদ্ধি: অ্যাট্রিবিউটস

তোমরা হয়তো খেয়াল করেছ, শুধু `<table>` ট্যাগ লিখলে ব্রাউজারে কোনো দাগ বা বর্ডার দেখা যায় না। ডাটাগুলো শুধু সাজানো থাকে। টেবিলের সেই পরিচিত ছক বা গ্রিড লাইনগুলো দেখার জন্য আমাদের `<table>` ট্যাগের ভেতরে `border="1"` অ্যাট্রিবিউটটি লিখতে হবে। এটা না লিখলে বর্ডার জিরো বা অদৃশ্য থাকে। এছাড়া টেবিলটি স্ক্রিনের কতটুকু জায়গা নেবে তা `width` দিয়ে এবং টেবিলটিকে মাঝখানে আনার জন্য `align="center"` ব্যবহার করা হয়। ছবিতে দেখো, বর্ডার অ্যাট্রিবিউট দেওয়ার পর টেবিলটি কেমন স্পষ্ট দেখাচ্ছে।

Cellpadding বনাম Cellspacing

টেবিল ডিজাইনে শিক্ষার্থীদের সবচেয়ে বেশি কনফিউশন হয় Cellpadding এবং Cellspacing নিয়ে। আসো ব্যাপারটা সহজ করে দিই। প্যাডিং শব্দটা জ্যাকেটের প্যাডিংয়ের সাথে তুলনা করতে পারো, যা থাকে কাপড়ের ভেতরে। অর্থাৎ, একটা সেলের বর্ডার এবং তার ভেতরের লেখার মাঝখানে যে ফাঁকা জায়গা, সেটা হলো Cellpadding। আর স্পেসিং মানে হলো দূরত্ব। পাশাপাশি দুটো সেলের মাঝখানে যে ফাঁকা জায়গা বা দূরত্ব থাকে, সেটা হলো Cellspacing। ছবিতে লাল এবং নীল তীরগুলো লক্ষ্য করলেই পার্থক্যটা পরিষ্কার হয়ে যাবে।

Colspan (কলাম মার্জ করা)

মাঝেমধ্যে আমাদের দরকার হয় পাশাপাশি দুটো বা তিনটে ঘরকে মিলিয়ে একটা বড় ঘর বানানোর। এটাকে বলে Colspan বা Column Span। ধরো, তুমি একটা সেলে লিখলে `colspan="2"`। এর মানে হলো, এই সেলটি তার নিজের জায়গা এবং তার ডানপাশের সেলের জায়গা দখল করে নেবে। খুব গুরুত্বপূর্ণ একটা বিষয় মনে রাখবে—যখনই তুমি কোনো সেলে `colspan="2"` লিখবে, তোমাকে অবশ্যই ওই সারির পরবর্তী একটি `<td>` ট্যাগ মুছে ফেলতে হবে। কারণ ওই জায়গাটা তো অলরেডি দখল হয়ে গেছে! না মুছলে টেবিলের গঠন নষ্ট হয়ে যাবে।

Rowspan (সারি মার্জ করা)

এবার আসি Rowspan-এ। Colspan যদি ডানে-বামে জায়গা দখল করে, তবে Rowspan জায়গা দখল করে উপর থেকে নিচে। অর্থাৎ, এটি ভার্টিকালি বা লম্বালম্বিভাবে সেল মার্জ করে। ধরো, প্রথম সারির কোনো সেলে তুমি `rowspan="2"` দিলে। এর মানে এই সেলটি তার নিজের সারি এবং ঠিক তার নিচের সারির জায়গা দখল করবে। এখানে ট্রিকটা হলো—পরের সারির কোড লেখার সময় ওই পজিশনের `<td>` টি আর লেখা যাবে না। কারণ উপরের সারির `rowspan` অলরেডি সেই জায়গা বুক করে ফেলেছে।

জটিল টেবিল সমাধান: ব্যবহারিক উদাহরণ

চলো একটা রিয়েল লাইফ সিনারিও দেখি—একটা ক্লাস রুটিন। ছবিতে দেখো, 'Lunch' লেখাটি লম্বালম্বিভাবে দুটো পিরিয়ড বা সময় জুড়ে আছে, তাই এখানে আমরা `rowspan` ব্যবহার করব। আবার 'Break' লেখাটি হয়তো পাশাপাশি সব বারের জন্য কমন, সেখানে আমরা `colspan` ব্যবহার করতে পারি (অথবা উল্টোটাও হতে পারে ডিজাইনের ওপর ভিত্তি করে)। মূল লজিকটা হলো—তুমি যখনই কোড লিখবে, আগে মনে মনে ছকটা কষে নেবে। কোন ঘরটা কোন দিকে বাড়ছে? ডানে বাড়লে Colspan, নিচে বাড়লে Rowspan। আর মনে রাখবে, যে ঘরটা মার্জ হয়ে অন্যের পেটে চলে গেছে, তার জন্য আর আলাদা কোড লিখবে না।

টেবিলের গঠন: thead, tbody, tfoot

আমরা তো `<tr>` আর `<td>` দিয়ে টেবিল বানালাম। কিন্তু প্রফেশনাল ওয়েব ডেভেলপাররা টেবিলকে আরও সুন্দরভাবে সাজান। তারা টেবিলকে মানুষের শরীরের মতো তিন ভাগে ভাগ করেন। মাথা বা `<thead>`, শরীর বা `<tbody>`, এবং পা বা `<tfoot>`। `<thead>` এর ভেতরে থাকে শিরোনামগুলো, `<tbody>` তে থাকে আসল তথ্য, আর `<tfoot>` এ থাকে যোগফল বা সারাংশ। যদিও এটা বাধ্যতামূলক নয়, কিন্তু বড় প্রজেক্টে এবং সার্চ ইঞ্জিনের সুবিধার জন্য এই ট্যাগগুলো ব্যবহার করা গুড প্র্যাকটিস।

নিজে করি: প্র্যাকটিস চ্যালেঞ্জ

এবার তোমাদের পালা। স্ক্রিনে একটা মার্কশিট দেখতে পাচ্ছ। ভালো করে লক্ষ্য করো। এখানে 'ICT' লেখাটি কিন্তু দুটো সারির জায়গা নিয়ে আছে। আবার নিচে 'Total' লেখাটি পাশাপাশি তিনটা কলামের জায়গা নিয়েছে। এখন ভিডিওটা একটু পজ করো। খাতা কলম নাও এবং চিন্তা করো এটার কোড কেমন হবে। বিশেষ করে `<tr>` গুলো সাজানোর সময় কোথায় `rowspan` দেবে আর কোথায় `colspan` দেবে, সেটা ভেবে বের করো। ভুল হোক সমস্যা নেই, চেষ্টা করাটাই আসল।

সারসংক্ষেপ ও মনে রাখার টিপস

ক্লাস শেষ করার আগে চলো আজকের মূল বিষয়গুলো ঝালাই করে নিই। টেবিল বানাতে হলে `<table>` ট্যাগ লাগবেই। সারি বানাতে `<tr>`, আর ডাটা দিতে `<td>`। মনে রাখবে, টেবিলের বর্ডার বাই ডিফল্ট দেখা যায় না, তাই `border="1"` দিতে হবে। আর কনফিউশন এড়াতে মনে রাখবে—প্যাডিং থাকে ভেতরে, স্পেসিং থাকে বাইরে। সবশেষে, Rowspan হলো ভার্টিকাল বা লম্বালম্বি মার্জ, আর Colspan হলো হরিজন্টাল বা আড়াআড়ি মার্জ। এই কয়েকটা বিষয় মনে রাখলেই টেবিল নিয়ে আর কোনো ভয় থাকবে না।

ধন্যবাদ

সবাইকে অনেক ধন্যবাদ আজকের ক্লাসে মনোযোগ দেওয়ার জন্য। টেবিল কিন্তু দেখার বিষয় না, এটা হাতে কলমে কোড করার বিষয়। তাই কম্পিউটারে নোটপ্যাড খুলে বিভিন্ন রকমের রুটিন বা মার্কশিট বানানোর চেষ্টা করো। আগামী ক্লাসে আমরা শিখব কীভাবে ওয়েবপেজে ছবি যুক্ত করতে হয় এবং এক পেজের সাথে আরেক পেজের লিংক করতে হয়। সে পর্যন্ত সবাই ভালো থেকো, আল্লাহ হাফেজ।

সৃজনশীল প্রশ্ন

সৃজনশীল প্রশ্ন ১

জাহিদ তার কলেজের বার্ষিক ক্রীড়া প্রতিযোগিতার সময়সূচি ওয়েবসাইটের মাধ্যমে শিক্ষার্থীদের জানাতে চায়। সে একটি ওয়েব পেজ ডিজাইন করল যেখানে 'Date', 'Time' এবং 'Event' নামে তিনটি কলাম আছে। কিন্তু সে চায় 'Lunch Break' লেখাটি সব দিনের জন্য একটি মাত্র সেলে দেখাবে এবং 'Opening Ceremony' লেখাটি টেবিলের উপরের দিকে মাঝখানে প্রশস্তভাবে থাকবে।

(ক) <tr> ট্যাগ এর কাজ কী?
(খ) <th> এবং <td> এর মধ্যে প্রধান পার্থক্যগুলো লেখ।
(গ) জাহিদের টেবিলের 'Lunch Break' এবং 'Opening Ceremony' এর জন্য rowspan ও colspan ব্যবহার করে প্রয়োজনীয় HTML কোড অংশটুকু লেখ।
(ঘ) ওয়েব পেজ ডিজাইনে টেবিল ব্যবহারের সুবিধা ও অসুবিধাগুলো জাহিদের উদ্দীপকের আলোকে বিশ্লেষণ কর।

উত্তর

(ক) <tr> বা Table Row ট্যাগটি এইচটিএমএল টেবিলে একটি নতুন সারি (row) তৈরি করতে ব্যবহৃত হয়।

(খ) <th> এবং <td> এর মধ্যে প্রধান পার্থক্যগুলো হলো:
১. <th> (Table Header) ট্যাগটি টেবিলের হেডিং বা শিরোনাম সেলের জন্য ব্যবহৃত হয়, যা সাধারণত বোল্ড (bold) এবং সেন্টারে (center) থাকে।
২. <td> (Table Data) ট্যাগটি টেবিলের সাধারণ ডাটা সেলের জন্য ব্যবহৃত হয়, যা ডিফল্টভাবে নরমাল ফন্ট এবং বামে (left align) থাকে।

(গ) উদ্দীপকে 'Lunch Break' লেখাটি সব দিনের জন্য একটি সেলে থাকবে, অর্থাৎ এটি একাধিক সারি বা row কে একত্র করবে। এর জন্য rowspan ব্যবহার করতে হবে। আবার 'Opening Ceremony' লেখাটি টেবিলের উপরে প্রশস্তভাবে থাকবে, অর্থাৎ এটি একাধিক কলামকে একত্র করবে। এর জন্য colspan ব্যবহার করতে হবে।

নিচে প্রয়োজনীয় HTML কোড দেওয়া হলো:

<table border="1">
  <!-- Opening Ceremony spanning 3 columns -->
  <tr>
    <th colspan="3">Opening Ceremony</th>
  </tr>
  <tr>
    <th>Date</th>
    <th>Time</th>
    <th>Event</th>
  </tr>
  <tr>
    <td>10-01-2024</td>
    <td>10:00 AM</td>
    <td>Football</td>
  </tr>
  <tr>
    <td>11-01-2024</td>
    <td>10:00 AM</td>
    <td>Cricket</td>
  </tr>
  <!-- Lunch Break spanning vertically for 2 rows as an example -->
  <tr>
    <td rowspan="2">Lunch Break</td>
    <td>01:00 PM</td>
    <td>All Students</td>
  </tr>
  <tr>
    <!-- First cell occupied by rowspan above -->
    <td>01:00 PM</td>
    <td>Teachers</td>
  </tr>
</table>

(দ্রষ্টব্য: কোডে rowspan এবং colspan এর সঠিক ব্যবহার দেখানোই মূল উদ্দেশ্য।)

(ঘ) ওয়েব পেজ ডিজাইনে টেবিল ব্যবহারের সুবিধা ও অসুবিধাগুলো নিচে বিশ্লেষণ করা হলো:

সুবিধা:
১. ডাটা বিন্যাস: জাহিদের রুটিন বা তালিকা জাতীয় তথ্য সুশৃঙ্খলভাবে উপস্থাপন করার জন্য টেবিল সবচেয়ে কার্যকর। সারি ও কলামের মাধ্যমে তথ্য প্রদর্শন করায় ব্যবহারকারীরা সহজেই তথ্য খুঁজে পায়।
২. স্ট্রাকচার: rowspan ও colspan ব্যবহার করে জটিল লেআউট (যেমন জাহিদের লাঞ্চ ব্রেক বা শিরোনাম) সহজে তৈরি করা যায়।
৩. সহজবোধ্যতা: টেক্সট বা ইমেজকে পাশাপাশি সাজাতে টেবিল ব্যবহার করা সহজ, বিশেষ করে নতুনদের জন্য।

অসুবিধা:
১. রেসপন্সিভনেস: টেবিল দিয়ে তৈরি লেআউট মোবাইল বা ছোট স্ক্রিনে ঠিকমতো প্রদর্শিত হয় না। জাহিদের ওয়েবসাইটটি মোবাইলে দেখলে টেবিলটি স্ক্রিনের বাইরে চলে যেতে পারে বা ভেঙে যেতে পারে।
২. লোড টাইম: অতিরিক্ত নেস্টেড টেবিল (Nested Table) ব্যবহার করলে পেজ লোড হতে বেশি সময় নেয় এবং ব্রাউজারের রেন্ডারিং ধীরগতির হয়।
৩. SEO ফ্রেন্ডলি নয়: আধুনিক সার্চ ইঞ্জিনগুলো টেবিল লেআউটকে খুব একটা প্রাধান্য দেয় না, কারণ এটি মূলত ডাটা প্রদর্শনের জন্য, লেআউটের জন্য নয়।

সিদ্ধান্ত: কেবল রুটিন বা তালিকা প্রদর্শনের জন্য জাহিদের টেবিল ব্যবহার করা সঠিক সিদ্ধান্ত, কিন্তু সম্পূর্ণ ওয়েবসাইটের লেআউট ডিজাইনের জন্য বর্তমানে টেবিলের পরিবর্তে CSS ও <div> ব্যবহার করা অধিক সুবিধাজনক।

সৃজনশীল প্রশ্ন ২

আইসিটি শিক্ষক ক্লাসে এইচটিএমএল টেবিল পড়াচ্ছিলেন। তিনি বোর্ডে নিচের উদ্দীপকের মতো একটি রেজাল্ট শিটের গঠন আঁকলেন এবং বললেন, "এই টেবিলটির বর্ডার থাকবে এবং প্রতিটি সেলের লেখা মাঝখানে (center) থাকবে। এছাড়া টেবিলের উপরে 'HSC Result 2024' ক্যাপশন হিসেবে থাকবে।"

উদ্দীপক টেবিল:
| Roll | Name | GPA |
| :---: | :---: | :---: |
| 101 | Rahim | 5.00 |
| 102 | Karim | 4.50 |

(ক) <caption> ট্যাগ কোথায় ব্যবহৃত হয়?
(খ) cellpadding ও cellspacing এর কাজ কী?
(গ) উদ্দীপকের টেবিলটি তৈরির জন্য পূর্ণাঙ্গ HTML কোড লেখ।
(ঘ) উদ্দীপকের টেবিলের 'GPA' কলামের তথ্যগুলোর পটভূমির রং হলুদ (Yellow) এবং 'Name' কলামের ফন্টের রং নীল (Blue) করতে কোডে কী পরিবর্তন আনতে হবে? বিশ্লেষণ কর।

উত্তর

(ক) <caption> ট্যাগটি <table> ট্যাগের ঠিক পরেই ব্যবহৃত হয় এবং এটি পুরো টেবিলের একটি শিরোনাম বা ক্যাপশন দিতে সাহায্য করে।

(খ) cellpadding ও cellspacing এর কাজ হলো:
১. Cellpadding: এটি টেবিলের সেলের বর্ডার এবং সেলের ভেতরের কন্টেন্ট (লেখা বা ছবি) এর মাঝখানের ফাঁকা জায়গা নির্ধারণ করে।
২. Cellspacing: এটি টেবিলের পাশাপাশি দুটি সেলের বর্ডারের মধ্যবর্তী ফাঁকা জায়গা বা দূরত্ব নির্ধারণ করে।

(গ) উদ্দীপকের টেবিলটি তৈরির জন্য পূর্ণাঙ্গ HTML কোড নিচে দেওয়া হলো:

<!DOCTYPE html>
<html>
<head>
    <title>Result Sheet</title>
</head>
<body>

    <table border="1" align="center">
        <caption>HSC Result 2024</caption>
        <tr>
            <th>Roll</th>
            <th>Name</th>
            <th>GPA</th>
        </tr>
        <tr align="center">
            <td>101</td>
            <td>Rahim</td>
            <td>5.00</td>
        </tr>
        <tr align="center">
            <td>102</td>
            <td>Karim</td>
            <td>4.50</td>
        </tr>
    </table>

</body>
</html>

(ঘ) উদ্দীপকের টেবিলের নির্দিষ্ট কলামের রং এবং ফন্টের রং পরিবর্তন করতে আমাদের <td> ট্যাগে bgcolor অ্যাট্রিবিউট বা CSS স্টাইল ব্যবহার করতে হবে।

বিশ্লেষণ ও কোড পরিবর্তন:
১. GPA কলামের পটভূমি হলুদ করা: 'GPA' কলামের প্রতিটি ডাটা সেলে bgcolor="yellow" অথবা style="background-color: yellow;" যুক্ত করতে হবে।
২. Name কলামের ফন্টের রং নীল করা: 'Name' কলামের প্রতিটি ডাটা সেলে <font color="blue"> অথবা style="color: blue;" ব্যবহার করতে হবে।

পরিবর্তিত কোড অংশ:

<tr>
    <td>101</td>
    <!-- Name কলামে নীল ফন্ট -->
    <td style="color: blue;">Rahim</td>
    <!-- GPA কলামে হলুদ ব্যাকগ্রাউন্ড -->
    <td style="background-color: yellow;">5.00</td>
</tr>
<tr>
    <td>102</td>
    <td style="color: blue;">Karim</td>
    <td style="background-color: yellow;">4.50</td>
</tr>

আধুনিক এইচটিএমএল-এ bgcolor এবং <font> ট্যাগDeprecated (বাতিলপ্রায়) হওয়ায় style অ্যাট্রিবিউট বা CSS ব্যবহার করাই উত্তম। এর মাধ্যমে খুব সহজেই নির্দিষ্ট সেলের ডিজাইন পরিবর্তন করা সম্ভব, যা ওয়েবসাইটের সৌন্দর্য বৃদ্ধি করে।

সৃজনশীল প্রশ্ন ৩

নিপা তার ব্যক্তিগত ওয়েবসাইটিতে তার পছন্দের বইয়ের তালিকা এবং একটি ছবি যুক্ত করতে চায়। সে একটি টেবিল তৈরি করল যেখানে এক কলামে বইয়ের নাম এবং অন্য কলামে বইয়ের ছবি থাকবে। সে চায় ছবিতে ক্লিক করলে বইটি পড়ার জন্য একটি পিডিএফ লিংক ওপেন হবে। কিন্তু কোড লেখার পর সে দেখল টেবিলের বর্ডারগুলো দেখা যাচ্ছে না এবং ছবিগুলো অনেক বড় হয়ে গেছে।

(ক) হাইপারলিংক কী?
(খ) <img> ট্যাগকে এম্পটি (Empty) ট্যাগ বলা হয় কেন?
(গ) নিপার সমস্যা সমাধানের জন্য (বর্ডার দৃশ্যমান করা এবং ছবির সাইজ ঠিক করা) টেবিল ও ইমেজ ট্যাগে কী কী অ্যাট্রিবিউট যুক্ত করতে হবে? ব্যাখ্যা কর।
(ঘ) ছবিতে ক্লিক করলে লিংক ওপেন হওয়ার বিষয়টি <a> এবং <img> ট্যাগের সমন্বয়ে কীভাবে করা যায়? নিপার জন্য একটি নমুনা কোডসহ আলোচনা কর।

উত্তর

(ক) হাইপারলিংক হলো ওয়েব পেজের কোনো টেক্সট বা ইমেজের সাথে অন্য কোনো পেজ, ফাইল বা ওয়েবসাইটের সংযোগ স্থাপন করার ব্যবস্থা।

(খ) <img> ট্যাগের কোনো ক্লোজিং ট্যাগ (যেমন </img>) নেই এবং এর ভেতরে কোনো কন্টেন্ট থাকে না, এটি কেবল অ্যাট্রিবিউটের মাধ্যমে কাজ করে। তাই <img> ট্যাগকে এম্পটি (Empty) ট্যাগ বলা হয়।

(গ) নিপার সমস্যা দুটি: টেবিলের বর্ডার না দেখা যাওয়া এবং ছবির সাইজ বড় হয়ে যাওয়া। এই সমস্যা সমাধানে নিম্নলিখিত অ্যাট্রিবিউটগুলো ব্যবহার করতে হবে:

1. টেবিলের বর্ডার দৃশ্যমান করা: <table> ট্যাগে border="1" অ্যাট্রিবিউট যুক্ত করতে হবে। এতে টেবিলের চারপাশে এবং সেলের মাঝে দাগ বা বর্ডার দেখা যাবে।
   - কোড: <table border="1">

2. ছবির সাইজ নিয়ন্ত্রণ করা: <img> ট্যাগে width এবং height অ্যাট্রিবিউট ব্যবহার করে ছবির আকার নির্দিষ্ট করে দিতে হবে। যেমন, ছবির প্রস্থ ১৫০ পিক্সেল করতে width="150" ব্যবহার করা যায়।
   - কোড: <img src="book.jpg" width="150" height="200">

এই অ্যাট্রিবিউটগুলো যুক্ত করলে নিপার টেবিলটি সুন্দরভাবে দৃশ্যমান হবে এবং ছবিগুলো নির্দিষ্ট মাপে প্রদর্শিত হবে।

(ঘ) ছবিতে ক্লিক করলে লিংক ওপেন হওয়ার বিষয়টি করার জন্য ইমেজ ট্যাগটিকে অ্যাংকর (<a>) ট্যাগের ভেতরে রাখতে হবে। একে নেস্টিং বলা হয়।

প্রক্রিয়া:
১. প্রথমে <a> ট্যাগ শুরু করতে হবে এবং href অ্যাট্রিবিউটে গন্তব্য লিংকটি (পিডিএফ বা অন্য পেজ) দিতে হবে।
২. এরপর <a> ট্যাগের ওপেনিং ও ক্লোজিং অংশের মাঝখানে <img> ট্যাগটি বসাতে হবে।
৩. ফলে ছবিটি তখন একটি লিংক বা বাটন হিসেবে কাজ করবে।

নিপার জন্য নমুনা কোড:

<table border="1">
  <tr>
    <th>Book Name</th>
    <th>Cover Photo (Click to Read)</th>
  </tr>
  <tr>
    <td>HSC ICT Book</td>
    <td>
      <!-- ইমেজে লিংক যুক্ত করা হয়েছে -->
      <a href="ict_book.pdf" target="_blank">
        <img src="ict_cover.jpg" width="100" height="120" alt="ICT Book">
      </a>
    </td>
  </tr>
</table>

আলোচনা: উপরের কোডে <a> ট্যাগটি <img> ট্যাগকে ঘিরে রেখেছে। ব্যবহারকারী যখন ict_cover.jpg ছবিটিতে ক্লিক করবে, ব্রাউজার তখন href এ দেওয়া ict_book.pdf ফাইলটি ওপেন করবে। target="_blank" ব্যবহারের ফলে লিংকটি নতুন ট্যাবে ওপেন হবে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

এমসিকিউ

১। HTML টেবিলে নতুন সারি (Row) তৈরি করতে কোন ট্যাগটি ব্যবহৃত হয়?

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

সঠিক উত্তর: গ) <tr>

ব্যাখ্যা: <tr> এর পূর্ণরূপ হলো Table Row। এটি টেবিলের প্রতিটি নতুন সারি তৈরি করতে ব্যবহৃত হয়।

২। টেবিলের হেডিং বা শিরোনাম সেল তৈরি করতে কোন ট্যাগটি ব্যবহৃত হয়?

ক) <thead>
খ) <th>
গ) <caption>
ঘ) <head>

সঠিক উত্তর: খ) <th>

ব্যাখ্যা: <th> এর পূর্ণরূপ Table Header। এটি টেবিলের কলাম বা সারির শিরোনাম নির্দেশ করে এবং লেখাগুলো ডিফল্টভাবে বোল্ড ও সেন্টারে থাকে।

৩। টেবিলের ক্যাপশন বা শিরোনাম দিতে কোন ট্যাগটি ব্যবহৃত হয়?

ক) <title>
খ) <head>
গ) <caption>
ঘ) <th>

সঠিক উত্তর: গ) <caption>

ব্যাখ্যা: <caption> ট্যাগটি <table> ট্যাগের ঠিক পরেই বসে এবং পুরো টেবিলের একটি নাম বা শিরোনাম প্রদর্শন করে।

৪। টেবিলের সেলগুলোর বর্ডার বা সীমানা নির্ধারণ করতে <table> ট্যাগে কোন অ্যাট্রিবিউট ব্যবহার করা হয়?

ক) border
খ) width
গ) cell
ঘ) frame

সঠিক উত্তর: ক) border

ব্যাখ্যা: border অ্যাট্রিবিউটের মান (যেমন border="1") দিয়ে টেবিলের চারপাশ ও সেলের মাঝখানে দাগ টানা হয়।

৫। পাশাপাশি দুটি বা ততোধিক সেলকে (Column) একত্র করতে কোন অ্যাট্রিবিউট ব্যবহৃত হয়?

ক) rowspan
খ) colspan
গ) cellpadding
ঘ) cellspacing

সঠিক উত্তর: খ) colspan

ব্যাখ্যা: colspan (Column Span) অ্যাট্রিবিউট ব্যবহার করে পাশাপাশি একাধিক কলাম বা সেলকে একটি সেলে পরিণত করা হয়।

৬। উপর-নিচ দুটি বা ততোধিক সেলকে (Row) একত্র করতে কোন অ্যাট্রিবিউট ব্যবহৃত হয়?

ক) rowspan
খ) colspan
গ) merge
ঘ) span

সঠিক উত্তর: ক) rowspan

ব্যাখ্যা: rowspan (Row Span) অ্যাট্রিবিউট ব্যবহার করে উপর-নিচ একাধিক সারি বা সেলকে একটি সেলে পরিণত করা হয়।

৭। টেবিলের সেলের বর্ডার এবং সেলের ভেতরের কন্টেন্টের মধ্যবর্তী দূরত্ব নির্ধারণ করে কোনটি?

ক) cellspacing
খ) cellpadding
গ) width
ঘ) margin

সঠিক উত্তর: খ) cellpadding

ব্যাখ্যা: cellpadding হলো সেলের দেয়াল থেকে ভেতরের লেখা বা ছবির দূরত্ব। এটি সেলকে দেখতে সুন্দর ও ফাঁকা করে।

৮। টেবিলের পাশাপাশি দুটি সেলের বর্ডারের মধ্যবর্তী দূরত্ব নির্ধারণ করে কোনটি?

ক) cellspacing
খ) cellpadding
গ) border
ঘ) align

সঠিক উত্তর: ক) cellspacing

ব্যাখ্যা: cellspacing হলো দুটি সেলের মাঝখানের ফাঁকা জায়গা। যদি cellspacing="0" দেওয়া হয় তবে সেলগুলো লেগে থাকে।

৯। <th> ট্যাগের লেখা বা কন্টেন্ট ডিফল্টভাবে কেমন থাকে?

ক) বামে ও নরমাল
খ) ডানে ও ইটালিক
গ) মাঝখানে ও বোল্ড
ঘ) জাস্টিফাইড

সঠিক উত্তর: গ) মাঝখানে ও বোল্ড

ব্যাখ্যা: টেবিল হেডার বা <th> ট্যাগের লেখা স্বয়ংক্রিয়ভাবে মোটা (Bold) এবং সেলের মাঝখানে (Center) অবস্থান করে।

১০। টেবিলের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে কোন অ্যাট্রিবিউট ব্যবহৃত হয়?

ক) color
খ) bgcolor
গ) background
ঘ) back-color

সঠিক উত্তর: খ) bgcolor

ব্যাখ্যা: <table>, <tr> বা <td> ট্যাগে bgcolor অ্যাট্রিবিউট ব্যবহার করে পটভূমির রং পরিবর্তন করা যায়।

১১। নিচের কোনটি টেবিলের রো বা সারি গ্রুপ করার ট্যাগ নয়?

ক) <thead>
খ) <tfoot>
গ) <tbody>
ঘ) <col>

সঠিক উত্তর: ঘ) <col>

ব্যাখ্যা: <thead>, <tbody> এবং <tfoot> দিয়ে টেবিলের সারিগুলোকে যথাক্রমে হেড, বডি এবং ফুটার অংশে ভাগ করা হয়। <col> কলামের বৈশিষ্ট্য নির্ধারণে ব্যবহৃত হয়।

১২। টেবিলের প্রস্থ বা Width কোন এককে দেওয়া যায়?

ক) পিক্সেল (px) ও শতাংশ (%)
খ) শুধুমাত্র পিক্সেল
গ) ইঞ্চি ও সেন্টিমিটার
ঘ) শুধুমাত্র শতাংশ

সঠিক উত্তর: ক) পিক্সেল (px) ও শতাংশ (%)

ব্যাখ্যা: টেবিলের width অ্যাট্রিবিউট পিক্সেল (যেমন width="500") অথবা ব্রাউজার উইন্ডোর শতাংশ (যেমন width="80%") হিসেবে দেওয়া যায়।

১৩। একটি সেলের লেখা উপরে বা নিচে সরাতে কোন অ্যাট্রিবিউট ব্যবহৃত হয়?

ক) align
খ) valign
গ) justify
ঘ) float

সঠিক উত্তর: খ) valign

ব্যাখ্যা: valign (Vertical Align) অ্যাট্রিবিউট দিয়ে সেলের কন্টেন্টকে top, middle বা bottom এ সেট করা যায়।

১৪। <td> ট্যাগটি কোন ট্যাগের ভেতরে থাকতে পারে?

ক) <table>
খ) <tr>
গ) <th>
ঘ) <caption>

সঠিক উত্তর: খ) <tr>

ব্যাখ্যা: <td> (Table Data) ট্যাগটি অবশ্যই কোনো না কোনো সারি বা <tr> ট্যাগের ভেতরে থাকতে হয়।

১৫। টেবিলের বর্ডার রঙ করতে কোন অ্যাট্রিবিউট ব্যবহার করা হয়?

ক) bordercolor
খ) border-style
গ) color
ঘ) bg-border

সঠিক উত্তর: ক) bordercolor

ব্যাখ্যা: <table> ট্যাগে bordercolor অ্যাট্রিবিউট ব্যবহার করে বর্ডারের রং নির্দিষ্ট করা যায়।

১৬। টেবিল তৈরিতে অত্যাবশ্যকীয় ট্যাগগুলো হলো—
i. <table>
ii. <tr>
iii. <td>

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: একটি ন্যূনতম টেবিল তৈরি করতে <table> (শুরু), <tr> (সারি) এবং <td> (সেল) এই তিনটি ট্যাগই প্রয়োজন।

১৭। <th> ট্যাগ ব্যবহার করলে—
i. লেখাটি বোল্ড হয়
ii. লেখাটি সেলের মাঝখানে থাকে
iii. এটি ডাটা সেলের চেয়ে ভিন্ন দেখায়

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: <th> ট্যাগ শিরোনামের জন্য ব্যবহৃত হয় বলে এটি বোল্ড ও সেন্টারড হয় এবং সাধারণ <td> ডাটা সেল থেকে আলাদা দেখায়।

১৮। নিচের কোডটি লক্ষ্য কর:
<td rowspan="2"> ICT </td>
এখানে কী ঘটবে?
i. সেলটি দুটি কলাম দখল করবে
ii. সেলটি দুটি সারি দখল করবে
iii. লেখাটি উল্লম্বভাবে মাঝখানে থাকবে (ডিফল্ট)

নিচের কোনটি সঠিক?

ক) i
খ) ii ও iii
গ) i ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: খ) ii ও iii

ব্যাখ্যা: rowspan="2" মানে সেলটি উপর-নিচ দুটি সারি দখল করবে। আর টেবিলে সেলের কন্টেন্ট ডিফল্টভাবে উল্লম্ব মাঝখানে থাকে।

১৯। টেবিল লেআউটের সুবিধা হলো—
i. ডাটা সুশৃঙ্খলভাবে দেখানো যায়
ii. জটিল স্ট্রাকচার তৈরি করা সহজ
iii. এটি এসইও (SEO) এর জন্য খুব ভালো

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ক) i ও ii

ব্যাখ্যা: টেবিল ডাটা বিন্যাসের জন্য সেরা এবং rowspan/colspan দিয়ে জটিল গঠন তৈরি সহজ। তবে এটি লেআউটের জন্য SEO ফ্রেন্ডলি নয়, কারণ সার্চ ইঞ্জিন <div> লেআউট বেশি পছন্দ করে।

২০। cellpadding="10" ব্যবহারের ফলে—
i. সেলের ভেতরের জায়গা বাড়বে
ii. সেলের বর্ডার মোটা হবে
iii. লেখা দেখতে স্পষ্ট হবে

নিচের কোনটি সঠিক?

ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: খ) i ও iii

ব্যাখ্যা: cellpadding সেলের দেয়াল থেকে লেখার দূরত্ব বাড়ায়, ফলে লেখা স্পষ্ট ও ফাঁকা দেখায়। এটি বর্ডারের মোটাত্বের (width) সাথে সম্পর্কিত নয়।

নিচের উদ্দীপকটি পড়ে ২১ ও ২২ নং প্রশ্নের উত্তর দাও:

<table border="1">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td colspan="2">C</td>
  </tr>
</table>

২১। উদ্দীপকের টেবিলে মোট কতটি সারি (Row) আছে?

ক) ১টি
খ) ২টি
গ) ৩টি
ঘ) ৪টি

সঠিক উত্তর: খ) ২টি

ব্যাখ্যা: কোডে দুটি <tr> ট্যাগ ব্যবহার করা হয়েছে, তাই মোট সারি সংখ্যা ২।

২২। দ্বিতীয় সারির 'C' লেখাটি কতটি কলামের জায়গা দখল করেছে?

ক) ১টি
খ) ২টি
গ) ৩টি
ঘ) ৪টি

সঠিক উত্তর: খ) ২টি

ব্যাখ্যা: কোডে <td colspan="2">C</td> ব্যবহার করা হয়েছে, অর্থাৎ এটি পাশাপাশি ২টি কলামের সমান জায়গা নিয়েছে।

নিচের উদ্দীপকটি পড়ে ২৩ থেকে ২৫ নং প্রশ্নের উত্তর দাও:
রফিক একটি রেজাল্ট শিট তৈরি করছে। সে চায় 'Subject' এবং 'Marks' নামে দুটি কলাম থাকবে এবং 'Marks' এর নিচে 'Theory' ও 'Practical' নামে আরও দুটি সাব-কলাম থাকবে।

২৩। রফিকের টেবিলের 'Marks' হেডিংটি তৈরির সঠিক কোড কোনটি?

ক) <th rowspan="2">Marks</th>
খ) <th colspan="2">Marks</th>
গ) <td>Marks</td>
ঘ) <tr colspan="2">Marks</tr>

সঠিক উত্তর: খ) <th colspan="2">Marks</th>

ব্যাখ্যা: 'Marks' এর নিচে যেহেতু দুটি ভাগ (Theory ও Practical) আছে, তাই 'Marks' কে অবশ্যই ২টি কলামের সমান জায়গা নিতে হবে (colspan="2").

২৪। 'Subject' হেডিংটি তৈরির জন্য সঠিক অ্যাট্রিবিউট কোনটি হবে, যাতে এটি নিচের সাব-কলামগুলোর সমান উচ্চতা পায়?

ক) colspan="2"
খ) rowspan="2"
গ) cellpadding="2"
ঘ) align="center"

সঠিক উত্তর: খ) rowspan="2"

ব্যাখ্যা: 'Subject' এর পাশে 'Marks' কলামটি দুটি ভাগে বিভক্ত হয়েছে (Theory, Practical), তাই 'Subject' সেলটিকে লম্বালম্বিভাবে ২ ঘর সমান করতে rowspan="2" দিতে হবে।

২৫। রফিকের টেবিলটির বর্ডার দৃশ্যমান করতে <table> ট্যাগে কোনটি লিখতে হবে?

ক) border="1"
খ) border="0"
গ) line="1"
ঘ) grid="yes"

সঠিক উত্তর: ক) border="1"

ব্যাখ্যা: border="1" (বা তার বেশি মান) দিলে টেবিলের চারপাশে এবং সেলের মাঝে দাগ দেখা যাবে। border="0" দিলে কোনো দাগ দেখা যাবে না।