বিশ্বের সবচেয়ে বড় বাংলা ওয়েব ডেভেলোপার সাইট
HTML টেবিল ডেটা সুন্দরভাবে সাজিয়ে উপস্থাপন করার জন্য ব্যবহার করা হয়। কখনও কখনও আমাদের প্রয়োজন হয় একাধিক কলাম বা রো (সারি) জুড়ে একটি মাত্র সেল তৈরি করার। এই কাজটি করার জন্য আমরা colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করি। এই টিউটোরিয়ালে আমরা এগুলো কিভাবে ব্যবহার করতে হয় তা শিখব।
| NAME | ||
|---|---|---|
| APRIL | ||
|---|---|---|
| 2022 | ||
|---|---|---|
| FIESTA | ||
colspan অ্যাট্রিবিউট ব্যবহার করে আপনি একটি সেলকে একাধিক কলামের জায়গা জুড়ে বিস্তৃত করতে পারেন। অর্থাৎ, এটি অনুভূমিকভাবে (horizontally) সেলগুলিকে একত্রিত করে।
আপনি <th> (টেবিল হেডার) অথবা <td> (টেবিল ডেটা) ট্যাগের মধ্যে colspan অ্যাট্রিবিউট ব্যবহার করতে পারেন।
colspan="n" যেখানে "n" হলো কলামের সংখ্যা যা সেলটি জুড়ে থাকবে। উদাহরণস্বরূপ, colspan="2" মানে সেলটি দুটি কলামের জায়গা জুড়ে থাকবে।
উপরের উদাহরণে, <th> ট্যাগের মধ্যে colspan="2" ব্যবহার করা হয়েছে। এর ফলে "ব্যক্তিগত তথ্য" লেখাটি দুটি কলামের জায়গা জুড়ে প্রদর্শিত হচ্ছে। প্রথম সারিটি এখন কেবল একটি হেডার সেল দিয়ে গঠিত যা নিচের দুটি ডেটা কলাম ("নাম" এবং "বয়স" কলাম) এর উপর বিস্তৃত। এর মাধ্যমে একটি সাধারণ শিরোনাম দুটি কলামের ডেটাকে কভার করতে পারে।
rowspan অ্যাট্রিবিউট ব্যবহার করে আপনি একটি সেলকে একাধিক রো (সারি) এর জায়গা জুড়ে বিস্তৃত করতে পারেন। অর্থাৎ, এটি উল্লম্বভাবে (vertically) সেলগুলিকে একত্রিত করে।
আপনি <th> অথবা <td> ট্যাগের মধ্যে rowspan অ্যাট্রিবিউট ব্যবহার করতে পারেন।
rowspan="n" যেখানে "n" হলো রো-এর সংখ্যা যা সেলটি জুড়ে থাকবে। উদাহরণস্বরূপ, rowspan="2" মানে সেলটি দুটি রো-এর জায়গা জুড়ে থাকবে।
উপরের উদাহরণে, "আহমেদ" নামটি দুটি রো (সারি) জুড়ে প্রদর্শিত হচ্ছে কারণ <td> ট্যাগের মধ্যে rowspan="2" ব্যবহার করা হয়েছে। লক্ষ্য করুন যে দ্বিতীয় <tr> ট্যাগের মধ্যে কেবল একটি <td> (ফোন নম্বর) আছে, কারণ প্রথম <tr> এর "আহমেদ" সেলটি ইতিমধ্যেই সেই রো-এর প্রথম কলামের জায়গা দখল করে আছে। এটি একই ব্যক্তির একাধিক ফোন নম্বর বা অনুরূপ ডেটা প্রদর্শনের জন্য কার্যকর।
আপনি একটি টেবিলে প্রয়োজন অনুযায়ী colspan এবং rowspan উভয়ই একসাথে ব্যবহার করতে পারেন। এটি আপনাকে আরও জটিল এবং কাস্টমাইজড টেবিল লেআউট তৈরি করতে সাহায্য করবে।
এই উদাহরণে, প্রথম <th> ট্যাগে colspan="3" ব্যবহার করা হয়েছে "শিক্ষার্থীদের তথ্য" হেডারকে তিনটি কলাম জুড়ে বিস্তৃত করার জন্য।
অন্যদিকে, "আহমেদ" এবং "ফাতেমা" নামের <td> ট্যাগে rowspan="2" ব্যবহার করা হয়েছে তাদের নাম দুটি রো জুড়ে প্রদর্শিত করার জন্য, যেখানে প্রতিটি রো-এর জন্য আলাদা আলাদা বিষয় এবং নম্বর দেখানো হয়েছে। এটি একটি কার্যকর পদ্ধতি যখন একজন ব্যক্তির একাধিক এন্ট্রি থাকে যা একই ব্যক্তির অধীনে গোষ্ঠীবদ্ধ করা প্রয়োজন।
colspan এবং rowspan অ্যাট্রিবিউট HTML টেবিলে সেলগুলিকে অনুভূমিকভাবে বা উল্লম্বভাবে একত্রিত করার জন্য খুব শক্তিশালী টুল।
colspan: একটি সেলকে একাধিক কলাম জুড়ে বিস্তৃত করে (অনুভূমিক)।rowspan: একটি সেলকে একাধিক রো জুড়ে বিস্তৃত করে (উল্লম্ব)।এই অ্যাট্রিবিউটগুলো ব্যবহার করে আপনি আরও নমনীয় এবং তথ্যবহুল টেবিল ডিজাইন করতে পারবেন যা ডেটাকে আরও কার্যকরভাবে উপস্থাপন করে।