এইচটিএমএল টেবিল

আমরা যখন কোন তথ্য উপস্থাপন করি, সাধারণত আমরা টেবিল ব্যবহার করি । এছাড়া, বিভিন্ন ধরনের উপাত্ত উপস্থাপন করার জন্য টেবিল ব্যবহার করে থাকি । একইভাবে, আমরা ওয়েবসাইটে কোন ধরনের উপাত্ত উপস্থাপন করার জন্য এইচটিএমএল টেবিল ব্যবহার করে থাকি । এইচটিএমএল টেবিল কিছুটা জটিল । নতুনদের প্রথম প্রথম বুঝতে অসুবিধা হতে পারে । মনোযোগ সহকারে টিউটোরিয়ালটি পড়লে সহজ হয়ে যাবে – ইনশাল্লাহ্‌ ।

এইচটিএমএল এ টেবিল ব্যবহার করার জন্য এইচটিএমএল <table>…</table> ট্যাগ ব্যবহার করতে হয় । প্রথমে চলুন আমরা একটা উদাহরণ দেখে আসি পরে আমরা বিশ্লেষণ করবো । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html>
<head>
 <title> HTML Table </title>
</head>
<body>
 <table border="1">
 <tr>
 <th> Serial No. </th>
 <th> Class </th>
 <th> Students </th>
 </tr>
 <td> 01 </td>
 <td> Class Six </td>
 <td> 90 </td>
 <tr></tr>
 <td> 02 </td>
 <td> Class Seven </td>
 <td> 90 </td>
 <tr> </tr>
 <td> 03 </td>
 <td> Class Eight </td>
 <td> 88 </td>
 <tr> </tr>
 <td> 04 </td>
 <td> Class Nine </td>
 <td> 87 </td>
 <tr> </tr>
 <td> 05 </td>
 <td> Class Ten </td>
 <td> 89 </td>
 <tr> </tr>
 </table>
</body>
</html>

কোড অবশ্যই নিজের হাতে লিখবেন । এবার index.html ফাইলটি একটি ব্রাউজারে ওপেন করালে নিচের চিত্রের মত দেখতে পারবেন;

Screenshot_2

 

কোড বিশ্লেষণঃ

১ । আমরা প্রথমে <table>…</table> ট্যাগ এর মাঝে border ব্যবহার করেছি । কেননা, এখানে আমরা টেবিল এর বর্ডার নির্ধারণ করেছি । এজন্য আমরা বর্ডার ১ দিয়েছি । আপনি বর্ডার ২ ব্যবহার করে কোডটুকু রান করান । তাহলে বিষয়টি পরিষ্কার হয়ে যাবে । আপনি যদি border ব্যবহার না করেন তাহলে বর্ডারবিহীন টেবিল ব্রাউজারে প্রদর্শিত হবে ।

২ । টেবিলের হেডার নির্ধারণ করার জন্য <th>…</th> ব্যবহার করা হয়েছে ।

৩। টেবিলের Row অর্থাৎ সারি নির্ধারণ করার জন্য <tr>…</tr> ব্যবহার করা হয়েছে ।

৪ । টেবিলের সেল নির্ধারণ করার জন্য <td>…</td> ব্যবহার করা হয়েছে ।

আশা করি বুঝতে পেরেছেন ।

Series Navigation<< এইচটিএমএল লিঙ্কএইচটিএমএল ফর্ম >>

Leave a Reply

Your email address will not be published. Required fields are marked *