HTML দিয়ে একাধিক সারি কলাম বিশিষ্ট টেবিল তৈরি, How to use colspan and row span..প্রযুক্তি বই

 প্রিয় পাঠক, এত দিন আমরা এইচটিএমএল এর সবগুলো ট্যাগ নিয়ে আলোচনা করেছি।  গত পর্বে আমরা দেখেছি কিভাবে টেবিল তৈরি করতে হয়, কিভাবে টেবিলে রং ব্যবহার করতে হয়। কিভাবে টেবিল ব্যাকগ্রাউন্ড রং করতে হয়। 

এই পর্বে দেখব কিভাবে টেবিলের কোনো(row) সারি বা  কলাম(column) কে একাধিক সারি কলামে রূপান্তর করা যায়। ঠিক চিত্রের মতো। 

উপরের ছবিতে দেখছেন যে Computer লেখা বক্সটিকে Laptop এবং Desktop এ দুভাগে ভাগ করা হয়েছে।  আবার Tablet লেখাটিকে  দুটি ঘরের মাঝে লেখা হয়েছে। এই এ রকম টেবিল তৈরি করার পদ্ধতি সমূহই এই  পর্বে আলোচনা করব।

এই ধরনের ডিজাইন তৈরি করার জন্য আমাদের ট্যাগ এর-ভিতরে rowspan="" এবং colspan=""  ব্যবহার করতে হয়। যদি আমরা row বা সারি বাদ দিতে চাই বা জায়গা দখল করতে চাই তবে Row span আর কলাম বাদ দিতে চাইলে বা যায়গা দখল করতে চাইলে Colspan ব্যবহার করব। উদাহরণ দিয়ে বুঝিয়ে দিচ্ছি

আমরা সাধারণ ভাবে একটি টেবিল এর html গঠন নিলাম,যেমন-

ইনপুটঃ

<table border="1"> 

<tbody> 
<tr>
<th colspan="3"> ডিভাইসের নামওসংখ্যা </th>

</tr>

  <tr>
  <th>ডিভাইসের নাম</th>
  <th> সংখ্যা </th>
  <th>  মোট </th>
  </tr>

  <tr> 
   <td>কম্পিউটার </td>
   <td>১২০টি</td>
<td row span="3"> ৬৫০ </td>
  </tr>

  <tr> 
  <td>মোবাইল</td>
  <td>৪৮০ টি</td>
  </tr>

  <tr>
  <td>টেবলেট</td>
  <td>৫০</td>
  </tr>

</tbody>

</table>

আউটপুটঃ

 

 

 ডিভাইসের নাম ও সংখ্যা 



  

  
ডিভাইসের নাম
  
 সংখ্যা 
  
  মোট 
  

  
 
   
কম্পিউটার 
   
১২০টি
 ৬৫০ 
  

  
 
  
মোবাইল
  
৪৮০টি
  

  

  
টেবলেট
  
৫০টি
  

উপরের ইনপুট লক্ষ্য করুন। শুরুতেই আমরা "ডিভাইসের নাম ও সংখ্যা " লেখাটি লিখতে তিনটি  কলামের জায়গা দখল করেছি। তাই ইনপুটে  এই লেখাটির জন্য যে <th> সেটায় colspan ="3" দিয়েছি। যাতে করে লেখাটি তিনটি কলাম দখল করে।

একই ভাবে" ৬৫০ টি" লেখাটি যে ঘরে লেখা হয়েছে সেখানে দেখতে পাচ্ছি তিনটি সারি বা Row দখল করেছে। তাই উপরে ইনপুটে এর জন্য দেয়া ট্যাগ <td>  এর ভিতরে rowspan="3" দেয়া হয়েছে। যার ফলে ৬৫০ লেখাটি তিনটি সারি তার দখলে নিয়ে নিয়েছে।

এবার, আমরা ঐ উপরের ছবিটার টেবিলের মতো আরো একটি টেবিল তৈরি করার চেষ্টা করবো। ত প্রথমেই আমরা টেবিলটা তৈরি করে নেই পরে একটি একটি ট্যাগ করে আলোচনা করব।

ইনপুট

<table border="1" style="text-align:center;"> 
<tbody> 
<tr>
<th colspan="3">নেটওয়ার্ক ব্যবহার কারীর সংখ্যা </th>
</tr>
  <tr>
  <th>নেটওয়ার্ক কোম্পানি</th>
  <th> ব্যবহারকারী </th>
  <th> শতকরা </th>
  </tr>
  <tr> 
   <td rowspan="2">টেলিটক</td>
   <td>নারী </td>
<td >৬০% </td>
  </tr>
  <tr> 
  <td>পুরুষ </td>
  <td>৪০%</td>
  </tr>
  <tr>
  <td>মোট</td>
  <td colspan="2">১০০%</td>
  </tr>
</tbody>
</table>

নেটওয়ার্ক ব্যবহার কারীর সংখ্যা
নেটওয়ার্ক কোম্পানি	ব্যবহারকারী	শতকরা
টেলিটক	নারী	৬০%
	পুরুষ	৪০%
মোট	১০০%

উপরের ইনপুটে লেখা সমস্ত কোড আমরা একটি একটি করে বর্ণনা করছি।

★প্রথমেই আসি <table>ট্যাগ এর ভিতরে style ="" দিয়ে text-align:center দেয়ার কারণ হলো টেবিলে লেখা সমস্ত লেখা গুলো প্রতিটা বক্সের ঠিক মাঝখানে দেখাবে।

এখন এরপরের লাইনে দেখুন "নেটওয়ার্ক ব্যবহারকারীর সংখ্যা " লেখাটির জন্য এর <th> ট্যাগ এর ভিতরে colspan="3" দেয়ার কারণ হলো এটি পরপর তিনটি কলাম বা বক্স নিজের দখলে নিয়েছে। আউটপুটে লক্ষ্য করলে দেখতে পাবেন এই লেখাটি তিনটি কলাম দখল করে বসে রয়েছে। এটা colspan এর কারিশমা।

এর পর আসি "টেলিটক" লেখাটির বর্ণনায়,

আউটপুটে দেখুন এই লেখাটি তার সারি সহ নিচের আরো একটি সারি বা বক্স দখল করে নিয়েছে। আমরা আগেই জানি যে সারি দখলে নেবার জন্য rowspan ="" ব্যবহার করতে হয়। তাই টেলিটক লেখাটির  ট্যাগ <td> এর ভিতরে rowspan="2" দেয়া হয়েছে।

এই রকম ভাবে আউটপুটে ১০০% লেখাটির দিকে লক্ষ্য করুন। এটিও দুটি কলাম দখল করে নিয়েছে কারন এর ট্যাগ <td> এর ভিতরে colspan=2 দেয়া হয়েছে।  

মূলত এভাবেই প্রতিটিতে ঘরের colspan আর rowspan গুলো কাজ করে। 

করব।

ইনপুট

<table border="1" style="text-align:center;"> 

<tbody> 
<tr style ="background-color:red;color:white;">
<th colspan="5">বাজারের তালিকা </th>

</tr>

  <tr>
  <th>আইটেমের নাম</th>
  <th> প্রকার </th>
  <th>পরিমাণ </th>
  <th> টাকা </th>
  <th>মোট টাকা</th>
  </tr>

  <tr> 
   <td rowspan="3">সবজি</td>
   <td>আলু </td>
   <td>২ কেজি</td>
<td >১০০৳</td>
<td rowspan="3">২০০৳</td>
  </tr>

  <tr> 
  <td>পুইশাঁক </td>
  <td>১কেজি</td>
  <td>৭০৳</td>
  </tr>

  <tr>
  <td>পটল</td>
  <td>১কেজি</td>
  <td >৩০৳</td>
  </tr>

</tr>

  <tr> 
   <td rowspan="3">তেল</td>
   <td> সরিষা তেল </td>
   <td>২ লিটার</td>
<td >৩০০৳</td>
<td rowspan="3">৬০০৳</td>
  </tr>

  <tr> 
  <td>নারিকেলতেল </td>
  <td>৫০০গ্রাম</td>
  <td>২০০৳</td>
  </tr>

  <tr>
  <td>সয়াবিন তেল</td>
  <td>১লিটার</td>
  <td >১০০৳</td>
  </tr>
<tr style ="background-color:green; color:white;">
<td colspan="4" > সর্বমোট </td>
<td > ৮০০৳</td>
</tr>

</tbody>

</table>

আউটপুট

উপরের আউটপুটে  সর্বমোট row বা সারি ৫টি। এবং  "বাজারের তালিকা " লেখাটির জন্য এর <th> এর ভিতর rowspan ব্যবহার করে ৫টি সারি দখল করা হয়েছে যার ফল সরূপ এই লেখাটি ৫টি সারি নিয়ে দাঁড়ানো। আর এই লেখাটির ব্যাকগ্রাউন্ড রং করার জন্য সম্পূর্ণ সারির জন্য <tr> এর ভিতরে style="" এট্রিবিউট ব্যবহার করে background - color এবং Text color:white  ব্যবহার করা হয়েছে। যার ফল সরূপ Background লাল রং এবং টেক্সট কালার সাদা হয়েছে। 

এর পরবর্তী তে "সবজি" এর জন্য তিনটি row বরাদ্দ করা হয়েছে। এর জন্য সবজি এর <td> তে rowspan=3 দেয়া হয়েছে। ঠিল একই ভাবে - ২০০৳, তেল, ৬০০৳ এই ঘর গুলোর জন্যও তিনটি করে row ব্যবহার করা হয়েছে। 

এখন আসুন নিচের "সর্বমোট" এর ঘরে, এখানে এর জন্য ৪টি কলাম বরাদ্দ এজন্য এর < td> তে colspan =4 ব্যবহার করা হয়েছে এবং এর সম্পূর্ণ সারি ব্যাকগ্রাউন্ড রং করার জন্য style="" দিয়ে  background color সবুজ আর টেক্সট কালার সাদা ব্যবহার করা হয়েছে।  

প্রিয় পাঠক,  এভাবে আমরা বিভিন্ন ডিজাইনের টেবিল তৈরি করতে পারি।

এরকম আরো প্রয়োজনীয় পৃষ্ঠা  পড়তে সাথে থাকুন!

ধন্যবাদ!