Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

এইচটিএমএল টেবিল - HTML Teble


ওয়েব পেজে বিভিন্ন তথ্য বা উপাত্ত সুন্দর ভাবে ছক বা টেবিল আকারে উপস্থাপনের জন্য টেবিল তৈরি করা হয়। এছাড়া ওয়েব পেজের লেআউট তৈরি করার জন্যও টেবিল ব্যবহার করা হয়।
টেবিল প্রদর্শন করার জন্য <table>...</table> ট্যাগ ব্যবহার করা হয়।

বিষয়বিস্তারিত নাম
ফুলের নামগোলাপ, বেলী, বকুল, হাস্নাহেনা।
ফলের নামআম, কমলা, জাম, কাঁঠাল।
পাখির নামটিয়ে, দোয়েল, শালিক, কোয়েল।
পশুর নামবাঘ, সিংহ, বেড়াল, কুকুর।

টেবিল

ওয়েব পেজে টেবিল তৈরি করার জন্য টেবিল ট্যাগ অর্থাৎ <table>...</table> ট্যাগ ব্যবহার করা হয়। কিন্তু একটি পরিপূর্ণ টেবিল তৈরি করার জন্য টেবিল ট্যাগের সাথে আরও কিছু ট্যাগ ব্যবহার করতে হয়। ট্যাগ গুলো হল -

এই ট্যাগ গুলোর শেষ ট্যাগ অপশনাল।

এইচটিএমএল <table> ট্যাগ সম্পর্কে জানতে W3C এর 4.3.9.1 The table element ওয়েব পেজটি ব্রাউজ করুন।

সবগুলো ট্যাগ ব্যবহার করে নীচে একটি উদাহরণ দেয়া হল -

উদাহরণ


<table border="1">
<td>Teble Heading</td>
<tr>
<th>Name</th>	
<th>Address</th>	
<th>Number</th>	
</tr>
<tr>
<th>Ms. Tuli</th>
<th>Bangladesh</th>
<th>0123456789</th>
</tr>
</table>

কোড এডিটর


এখানে <tr> ট্যাগ দ্বারা টেবিলে সারি বা row তৈরি করা হয়েছে, <th> ট্যাগ দ্বারা প্রতিটি সারিতে কলাম তৈরি করা হয়েছে এবং <td> ট্যাগ দ্বারা টেবিলে হেডিং তৈরি করা হয়েছে।


টেবিল এট্রিবিউট

টেবিলকে আকর্ষণীয় করে ডিজাইন করার জন্য যে সকল এট্রিবিউট ব্যবহার করা হয় সেগুলো হল - border, align, width, cellspacing, cellpadding এবং bgcolor নীচে এগুলোর কয়েকটির বর্ণনা দেয়া হল।


বর্ডার এট্রিবিউট

কোন সময় আপনি যদি বর্ডার এট্রিবিউট নির্দিষ্ট করে না দেন তবে ব্রাউজার আপনাকে বর্ডার ছাড়াই টেবিল প্রদর্শন করবে। বর্ডার এট্রিবিউট ব্যবহার করে নীচে একটি উদাহরন দেখুন -

উদাহরণ


<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

কোড এডিটর


উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র <table> এর চারপাশে বর্ডার আছে। কিন্তু <th> এবং <td> এলিমেন্টে কোনো বর্ডার নাই। <table>, <th> এবং <td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি নির্ধারণ করতে হবে।


টেবিলের border-collapse প্রোপার্টি

পুরো টেবিলের সকল সেলগুলোর চারপাশে কেবল, একটি bordar প্রদর্শনের জন্য সিএসএস border-collapse প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ


table, th, td {
border: 2px solid red;
border-collapse: collapse;
}

কোড এডিটর



align এট্রিবিউট

স্বাভাবিকভাবে কোন টেবিল ওয়েব সাইটের বাম দিকে প্রদর্শিত হয়, কিন্তু আপনি চাইলে টেবিলটিকে ওয়েব সাইটের ডান দিকে বা মাঝখানে প্রদর্শন করতে পারেন। align এট্রিবিউট ব্যবহার করে আপনি টেবিল ডানে, বামে বা মাঝখানে প্রদর্শন করতে পারবেন। align এট্রিবিউট সিনট্যাক্স হল -

সিনট্যাক্স

<table align="value"> 
</table>
 

এখানে value হিসেবে left,right বা center ব্যবহার করা যায়। নীচে একটি উদাহরণ দেখুন -

উদাহরণ


<table align="center">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

কোড এডিটর


নোট - ডিফল্ট হিসেবে কোন টেবিল ওয়েব সাইটের বাম দিকে প্রদর্শিত হয়।


সেলে প্যাডিং যুক্ত করা

কোন সেলে প্রদর্শিত কন্টেন্ট অর্থাৎ লেখা, ছবি ইত্যাদি এবং সেলের বর্ডারের মধ্যকার ফাঁকা স্থানটুকুই হল cell padding. Default ভাবে সেলে কোন পাদিং যুক্ত হয় না। তাই সিএসএস padding প্রোপার্টিটি ব্যবহার করে সেলে প্যাডিং যুক্ত করা হয়। নিছে একটি উদাহরণ দেখুন।

উদাহরণ


th, td {
padding: 20px;
}

কোড এডিটর



বর্ডার স্পেস যুক্ত করা

টেবিলের কন সেলের বর্ডার এবং পার্শ্ববর্তী কোন সেলের বর্ডারের মদ্ধবর্তী ফাঁকা স্থান কেই বর্ডার স্পেস বলা হয়। সিএসএস border-spacing প্রোপার্টি ব্যবহার করে টেবিলে বর্ডার স্পেস নির্ধারণ করা হয়।

উদাহরণ


table {
border-spacing: 10px;
}

কোড এডিটর


নোট - যদি টেবিলে সিএসএস border-collapse প্রোপার্টি ব্যবহার করা হয়, তবে সিএসএস border-spacing প্রপার্টি কোন প্রভাব বিস্তার করতে পারবে না।


colspan এট্রিবিউট

colspan এট্রিবিউট ব্যবহার করে টেবিলে একাধিক সেল তৈরি করা হয়।

উদাহরণ


<table style="width:90%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

কোড এডিটর



rowspan এট্রিবিউট

rowspan এট্রিবিউট ব্যবহার করে টেবিলে একাধিক সারি যুক্ত টেবিল সেল তৈরি করা যায়।

উদাহরণ


<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td> 
</tr> <tr> <td>55577855</td> </tr> </table>

কোড এডিটর



টেবিলে ক্যাপশন যুক্ত করা

>caption> ট্যাগ ব্যবহার করে টেবিলে ক্যাপশন তৈরি করা হয়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

কোড এডিটর


নোট - অবশ্যই <table> ট্যাগের পরেই <caption> ... </caption> ট্যাগটি রাখতে হবে।