বিশ্বের সবচেয়ে বড় বাংলা ওয়েব ডেভেলোপার সাইট
HTML টেবিল ডেটা সুন্দরভাবে সাজানোর জন্য প্যাডিং এবং স্পেসিং অত্যন্ত গুরুত্বপূর্ণ। এই টিউটোরিয়ালে আমরা শিখব কিভাবে HTML টেবিলে সেল প্যাডিং (cellpadding) এবং সেল স্পেসিং (cellspacing) ব্যবহার করে টেবিলের চেহারা আরও আকর্ষণীয় করে তোলা যায়।
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |
সেল প্যাডিং হল একটি টেবিল সেলের কন্টেন্ট (লেখা বা ছবি) এবং সেলের বর্ডারের মধ্যবর্তী স্থান। এটি সেলের ভেতরের কন্টেন্টকে বর্ডার থেকে দূরে সরিয়ে দেয়, ফলে কন্টেন্ট আরও সহজে পড়া যায় এবং টেবিলটি দেখতে আরও সুসংগঠিত লাগে।
HTML-এ <table> ট্যাগের cellpadding অ্যাট্রিবিউট ব্যবহার করে সেল প্যাডিং সেট করা হয়। এর মান পিক্সেল (pixel) এ দিতে হয়।
উদাহরণস্বরূপ, যদি আপনি cellpadding="10" সেট করেন, তাহলে প্রতিটি সেলের কন্টেন্টের চারপাশে 10 পিক্সেল প্যাডিং যোগ হবে।
উপরের উদাহরণে, আমরা <table> ট্যাগে cellpadding="10" ব্যবহার করেছি। এর ফলে টেবিলের প্রতিটি <th> এবং <td> সেলের কন্টেন্টের চারপাশে 10 পিক্সেল প্যাডিং যুক্ত হয়েছে, যা কন্টেন্টকে বর্ডার থেকে দূরে সরিয়ে আরও স্পষ্ট করে তুলেছে।
সেল স্পেসিং হল টেবিলের দুটি সেলের বর্ডারের মধ্যবর্তী স্থান। এটি দুটি পৃথক সেলের মধ্যে ফাঁকা স্থান তৈরি করে।
HTML-এ <table> ট্যাগের cellspacing অ্যাট্রিবিউট ব্যবহার করে সেল স্পেসিং সেট করা হয়। এর মানও পিক্সেল (pixel) এ দিতে হয়।
উদাহরণস্বরূপ, যদি আপনি cellspacing="5" সেট করেন, তাহলে প্রতিটি সেলের চারপাশে 5 পিক্সেল ফাঁকা স্থান তৈরি হবে।
উপরের উদাহরণে, আমরা <table> ট্যাগে cellspacing="5" ব্যবহার করেছি। এর ফলে টেবিলের প্রতিটি সেলের বর্ডারের মাঝে 5 পিক্সেল ফাঁকা স্থান তৈরি হয়েছে। লক্ষ্য করুন, border-collapse: separate; স্টাইলটি ব্যবহার করা হয়েছে কারণ cellspacing অ্যাট্রিবিউট border-collapse: collapse; থাকলে কাজ করে না।
আপনি cellpadding এবং cellspacing অ্যাট্রিবিউট দুটি একই টেবিলে একসাথে ব্যবহার করতে পারেন।
এই উদাহরণে, cellpadding="10" প্রতিটি সেলের কন্টেন্টের চারপাশে 10 পিক্সেল প্যাডিং যোগ করেছে এবং cellspacing="7" প্রতিটি সেলের বর্ডারের মাঝে 7 পিক্সেল ফাঁকা স্থান তৈরি করেছে, যা টেবিলটিকে আরও সংগঠিত এবং পঠনযোগ্য করে তুলেছে।
মনে রাখা ভালো যে HTML5-এ cellpadding এবং cellspacing অ্যাট্রিবিউটগুলো অপ্রচলিত (deprecated) ঘোষণা করা হয়েছে। আধুনিক ওয়েব ডিজাইনে, টেবিল প্যাডিং এবং স্পেসিং নিয়ন্ত্রণের জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়, যা আরও বেশি নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে।
সেলের ভেতরের প্যাডিং সেট করার জন্য <th> এবং <td> এলিমেন্টগুলোতে padding প্রপার্টি ব্যবহার করা হয়।
সেলের মধ্যবর্তী স্থান (স্পেসিং) সেট করার জন্য <table> এলিমেন্টে border-spacing প্রপার্টি ব্যবহার করা হয়। তবে, এটি কাজ করার জন্য border-collapse প্রপার্টির মান separate হতে হবে।
এই উদাহরণে, আমরা cellpadding এবং cellspacing অ্যাট্রিবিউটের পরিবর্তে CSS ব্যবহার করেছি:
th, td { padding: 10px; } দিয়ে প্রতিটি সেলের কন্টেন্টের চারপাশে 10 পিক্সেল প্যাডিং যোগ করা হয়েছে।table { border-spacing: 7px; } দিয়ে সেলের বর্ডারের মাঝে 7 পিক্সেল ফাঁকা স্থান তৈরি করা হয়েছে।table { border-collapse: separate; } নিশ্চিত করে যে border-spacing প্রপার্টি সঠিকভাবে কাজ করে।এই পদ্ধতিটি আধুনিক এবং ওয়েব ডিজাইন প্র্যাকটিসের জন্য সুপারিশ করা হয়।