পূর্বের টিউটোরিয়ালে আমরা এইচটিএমএল লিষ্ট সম্পর্কে জেনেছিলাম। লিষ্ট আর টেবিলের মধ্য একপ্রকার স্বাদৃশ্য আছে। অনেক গুলো আইটেমকে সারিবদ্ধ ভাবে রাখার জন্য যেমন লিষ্ট ব্যবহার হয় তেমনি অনেকগুলো ডাটাকে সারিবদ্ধ ভাবে রাখার জন্য টেবিল ব্যবহার হয়। যেমন টিভিতে ক্রিকেট খেলার স্কোর বোর্ড আমরা দেখি। এই স্কোর বোর্ড একটি টেবিল আকারে সাজানো হয়। বিভিন্ন অফিস সহ বড় বড় মিল ফেক্টরী বা গার্মেন্টস ইত্যাদীর যাবতীয় হিসাব নিকাশ। কর্মচারীর নাম ঠিকানা, বেতন, আমদানী রফতানী ইত্যাদী সব কিছুই একটি টেবিল আকারে সাজানো হয়। ওয়েবসাইট বলেন কিংবা অফিস আদালত সবখানেই এই টেবিল খুবই গুরত্বপূর্ণ।
মনে করুন বাংলাদেশে প্রায় দশ কোটি মানুষের আইডি কার্ড আছে। একটি আইডি কার্ডের নাম্বার দিয়ে আপনাকে বলা হল দশ কোটি আইডির ভিতর থেকে এই আইডিটা বিস্তারিত ডিটাইলস সহ বাহির করুন তাও মাত্র পাঁচ মিনিটে। আমার মত যারা জানে না ওরাতো বলবে পাঁচ মিনিট কেন পাঁচ দিনেও খুঁজে বাহির করা প্রায় অসম্ভব। কিন্তু যারা এইচটিএমএল টেবিল এবং পিএইচপি এসকিউএল নিয়ে কাজ করেছেন ওরা বলবে পাঁচ মিনিট তো অনেক সময় পাঁচ সেকেন্টেই সম্ভব। যাক, এইচটিএমএল টেবিলের জন্য যে ট্যাগ গুলো ব্যবহার হয় তা একটি টেবিল আকারে সঙ্কিপ্ত বিবরণ সহ দিলাম। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়ালটি দেখুন।

<col> ট্যাগ দিয়ে একটি টেবিলের কলাম প্রপার্টি সেট করা হয়। কলাম হচ্ছে যেখানে টেবিলের আলাদা আলাদা হেডিং এবং ডাটা রাখা হয়। এই ট্যাগের সাথে কিছু এট্রিবিউট ব্যবহার করে টেবিলের নির্দিষ্ট কোন কলামকে ইচ্ছে মত ষ্টাইল করা যায়। যদি আপনার টেবিলে চারটা কলাম থাকে আর আপনি দুইটি কলামের ব্যাকগ্রাউন্ডে রঙ দিতে চান অথবা অন্য কোন ষ্টাইল করতে চান তাহলে এই <col> ট্যাগ ব্যবহার করে অতি সহজে করতে পারেন। এখানে টেবিলে নাম, জর্ম্ম তারিখ, শ্রেনী এবং রোল নং মোট চারটি কলাম আছে। আমি চাচ্ছি প্রথম দু'টি কলামকে হাল্কা আসমানী রঙ এবং প্রস্থ কিছুটা বাড়িয়ে দেব। এবং সব শেষের রোল নং কলামটিকে হলুদ করব। কিন্তু শ্রেনী কলামটিকে কিছুই করব না। উদাহরণ নিম্নরূপ...

<colgroup> এলিমেন্ট একটি টেবিলের মধ্যে কলামের একটি গ্রুপের বৈশিষ্ট্য উল্লেখ করে। <colgroup> এলিমেন্ট যেখান থেকে শুরু হয় এর পরের ভার্টকালী অর্থাৎ উপর থেকে নিচের সকল কলামের উপর এর কাজ চলে। এভাবে পাশাপাশি যত কলাম থাকবে ততবার <colgroup> ব্যবহার করে ষ্টাইল করতে পারেন। অর্থাৎ এই ট্যাগের মাধ্যমে একাধিক কলামের প্রস্থ বা ব্যাকগ্রাউন্ড রঙ একসাথে করা যায়। উদাহরণ নিম্নরুপ...

টেবিলে <thead> ট্যাগের ব্যবহার মুলত টেবিলের হেডিং দেবার জন্য ব্যবহার হয়। যাতে সাধারণত <th> এলিমেন্ট ব্যবহ্নত হয়। তবে <thead> ট্যাগের মাধ্যমে ষ্টাইলিশ করার জন্য বিশেষ কিছু সুবিধা পাওয়া যায়। তাছাড়া একটি টেবিল তখনই সম্পূর্ণ হয় যখন সেখানে টেবিল হেডার ফুটার এবং বডি এলিমেন্ট সমুহ উপস্থিত থাকে।

<tbody> বলতে টেবিলের বডিকেই বুঝানো হয়। <thead> ট্যাগের মত এই ট্যাগের মাধ্যমে অতিরিক্ত কিছু সুবিদা পাওয়া যায়। এছাড়া একটা বড় সাইজের টেবিল কোথা থেকে হেডিং শুরু আর শেষ হল এবং কোথা থেকে বডি শুরু আর শেষ হল সহজে বুঝা যায়।

<tfoot> এলিমেন্ট দ্বারা টেবিলের ফুটার বুঝানো হয়। <tfoot> এলিমেন্ট <thead> এবং <tbody> এলিমেন্টের মতই অতিরিক্ত কিছু সুবিদা দিয়ে থাকে। এই এলিমেন্ট গুলোর কারণে ব্রাউজার একটি টেবিলের হেডার ফুটার এবং বডিকে সহজে ক্যাচ করে নিতে পারে। উদাহরণ স্বরূপ কোড লিখার সময় আমি যদি ভুল করে <tfoot> কে <tbody> ট্যাগের আগে লিখে ফেলি কিন্ত ব্রাউজার সেটাকে আগে আউটপুট দেবে না। বরং <tfoot> বলতে যেহেতু টেবিলের ফুটার বুঝানো হয় তাই ফুটারের কন্টেন্টকে ফুটারের যথাস্থানেই উপাস্থাপন করা হয়। অর্থাৎ আগেতপরে যেখানে কোড লিখা হোক আউটপুট ঠিক নিচেই প্রদর্শিত হবে। উদাহরণ নিম্নরুপ...

colspan এট্রিবিউট টেবিলের একাধিক ডাটার কলামকে এক করে দেয়। আমি যেহেতু প্রথম থেকেই বিদ্যালয়ের ছাত্র ছাত্রীদের টেবিল করে আসছি। তাহলে সেই একই উদাহরণটা নিয়েই এগুতে চাই। মনে করুন, আপনি একটি প্রাথমীক বিদ্যালয়ের ছাত্র ছাত্রীদের নাম, বয়স, ঠিকানা এবং রোল নং নিয়ে একটি টেবিল বানাচ্ছেন। কিন্তু আপনি চাচ্ছেন টেবিল একটাই হবে তবে শ্রেনীগুলো ভাগ করে যথাক্রমে সাজানো হবে। প্রথম শ্রেনী শেষ হয়ে দ্বিতীয় শ্রেনী শুরু করার আগের কলামটিকে আপনি সম্পূর্ণ এক করে সেখানে এমন কোন টেক্সট দিতে চান যা দেখে যে কেউ বুঝতে পারেন দ্বিতীয় শ্রেনী এখান থেকে শুরু হয়েছে। colspan এট্রিবিউট দিয়ে এটা আপনি খুব সহজে করে নিতে পারেন। কলাম যদি চারটি থাকে সম্পুর্ণ চারটি কলামকে এক করতে colspan="4" দিবেন। উদাহরণ নিম্নরূপ...

উপরের উদাহরণে পাশাপাশি অর্থাৎ একাধিক কলামকে কিভাবে এক করতে হয় তা জানলাম। rowspan এট্রিবিউট ব্যবহার করে উপর নিচে অর্থাৎ টেবিলের একাধিক রো'কে এক করা হয়। মনে করি, একটি শ্রেনী একাধিক গ্রোপে ভাগ হয়। A গ্রুপ, B গ্রুপ, C গ্রুপ ইত্যাদী। তো আপনি চাচ্ছেন টেবিলটাকে গ্রুপ হিসেবে সাজাবেন। এখন সমস্যা হচ্ছে প্রত্যেক কলামে বারবার গ্রুপটাকে লিখতে হয়। এমন অবস্তায় rowspan এট্রিবিউটের ব্যবহার করে মাত্র একবার গ্রুপ দিলে সমাধান হয়ে যায়। উদাহরণ স্বরুপ যদি A গ্রুপে ৫০ জন ছাত্র ছাত্রী থাকে তাহলে সেই ৫০ জনের কলাম গুলো সাজানোর সময় প্রথম <tr> ট্যাগের ব্লকের ভিতর একটি <td> বাড়িয়ে সেটার সঙ্গে rowspan="51" লাগিয়ে দিয়ে শুধুমাত্র একবার A গ্রুপ লিখে দিলে হয়ে যাবে। ৫০টি রো'কে এক করে নেওয়া যাবে। 51 কারণ টেবিলের হেডিং ও একটি রো'এর ভিতরে আসে ৫০ জন ছাত্র ছাত্রীর জন্য ৫০টি রো এবং টেবিল হেডিং এর একটি মোট ৫১টি রো। উদাহরণ টেবিলে সর্বমোট রো আছে চারটি। সুতারাং আমি rowspan="4" দেব। উদাহরণ নিম্নরুপ...