HTML Table

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

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

 

টেবিল

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

<tr>...</tr> - এই ট্যাগ ব্যবহার করে টেবিলের সারি বা row তৈরি করা হয়।

<th>...</th> - এই ট্যাগ ব্যবহার করে টেবিলের হেডিং তৈরি করা হয়। পূর্বনির্ধারিত বা Default ভাবেই, এই ট্যাগের ফলে লেখাগুলো টেবিল সেলের মাঝ বরাবর অবস্থান নিয়ে থাকে

<td>...</td> - এই ট্যাগ ব্যবহার করে টেবিলের সেল বা cell গুলো তৈরি করা হয়। কোন টেবিলে <td>...</td> এর প্রতিটি ট্যাগ একটি করে নতুন সেল তৈরি করে।

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

<table >
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

আর <td> এর elements গুলোতে একটি টেবিলের সকল ডেটা থাকে। এখানে সব ধরণের HTML element যেমন- Text, image, list, link ইত্যাদি থাকতে পারে।

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

বর্ডার এট্রিবিউট নির্দিষ্ট করে না দেয়া হলে ব্রাউজার বর্ডার ছাড়াই টেবিল প্রদর্শন করবে। বর্ডার এট্রিবিউট ব্যবহার করে নীচে একটি উদাহরণ -

<table border="1">
  <tr>
    <th>First Name</th>
    <th>Last  Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Output:

First Name	Last Name	Age
Jill	Smith	50
Eve	Jackson	94

align এট্রিবিউট

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

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

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

<table align="center">
<tr>
<td>.....</td>
<td>…..</td>
</tr>
</table>

 

colspan এট্রিবিউট

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

উদাহরণ

<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Output:

Name	Telephone
Bill Gates	55577854	55577855

rowspan এট্রিবিউট

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

উদাহরণ

<table border="1">
<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>

Output:

Name	Bill Gates
Telephone	55577854
	55577855

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

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

উদাহরণ

<table border="1">
<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>

Output:

                            Monthly savings

Month	Savings
January	$100
February	$50