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



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


টেবিল

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

<tr>...</tr> - এই ট্যাগ সারি বা row দ্বারা তৈরি করা হয়।
<th>...</th> - ট্যাগের মাধ্যমে টেবিলের হেডিং নির্ধারণ করা হয়। ডিফল্টভাবে হেডিংগুলো বোল্ড হয় এবং টেক্সটগুলো টেবিল সেলের মাঝখানে থাকে।
<td>...</td> - ট্যাগের মাধ্যমে টেবিলের ডেটা বা তথ্যগুলো টেবিলের মধ্যে যোগ করা হয়। <td> ট্যাগ এর সংখ্যা যত বাড়বে টেবিলের কলাম সংখ্যাও তত বাড়বে।

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

উদাহরণ দেখুন

<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 প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

table, th, td {
border: 1px solid black;
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>


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


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

সেল প্যাডিং বলতে সেলের কন্টেন্ট এবং এর বর্ডারের মধ্যবর্তী ফাঁকা অংশকে বু্ঝায়। যদি প্যাডিং নির্ধারণ না করা হয়, তবে টেবিলের সেলগুলো প্যাডিং ছাড়াই প্রদর্শিত হবে। সেলে প্যাডিং যুক্ত করার জন্য সিএসএস padding প্রোপার্টিটি ব্যবহার করা হয়।

উদাহরণ

th, td {
padding: 15px;
}




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

বর্ডার স্পেস বলতে টেবিলের সেলগুলোর মধ্যকার দূরুত্বকে বোঝান হয়। টেবিলে বর্ডার স্পেস নির্ধারণ করার জন্য সিএসএস border-spacing প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

table {
border-spacing: 5px;
}


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


একাধিক কলামযুক্ত সেল

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

উদাহরণ

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




একাধিক সারিযুক্ত সেল

একাধিক সারিযুক্ত টেবিল সেল তৈরি করার জন্য 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>


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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.