ওয়েব পেজে বিভিন্ন তথ্য বা উপাত্ত সুন্দর ভাবে ছক বা টেবিল আকারে উপস্থাপনের জন্য টেবিল তৈরি করা হয়।
এছাড়া ওয়েব পেজের লেআউট তৈরি করার জন্যও টেবিল ব্যবহার করা হয়।
টেবিল প্রদর্শন করার জন্য <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 প্রোপার্টি নির্ধারণ করতে হবে।
পুরো টেবিলের সকল সেলগুলোর চারপাশে কেবল, একটি bordar প্রদর্শনের জন্য সিএসএস border-collapse প্রোপার্টি ব্যবহার করা হয়।
table, th, td { border: 2px solid red; border-collapse: collapse; }
স্বাভাবিকভাবে কোন টেবিল ওয়েব সাইটের বাম দিকে প্রদর্শিত হয়, কিন্তু আপনি চাইলে টেবিলটিকে ওয়েব সাইটের ডান দিকে বা মাঝখানে প্রদর্শন করতে পারেন। 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 এট্রিবিউট ব্যবহার করে টেবিলে একাধিক সেল তৈরি করা হয়।
<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 এট্রিবিউট ব্যবহার করে টেবিলে একাধিক সারি যুক্ত টেবিল সেল তৈরি করা যায়।
<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> ট্যাগটি রাখতে হবে।