HTML এ টেবিল, টেবিলের প্রয়োজনীয়তা, ট্যাগ, টেবিল তৈরির পদ্ধতি, টেবিলে বর্ডার সংযোজন, টেবিল অ্যালাইনমেন্ট, টেবিলে ক্যাপশন দেওয়ার নিয়ম
HTML এ টেবিল, টেবিলের প্রয়োজনীয়তা, ট্যাগ, টেবিল তৈরির পদ্ধতি, টেবিলে বর্ডার সংযোজন, টেবিল অ্যালাইনমেন্ট, টেবিলে ক্যাপশন দেওয়ার নিয়ম
টেবিল (Tables)
যেকোনো তথ্যকে একটি বিশেষ পদ্ধতিতে সংরক্ষণের জন্য টেবিল তৈরি করা হয়। সারি (রো) ও স্তম্ভ (কলাম) এর সমন্বয়ে টেবিল তৈরি হয়। এর মধ্যে আনুভূমিক অবস্থানকে সারি ও উলম্ব অবস্থানকে কলাম বলা হয়। সারি ও কলাম মিলে যে ক্ষুদ্র ক্ষুদ্র ঘরের সৃষ্টি হয় তাকে কক্ষ বা সেল বলে।
নিচে ৪টি কলাম ও 4টি সারি সংবলিত একটি টেবিল দেখানো হলো।
টেবিলের প্রয়োজনীয়তা :
বিভিন্ন কারণে ওয়েব পেইজে টেবিলের গুরুত্ব রয়েছে। যেমন-
ওয়েব পেইজে পৃথকভাবে কলাম তৈরি করা যায় না। এজন্য কোনো তথ্যকে কলাম আকারে সাজাতে গেলে প্রথমে টেবিল তৈরি করে নিতে হয়।
ওয়েব পেইজে সাইড হেডিং উল্লম্বভাবে অক্ষর সাজানো যায় না। এজন্য প্রথমে উক্ত বিষয়বস্তুকে ছবি হিসেবে নিয়ে টেবিলের সেলে বসিয়ে এবং টেবিলের দেয়াল অদৃশ্য করে সাজানো যায়।
ওয়েব পেইজে বিভিন্নভাবে চিত্রের মতো উপস্থাপনের জন্য টেবিলের প্রয়োজন হয়।
HTML এ ব্যবহৃত টেবিল ট্যাগগুলো হলো :
ট্যাগ কাজ
<table> একটি টেবিল নির্ধারণ করে
<th> টেবিলের হেডিং নির্ধারণ করে
<tr> টেবিলের রো নির্ধারণ করে
<td> টেবিলের ডেটা নির্ধারণ করে
<thead> টেবিলের হেড নির্ধারণ করে
<tbody> টেবিলের বডি নির্ধারণ করে
<tfoot> টেবিলের ফুটার নির্ধারণ করে
<caption> টেবিলে ক্যাপশন নির্ধারণ করে
<colgroup> টেবিলে এক বা একাধিক কলামের গ্রুপ নির্ধারণ করে।
টেবিল তৈরির পদ্ধতি :
একটি টেবিল তৈরিতে বিভিন্ন ধরনের ট্যাগের প্রয়োজন হয়।
- <table> </table>
- <tr> </tr>(tr – table row)
- <td> </td> (td – table data)
- <th> </th> (th – table heading)
- <caption> </caption>
- <td colspan = “Number”>
- <td rowspan = “Number”>
এই ট্যাগগুলো দিয়ে টেবিল বানানো যাবে।
টেবিলে বর্ডার সংযোজন করা :
টেবিলের চর্তুদিকে বর্ডার লাইন দেওয়ার জন্য <table> ট্যাগে border অ্যাট্রিবিউট ব্যবহার করা হয়।
যেমন: <table border = “0”> লিখলে কোন বর্ডার হবে না। <table border = “1”> লিখলে বর্ডার সাইজ 1 পিক্সেল হবে।
<table border = “2”> লিখলে বর্ডার সাইজ 2 পিক্সেল হবে।
টেবিলে বর্ডার সংযোজন করে লেখাকে আরো বেশি দৃশ্যমান করা যায়।
উদাহরণ-১ : টেবিলে বর্ডার সংযোজন করার HTML কোড :
<html>
<head>
<title> Table </title>
</head>
<body>
<table border = ‘1’>
<tr>
<th> Roll </th>
<th> Name </th>
<th> GPA </th>
</tr>
<tr>
<td> 1010 </td>
<td> Ammar </td>
<td> 5.00 </td>
</tr>
</table>
</body>
</html>
টেবিল অ্যালাইনমেন্ট :
টেবিলে বেশি লেখা থাকলে টেবিলের সেই লেখাকে সাজিয়ে নিলে দেখতে অনেক সুন্দর দেখায়। টেবিলের বামে, ডানে, মাঝে ও সমভাবে লেখা সাজানো যায়। লেখাকে সাজানোর জন্য <div align = Ò Ó> ট্যাগ ব্যবহার করা হয়। এখানে ফরা ট্যাগটি টেবিল তৈরির পূর্বে সমস্ত ডকুমেন্টকে লজিক্যালে ভাগ করা হয়। যখন টেবিলের বাম পাশ বরাবর লেখা রাখতে হবে তখন ট্যাগের প্রয়োজন নেই। কারণ বাম পাশের লেখা স্থায়ীভাবে নির্দিষ্ট করা থাকে। কোনো কোনো ব্রাউজারে মধ্য বরাবর লেখা রাখার জন্য শুধু <center> ট্যাগ ব্যবহার করলেও কাজ করে। ডান পাশে রাখার জন্য <div align = “right”> ট্যাগ ব্যবহার করতে হয়।
উদাহরণ-২ : টেবিলে <div align = “ “> ট্যাগ ব্যবহার করার HTML কোড :
<html>
<head>
<title> Table </title>
</head>
<body>
<table border =”1″ width = ‘100’>
<caption> Lecture Publications Ltd. </caption>
<tr>
<th> <div align = “left”> Book Name </th>
<th> <div align = “center”> Writer </th>
<th> <div align = “right”> TK. </th>
</tr>
<tr>
<td> <div align = “left”>HSC ICT </td>
<td> <div align = “center”> Prokash Kumar Das </td>
<td> <div align = “right”> 304.00 </td>
</tr>
<tr>
<td> <div align = “left”> HSC Chemistry </td>
<td> <div align = “center”> Sanjit Kumar Guha </td>
<td> <div align = “right”> 350.00 </td>
</tr>
</table>
</body>
</html>
আউটপুট :
টেবিলে ক্যাপশন দেওয়ার নিয়ম :
যখন টেবিলে কোনো তথ্য লেখা হয় তখন উক্ত টেবিলের একটি নামকরণ করা হয়। এ নামকরণ টেবিলের উপরে বা নিচে লেখা যায়।
উদাহরণ-৩ : নিচের টেবিলের মত HTML কোড লিখ :
HSC Result-2017
| Roll | Name | GPA |
| 101 | ONSE | 5.00 |
| 102 | ZARIN | 5.00 |
| 103 | INDRANI | 5.00 |
উক্ত টেবিল তৈরির HTML কোড :
<html>
<head>
<title> Table </title>
</head>
<body>
<caption> HSC Result-2017 </caption>
<table border = ‘1’ width = ‘100’>
<tr>
<th> Roll </th>
<th> Name </th>
<th> GPA </th>
</tr>
<tr>
<td> 101 </td>
<td> ONSE </td>
<td> 5.00 </td>
</tr>
<tr>
<td> 102 </td>
<td> ZARIN </td>
<td> 5.00 </td>
</tr>
<tr>
<td> 103 </td>
<td> INDRANI </td>
<td> 5.00 </td>
</tr>
</table>
</body>
</html>
