এইচটিএমএল ব্যবহার করে সারণি বা টেবিল তৈরি করা যায়। টেবিলের আনুভূমিক ঘরগুলোকে বলা হয় সারি বা রো (row), আর উল্লম্ব ঘরগুলোকে বলা হয় স্তম্ভ বা কলাম (Column)। টেবিলের একেকটি ঘরকে বলা হয় সেল (cell)। টেবিলের একেবারে উপরের সারিকে বলা হয় হেডার সারি (header) আর একেবারে নিচের সারিকে বলা হয় ফুটার (footer) সারি। তবে হেডার ও ফুটার সারি টেবিলের ঐচ্ছিক উপাদান, অর্থাৎ সব টেবিলে এ দুটি অংশ নাও থাকতে পারে।
<!DOCTYPE html> <html> <head> <title>HTML Table Example</title> </head> <body> <table> <thead> <tr> <th>Serial</th> <th>Subject</th> <th>GPA</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>Bangla</td> <td>5.00</td> </tr> <tr> <td>02</td> <td>English</td> <td>5.00</td> </tr> <tr> <td>03</td> <td>Science</td> <td>5.00</td> </tr> <tr> <td>04</td> <td>Math</td> <td>5.00</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>CGPA</td> <td>5.00</td> </tr> <tfoot> </table> </body> </html>
কোডটি সেভ কর ব্রাউজারে ওপেন করলে নিচের ছবির মত আউটপুড় দেখা যাবে।
প্রতিটি টেবিল বর্ণনা করা হয় একটি table এলিমেন্ট দিয়ে। এই এলিমেন্টের ভেতরে আবার তিন ধরনের এলিমেন্ট থাকতে পারে। এগুলো হচ্ছে টেবিলের তিনটি অংশ, যথাক্রমে হেডার (header), বডি (body) ও ফুটার (footer)। এগুলো যথাক্রমে thead, tbody ও tfoot এলিমেন্ট দিয়ে প্রকাশ করা হয়। টেবিল নিয়ে কাজ করতে হলে একেকটি রো বা সারি নিয়ে কাজ করতে হয়। সেজন্য আছে tr বা table row এলিমেন্ট। এর কাজ হচ্ছে টেবিলের একটি সারি তৈরি করা। দশটি সারি দরকার হলে দশটি tr এলিমেন্ট ব্যবহার করতে হবে। হেডার অংশে টেবিলের হেডিং বসাতে th এলিমেন্ট ব্যবহার করা হয়। ব্রাউজারে গেলে দেখা যাবে, হেডিং অংশটি বোল্ড করা আছে। যে কয়টি হেডিং লাগবে সে কয়টি th এলিমেন্ট ব্যবহার করতে হবে।
টেবিলের বডিতে tr এলিমেন্ট দিয়ে সারি তৈরি করা হলো। এরপর তথ্য (data) রাখার জন্য ব্যবহার করা হয়েছে td (অর্থ, table data) এলিমেন্ট।
এই টেবিলে কোনোরকম বর্ডার ব্যবহার করা হয়নি। তবে চাইলে এভাবে table এলিমেন্টে বর্ডারের কথা উল্লেখ করে দেওয়া যায়, border অ্যাট্রিবিউট যোগ করে।
<table border="1">
কিন্তু এভাবে বর্ডার ব্যবহার করলে প্রতিটি সেল বা ঘরের আশেপাশে দুটি করে বর্ডার দেখা যাবে।
<!DOCTYPE html> <html> <head> <title>HTML Table Example</title> </head> <body> <table border="1"> <thead> <tr> <th>Serial</th> <th>Subject</th> <th>GPA</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>Bangla</td> <td>5.00</td> </tr> <tr> <td>02</td> <td>English</td> <td>5.00</td> </tr> <tr> <td>03</td> <td>Science</td> <td>5.00</td> </tr> <tr> <td>04</td> <td>Math</td> <td>5.00</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>CGPA</td> <td>5.00</td> </tr> <tfoot> </table> </body> </html>
এটি দূর করতে চাইলে ঘরগুলো ফাঁকা ফাঁকা না রেখে একটির সঙ্গে অন্যটি একেবারে লাগিয়ে রাখতে হবে। এজন্য, ব্যবহার করতে হবে cellspacing অ্যাট্রিবিউট এবং মান দিতে হবে 0। এর মান যত দেওয়া হবে, টেবিলের সেলগুলো একে অপরের থেকে তত পিক্সেল দূরে হবে।
<table border="1" cellspacing="0">
টেবিলের সেলগুলোতে অবস্থিত লেখা সেল থেকে একটি নির্দিষ্ট দূরত্বে থাকে। প্রয়োজনবোধে সেই দূরত্ব নিয়ন্ত্রণ করা যাবে। এজন্য ব্যবহার করতে হবে cellpadding অ্যাট্রিবিউট।
<table border="1" cellpadding="20">
উপরের টেবিলটিতে বর্ডার দেওয়ার পর এর ফুটারে যে একটি ফাঁকা ঘর আছে তা ভালোভাবে বোঝা যাচ্ছে।
এখন এইচটিএমএল দিয়ে টেবিল তৈরির আরেকটি উদাহরণ দেখানো হবে।
<!DOCTYPE html> <html> <head> <title>HTML Table Example</title> </head> <body> <table border="1" cellspacing="0" cellpadding="2"> <caption>Bill Summery</caption> <thead> <!-- The first th element will span two rows. Second th Element will span three columns. --> <tr> <th rowspan="2">Month</th><th colspan="3">Bills</th> </tr> <tr><th>Electricity</th><th>Water</th><th>Gas</th></tr> <!-- On the second row, the first th element will go to Second column. Because second row of first column is spanned by first row. --> </thead> <tbody> <tr> <td>January</td><td>513</td><td>53</td><td>217</td> </tr> <tr> <td>February</td><td>522</td><td>59</td><td>202</td> </tr> <tr> <td>March</td><td>578</td><td>62</td><td>224</td> </tr> <tbody> </table> </body> </html>
উপরের টেবিলে লক্ষণীয় বিষয়গুলো হচ্ছে:
- টেবিলের উপরে একটি ক্যাপশন রয়েছে।
- Month সেলটি দুটি রো জুড়ে রয়েছে।
- Bills সেলটি তিনটি কলাম জুড়ে রয়েছে।
- বাকি সেলগুলো সাধারণভাবে রয়েছে।
টেবিলের ক্যাপশন দিতে caption নামে একটি এলিমেন্ট ব্যবহার করতে হবে। কয়েকটি রো জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় rowspan অ্যাট্রিবিউট, আর কয়েকটি কলাম জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় colspan অ্যাট্রিবিউট। ছবির টেবিলটির এইচটিএমএল কোড নিচে দেওয়া হলো।
<!DOCTYPE html> <html> <head> <title>HTML Table Example</title> </head> <body> <table border="1" cellspacing="0" cellpadding="2"> <caption>Bill Summery</caption> <thead> <!-- The first th element will span two rows. Second th Element will span three columns. --> <tr> <th rowspan="2">Month</th><th colspan="3">Bills</th> </tr> <tr><th>Electricity</th><th>Water</th><th>Gas</th></tr> <!-- On the second row, the first th element will go to Second column. Because second row of first column is spanned by first row. --> </thead> <tbody> <tr> <td>January</td><td>513</td><td>53</td><td>217</td> </tr> <tr> <td>February</td><td>522</td><td>59</td><td>202</td> </tr> <tr> <td>March</td><td>578</td><td>62</td><td>224</td> </tr> <tbody> </table> </body> </html>
উপরের কোডে দুই জায়গায় <!– ও –> চিহ্নের মধ্যে কিছু কথা লেখা হয়েছে। সেখানে বলা হয়েছে যে কোডের thead অংশের কাজ কী। একে বলা হয় কমেন্ট (comment)। ব্রাউজারে যখন ডকুমেন্টটি প্রদর্শিত হবে তখন এই কমেন্ট করা অংশটুকু দেখা যাবে না। ডেভেলপাররা নিজেদের সুবিধার জন্য কমেন্ট করে থাকেন। একজনের লেখা কোড যখন অন্যজন পড়েন, তখন এই কমেন্ট দেখে তিনি সহজেই বুঝতে পারেন কোডের কোন অংশের কাজ কী এবং উদ্দেশ্য কী।
টেবিলের কোনো সেলে হাইপারলিংক যোগ করার প্রয়োজন হলে সাধারণ নিয়মে td বা th এলিমেন্টের ভেতরে a এলিমেন্ট বসাতে হবে। একইভাবে টেবিলের সেলে ছবিও যোগ করা যায়। তবে ছবির ক্ষেত্রে তার আকার নিয়ন্ত্রণ করা খুব গুরুত্বপূর্ণ, না হলে টেবিলটি দেখতে দৃষ্টিনন্দন হবে না।
<td><a href="https://www.google.com">Google</a></td>