যেভাবে ওয়েব পেইজে table ডিজাইন করবেন!

ব্লগে table কপি পেস্ট করতে গেলে অনেক সময় table জায়গামতো থাকে না অথবা Cellগুলো ভেঙ্গে আলাদা হয়ে যায়। এ সমস্যা থেকে উত্তরণের জন্য html View এ নিন্মরূপ coding করতে পারেন...

ওয়েবপেজ ডিজাইন করতে একটি নির্দিষ্ট ভাষার প্রয়োজন হয়। এই ভাষাকে বলা হয় hypertext markup language বলে যাকে সংক্ষেপে html লিখে প্রকাশ করা হয়। Tim Berners-Lee এই ভাষা উদ্ভাবন করেন। ভাষাটি খুবই সরল প্রকৃতির এবং case sensitive নয়। ডিজাইনকৃত ওয়েবপেইজে যে নির্দেশনা বা instruction গুলো code করা হয়ে থাকে তাকে tags বলে। tags গঠন করা হয় দুইটি angle bracket এবং একটি নামের সমন্বয়ে। যেমন- টেবিল তৈরির নির্দেশনা সম্বলিত tag হলো <table> এবং এখানে একটি left angle bracket, একটি right angle bracket এবং দুই ব্রাকেট এর মাঝখানে table শব্দটি বসানো হয়েছে। starting tag এবং ending tag নামে দুই ধরনের tag হয়। যেমন- table এর জন্য starting tag এরকম <table> এবং ending tag এরকম </table> হয়ে থাকে।

যখন starting tag এবং ending tag জোড়বদ্ধ থাকে তখন তাকে container tags বলে। আর যখন ending tag থাকে না, শুধুমাত্র starting tag থাকে তখন তাকে empty tag বলে।

ওয়েবপেইজে table ডিজাইন করতে হলে container tags  এর প্রয়োজন হয়। তাহলে table এর জন্য html instruction হিসেবে <table></table> লেখা যায়।

কিন্তু table টির size, border, background, color ইত্যাদি নির্দিস্ট করে দেওয়া প্রয়োজন। এই বিষয়গুলোর নির্দেশনা starting tag এর right angle bracket এর আগে একটি করে empty space দিয়ে লিখতে হয়। starting tag এর ভিতরে যে বিষয়গুলোর নির্দেশনা কোড করা হয় তাকে attribute বলে। এখানে align=center বলতে tableটি পেইজের কোথায় থেকে শুরু হবে সেই নির্দেশনা। এই নির্দেশনা অনুযায়ী table পেইজের মাঝখানে শুরু হবে। cell space=80px বলতে table এর প্রতিটি cell এর স্পেস হবে 80px এর সমান। border=1px বলতে cell এর বর্ডার 1px পূরুত্বের হবে। cell padding =3px বলতে cell এর ভিতরে কিছু লিখলে ডানে ও বামে 3px পরিমান ফাঁকা রেখে লেখা হবে। border color=”red” বলতে cell এর বর্ডার লাল রং এর হবে। width=40% বলতে cell space এর 40% হবে তার প্রস্থ। তাহলে attribute সহ table tag দাড়ালো নিম্নরূপ: <table align=center cell space=80px border=1px cell padding=3px border color=red width=40% ></table>

table এর কয়টি row থাকবে এবং rowগুলোতে কি লেখা থাকবে তার সম্পূর্ণ নির্দেশনা দিতে হবে। এই নির্দেশনাগুলো লিখতে হবে starting tag এবং ending tag এর মাঝামাঝি স্থানে। table row এর প্রথমে থাকে table head এবং তার পর থেকে নিচের সকল row কে table data বলে। ধরি table row এর প্রথমে দুইটি table head থাকবে। একটির নাম Year এবং অপরটির নাম Number বা সংখ্যা। তাহলে এর জন্য কোডিং হবে: <tr><th>Year</th><th>Number</th></tr>

এখানে <tr></tr> container tag দ্বারা কোড করে এর অভ্যন্তরে আরো দুইটি <th></th> container tag দ্বারা কোড করা হয়েছে। এখানে Year এবং Number শব্দদুইটি আলাদা দুইটি container tag এর ভিতরে লেখা হয়েছে। এই দুইটি হলো table  এর প্রতিটি row এর শিরোনাম।

এর নিচে ক্রমান্বয়ে <tr></tr> নামক container tag এর অভ্যন্তরে table data নামক <td></td> container tag দ্বারা কোড করা হয়েছে। এবং অভ্যন্তরে data দেওয়া হয়েছে 2018 এবং 20.

একই ভাবে 2019, 14 এবং 2020, 10.

একটি কাব ইউনিটের বিগত তিন বছরে নতুন ভর্তিকৃত কাবদের তথ্য সন্নিবেশিত করা হয়েছে। tableটির একটি শিরোনাম দিতে চাইলে <tr></tr> container tag এর পূর্বেই <caption></caption> container tags ব্যবহার করে উক্ত tags এর অভ্যন্তরে শিরোনাম লিখতে পারেন। যেমন: <caption>সাল অনুসারে নতুন কাব তথ্য</caption>

সাল অনুসারে নতুন কাব তথ্য

Year	Number
2018	20
2019	14
2020	10