HTML টেবিল হল সারি এবং কলামে উপস্থাপিত ডেটার সেট। HTML টেবিল बनाने के लिए <table> এলিমেন্ট ব্যবহার করুন। সারি তৈরি করতে <tr>, কলাম তৈরি করতে <td>, এবং টেবিল হেডার তৈরি করতে <th> ব্যবহার করুন।
টেবিল সারি এবং কলাম ব্যবহার করে ডেটাকে সহজে বোঝার যোগ্য উপায়ে উপস্থাপন করতে ব্যবহৃত হয়। আমরা প্রতিদিন টেবিল দেখি, বাসের টাইমটেবিল থেকে যা যাত্রীদের বলে বাস কবে আসবে, থেকে আমরা যেন খাবারের তালিকায় উপাদানগুলো।
HTML-এ, টেবিল ডেটা উপস্থাপনের একটি পদ্ধতি হিসেবে ব্যবহৃত হয়। এই টিউটোরিয়ালে, উদাহরণসহ, HTML টেবিলের বেসিক, একাধিক কলাম এবং সারি জুড়ে ছড়িয়ে থাকা সেল, এবং টেবিল স্টাইল করার পদ্ধতি আলোচনা করা হবে। এই টিউটোরিয়াল শেষে, আপনি HTML-এ টেবিল তৈরি এবং কাজ করার এক্সপার্ট হবেন।
HTML টেবিল তৈরি করা
টেবিল হল সারি এবং কলামে উপস্থাপিত ডেটার সেট। টেবিল ব্যবহার করে একটি ডেটাসেটের মানগুলোর মধ্যে সম্পর্ক সহজে দেখা যায়।
HTML-এ, টেবিল <table> এলিমেন্ট ব্যবহার করে ডিফাইন করা হয়। <table> এলিমেন্টের ভিতরে আপনি ব্যবহার করতে পারেন:
<tr>সারি তৈরি করতে<td>কলাম তৈরি করতে<th>টেবিল হেডার তৈরি করতে।
মান लीজিয়ে আমরা একটি কফি শপে বিক্রয় হওয়া কফি এবং তাদের দামের একটি টেবিল তৈরি করতে চাই। এই টেবিলে দুটি কলাম থাকবে: কফি এবং দাম, এবং তিনটি সারি। আমরা নিচের কোড ব্যবহার করে এই টেবিল HTML-এ ডিফাইন করতে পারি:
<table> <tr> <th>Coffee</th> <th>Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </table>
আমাদের টেবিলের ফলাফল:
এই উদাহরণে, আমরা একটি হেডার সারি, দুটি কলাম, এবং তিনটি টেবিল ডেটা সারি সহ একটি টেবিল তৈরি করেছি। চলুন আমাদের কোড ভাঙন করি।
প্রথমে, আমরা <table> HTML ট্যাগ ব্যবহার করে ওয়েব পেজকে টেবিল তৈরি করার নির্দেশ দিয়েছি। তারপর আমরা একটি <tr> ট্যাগ ব্যবহার করে একটি সারি তৈরি করেছি, এবং <th> ট্যাগ ব্যবহার করে আমাদের টেবিলের কলাম হেডার ডিফাইন করেছি। এই কেসে, আমাদের কলাম হেডার হল Coffee এবং Price।
পরে, আমরা তিনটি আরও <tr> ট্যাগ ব্যবহার করে তিনটি টেবিল সারি তৈরি করেছি যেগুলো টেবিলের ডেটা সেলে আমাদের কফির নাম এবং দাম দেখাচ্ছে। এই <tr> ট্যাগগুলোর প্রতিটিতে একটি <td> ট্যাগ থাকে, যা টেবিলে একটি কলাম সেল উপস্থাপন করে। উদাহরণস্বরূপ, td এলিমেন্ট আমাদের প্রথম কফি এন্ট্রিতে Espresso এবং $2.00 উপস্থাপন করতে ব্যবহৃত হয়েছে।
টেবিল স্টাইলিং
HTML-এ একটি টেবিল স্টাইল করার অনেক উপায় রয়েছে।
বর্ডার
HTML-এ, টেবিল ডিফল্টভাবে কোনো বর্ডার নেই। এর মানে যদি আমরা টেবিলে বর্ডার দেখাতে চাই, তবে CSS ব্যবহার করতে হবে। CSS border প্রোপার্টি HTML টেবিলে বর্ডার যোগ করতে ব্যবহৃত হয়।
মান লিনये আমরা আমাদের আগের টেবিলের চারপাশে একটি সলিড ব্ল্যাক বর্ডার যোগ করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
table, th, td { border: 1px solid black; }
যখন আমরা এই স্টাইল আমাদের টেবিল কোডে ব্যবহার করি, আমাদের টেবিল এর প্রতিটি সেল এবং টেবিলটির চারপাশে বর্ডার সহ পরিবর্তিত হয়। এখানে আমাদের সংশোধিত টেবিল:
এখন আমাদের টেবিলে বর্ডার আছে, যা আমাদের টেবিলের ডেটা পড়াকে সহজ করে তোলে। যাইহোক, উপরের স্টাইল প্রতিটি সেলের চারপাশে বর্ডার দেয় এবং প্রতিটি বর্ডার আলাদা করে। যদি আমরা প্রতিটি বর্ডারকে একে মিলিয়ে একটি করতে চাই, তবে border-collapse প্রোপার্টি ব্যবহার করতে পারি। এখানে সেট করার কোড:
table { border-collapse: collapse }
আমাদের নতুন টেবিল নিচের মতো দেখে:
আপনি দেখতে পাচ্ছেন, আমাদের টেবিলে এখন প্রতিটি সেল এবং টেবিলের আলাদা বর্ডার না থাকায় একটি একক বর্ডার আছে।
হেডার এলাইন করা
ডিফল্টভাবে, হেডার একটি সেলের মাঝপথে এলাইন থাকে। যদি আপনি হেডারকে সেলের বাম বা ডানে এলাইন করতে চান, তবে <th> ট্যাগে text-align প্রোপার্টি নির্দিষ্ট করতে পারেন (মনে রাখবেন, <th> ট্যাগ হেডার নির্দিষ্ট করতে ব্যবহৃত হয়)।
এখানে কোডটি:
th { text-align: left; }
যদি আমরা এই স্টাইল উপরের টেবিলে প্রয়োগ করি, তবে নিচের টেবিল তৈরি হবে:
উপরের টেবিলে কলাম হেডারগুলো বাম পাশে এলাইন করা হয়েছে।
HTML টেবিলে আরো অনেক স্টাইল প্রয়োগ করা যায়, কিন্তু এই টিউটোরিয়ালের জন্য আমরা টেবিল বর্ডার এবং কল্যাপসড বর্ডার ওপর ফোকাস করেছি। এগেও আমরা এই অংশে ডিফাইন করা স্টাইলগুলো ব্যবহার করব আমাদের ডেটা পড়ার সুবিধার্থে।
একাধিক সারি এবং কলাম জুড়ে ছড়ানো
টেবিলের সাথে কাজ করার সময়, আপনি চাইতে পারেন একটি সেল একাধিক সারি বা কলাম জুড়ে ছড়িয়ে থাকুক।
উদাহরণস্বরূপ, ধরা যাক আমরা আগের প্রাইস কলামকে দুটি কলাম জুড়ে ছড়াতে চাই। সেখানে colspan এবং rowspan অ্যাট্রিবিউট কাজে আসে। rowspan টেবিলে একাধিক সারি জুড়ে ছড়াতে ব্যবহৃত হয়, এবং colspan একাধিক কলাম জুড়ে ছড়াতে।
এখানে colspan ব্যবহার করে Price কলামকে দুটি কলাম জুড়ে ছড়ানো একটি টেবিলের উদাহরণ:
<table> <tr> <th>Coffee</th> <th colspan="2">Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00 (new)</td> <td>$2.00 (old)</td> </tr> </table>
আমাদের টেবিল নিচের মতো দেখে:
আপনি দেখতে পাচ্ছেন, প্রাইস কলাম এখন দুটি সারি জুড়ে ছড়িয়ে আছে। এছাড়া, আপনি একইভাবে rowspan ব্যবহার করে একটি সেল তৈরি করতে পারেন যা একাধিক সারি জুড়ে ছড়িয়ে থাকে।
ধরা যাক আপনার কাছে একটি টেবিল আছে যা মেনুতে একটি নির্দিষ্ট কফির বিবরণ সংরক্ষণ করে।
আপনি চান কফির ডিসকাউন্ট প্রাইস—যা প্রতিমাসের শেষ দিনে প্রয়োগ হয় যাতে কাস্টমাররা কফি কিনতে আগ্রহী হয়— এবং রেগুলার প্রাইস একই হেডার Price এর নিচে লেবেল সহ উপস্থিত হোক। আপনি নিচের কোড ব্যবহার করে এটি করতে পারেন:
<table> <tr> <th>Coffee</th> <td>Espresso</td> </tr> <tr> <th rowspan="2">Price</th> <td>$2.00 (regular)</td> </tr> <tr> <td>$1.80 (discounted)</td> </tr> </table>
আমাদের টেবিলের আউটপুট:
এই উদাহরণে, আপনি দেখতে পাচ্ছেন Price লেবেল দুটি সারি জুড়ে ছড়িয়ে আছে।
টেবিল হেডার, বডি, এবং ফুটার ডিফাইন করা
টেবিলের সাথে কাজ করার সময়, তিনটি ট্যাগ আছে যা আপনার ডেটা ভালোভাবে কাঠামোগত করতে সাহায্য করে।
<thead> ট্যাগ আপনার টেবিলের হেডার ডিফাইন করতে ব্যবহৃত হয়, <tbody> ট্যাগ টেবিলের কন্টেন্ট ডিফাইন করতে, এবং <tfoot> ট্যাগ টেবিলের ফুটার ডিফাইন করতে।
আমাদের প্রথম উদাহরণের টেবিল নিয়ে এটা ইলাস্ট্রেট করি। ধরা যাক আমরা একটি কফি শপে বিক্রয় হওয়া সব কফি লিস্ট করার একটি টেবিল বানাচ্ছি। আমাদের কোড পড়ার সুবিধার্থে, আমরা টেবিলের হেডার, বডি, এবং ফুটার আলাদা করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
<table> <thead> <tr> <th>Coffee</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </tbody> <tfoot> <tr> <th>Last Updated</th> <td>January 9th, 2020</td> </tr> </tfoot> </table>
এই টেবিলে, আমরা <thead>, <tbody>, এবং <tfoot> ট্যাগ ব্যবহার করে আমাদের টেবিল হেডার, বডি, এবং ফুটার যথাক্রমে ডিফাইন করেছি।
<thead> ট্যাগ আমাদের হেডার সারি আলাদা করতে ব্যবহৃত হয়েছে, যেটি Coffee এবং Price টেবিল হেডার ধারণ করে। <tbody> ট্যাগ আমাদের টেবিলের মূল ডেটা ধারণকারী সারি সংরক্ষণ করতে ব্যবহৃত হয়েছে (কফির দাম)।
<tfoot> ট্যাগ একটি সারি সংরক্ষণ করতে ব্যবহৃত হয়েছে যেটি বলে টেবিলটি কখন লাস্ট আপডেট করা হয়েছে। আমরা এই ডেটা ফুটার ট্যাগে রাখেছি কারণ এটি আমাদের কফি এবং দামের লিস্টের একটি এন্ট্রি নয়।
যদিও এই ট্যাগগুলো অপশনাল, তবে এগুলো HTML-এ একটি টেবিল ভালোভাবে কাঠামোগত করতে সাহায্য করে।
HTML-এ টেবিল ক্যাপশন
<caption> ট্যাগ আপনার টেবিলে একটি টাইটেল, যাকে ক্যাপশনও বলা হয়, যোগ করতে ব্যবহৃত হয়।
<caption> ট্যাগ আপনার টেবিলের ওপেনিং <table> ট্যাগের তुरন্ত পরেই রাখতে হয়। এখানে <caption> ট্যাগ ব্যবহার করে আমাদের কফি লিস্টে Coffee Menu হেডার যোগ করার উদাহরণ:
<table> <caption>Coffee Menu</caption> <tr> <th>Coffee</th> <th>Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </table>
আমাদের টেবিল নিচের মতো দেখে:
আমাদের কোডে, আমরা <caption> ট্যাগ ব্যবহার করে টেবিলে Coffee Menu হেডার যোগ করেছি।
উপসংহার
টেবিল আপনি চাইলে খুব সিম্পল বা খুব জটিল হতে পারে, এবং এই আর্টিকেলে HTML-এ টেবিলের বেসিক সম্পর্কে প্রায় সব কিছু কভার করা হয়েছে।
এই আর্টিকেলে আলোচনা করা হয়েছে: HTML-এ টেবিল কীভাবে তৈরি করতে হয়, টেবিলে বেসিক স্টাইল কীভাবে প্রয়োগ করতে হয়, টেবিল কীভাবে কাঠামোগত করতে হয়, কীভাবে সেল একাধিক কলাম এবং সারি জুড়ে ছড়িয়ে রাখতে হয়, এবং টেবিলের সাথে ক্যাপশন কীভাবে ব্যবহার করতে হয়।
এখন আপনার কাছে HTML-এ টেবিলের সাথে প্রোফেশনালের মতো কাজ করার জ্ঞান আছে!
