Html টেবিল তৈরির নিয়ম
টেবিল নির্দেশ করার জন্য <table> ,<tr> দিয়ে table row, <td> দিয়ে table
data এবং <th> দিয়ে table headings বুঝানো হয়। এই কতিপয় tag দ্বারা সহজেই টেবিল করা যায়।
প্রক্রিয়াঃ
১। নোটপ্যাড ওপেন করি।
২। প্রথমে টেবিল ও এর বর্ডার নির্ধারণের জন্য নিম্মের কোড ব্যবহার
করুন।
</html>
<body>
<table border="1">
</table>
</body>
</html>
অর্থাৎ টেবিল এর বর্ডার সাইজ 1 ।সংখ্যা
এর মান বৃদ্ধি করলে অর্থাৎ 1 এর স্থানে 2,3,4 etc ব্যাবহার করলে বর্ডার মোটা হবে। বর্ডার নির্ধারণ
না করলে টেবিল এর কোন বর্ডার লাইন দেখাবে না।
৩।row সৃষ্টি করার জন্য <tr></tr>
ব্যাবহার
করতে হবে এবং table row তে <th></th>
দিয়ে টেবিল হেডিং ও <td></td> দিয়ে টেবিল ডাটা
যুক্ত করতে হবে। সকল <td> ও <tr> অবশ্যই <table
border="1"> এবং </table> এর ভেতর লিখতে হবে কারন
অ্যাট্রিবিউট গুলো টেবিল এর অংশ। টেবিল ডাটা ও টেবিল হেডিং যুক্ত করলে, উক্ত ডাটা
ও হেডিং গুলো ডানে যুক্ত হতে থাকবে। যেমনঃ
ধরুন,আমরা ৫ জন ছাত্রের নাম,রোল ও ঠিকানা এর একটি টেবিল তৈরি করব।
তাহলে প্রথমে আমাদের টেবিল এর হেডিং দিতে হবে।এই হেডিং হবে টেবিল এর
প্রথম row. তাহলে
কোডটি হবে এইরকমঃ
<tr> <th> Name </th><th>
Roll</th> <th> Address </th>
</tr>
৪। টেবিল এর দ্বিতীয় row থেকে ছাত্রদের information থাকবে এবং প্রত্যেকটি row তে এক জন ছাত্রের information
থাকবে যা <td> দিয়ে যুক্ত করতে হবে।
ধরুন, ছাত্রের নাম Rahim, রোল 1111 এবং Address: Chittagong তাহলে,
<tr> <td>Rahim </td><td>
1111</td> <td> Chittagong
</td>
</tr>
হেডিং অনুযায়ী যথাক্রমে নাম,রোল ও ঠিকানা আছে তাই দ্বিতীয় row তে সেই অনুযায়ী
প্রথমে নাম,তারপর রোল ও পরে ঠিকানা দেয়া হয়েছে।
একই ভাবে বাকিদের গুলো ও যুক্ত করি।
<tr> <td>Hassan </td><td>
1451</td> <td> Sylhet </td>
</tr>
<tr> <td>Robi </td><td>
1231</td> <td> Dhaka </td>
</tr>
<tr> <td>Ovi </td><td>
1234</td> <td> Chittagong
</td>
</tr>
<tr> <td>Jihan </td><td>
1101</td> <td> Chittagong
</td>
</tr>
৫। এবার ফাইলটি document (ফাইল নামের শেষে .html যুক্ত করে) save করি। ব্রাউজার দিয়ে ফাইলটি ওপেন করলে
টেবিলটি দেখাবে।
ব্যাখ্যাঃ
এখানে ৫ টি ছাত্রের জন্য ৬ টি row ব্যাবহার করা হয়েছে কারন প্রথম row
টি
হেডিং হিসেবে ব্যাবহার হয়েছে বাকি গুলোতে ছাত্রদের information সংরক্ষণ করা হয়েছে।
Comments
Post a Comment