একটি এইচটিএমএল টেবিলে সারিগুলিকে প্রভাবিত না করে কলামগুলির মধ্যে কীভাবে স্থান যুক্ত করবেন?
প্যাডিং বাম এবং ডান বৈশিষ্ট্যগুলি টেবিলের সামগ্রিক বিন্যাসকে প্রভাবিত না করে কলামগুলির মধ্যে ব্যবধান যোগ করতে ব্যবহৃত হয়। এই বৈশিষ্ট্যটি বিকাশকারীদের অতিরিক্ত ব্যবধান যোগ করতে দেয় এবং এই ব্যবধানটি সারিগুলিকে প্রভাবিত করে না।
নিচের ধাপগুলো অনুসরণ করুন:
ধাপ 1: একটি টেবিল কাঠামো তৈরি করুন
ধরা যাক এইচটিএমএল ফাইলে একটি টেবিল রয়েছে যাতে চারটি সারি এবং তিনটি কলাম রয়েছে:
< টেবিল >
< tr >
< ম > নাম < / ম >
< ম > ক্লাস < / ম >
< ম > শহর < / ম >
< / tr >
< tr >
< td > জন < / td >
< td > বিএস কেম < / td >
< td > লন্ডন < / td >
< / tr >
< tr >
< td > আলেকজান্ডার < / td >
< td > বিএস গণিত < / td >
< td > টোকিও < / td >
< / tr >
< tr >
< td > জোসেফ < / td >
< td > বিএস সিএস < / td >
< td > নিউইয়র্ক < / td >
< / tr >
< / টেবিল >
উপরোক্ত কোড চালানোর পরে ওয়েবপেজ এই মত দেখায়:
আউটপুট নিশ্চিত করে যে একটি টেবিল গঠন তৈরি করা হয়েছে।
ধাপ 2: অনুভূমিক প্যাডিং প্রয়োগ করা
বাম দিক থেকে কলামগুলির মধ্যে ব্যবধান যোগ করতে, ' প্যাডিং-বাম 'সিএসএস সম্পত্তি। এই বৈশিষ্ট্যটি প্রয়োগ করার পরে, ডেটা সঠিক প্রান্তিককরণের মতো দেখায়। কারণ হল প্যাডিং শুধুমাত্র বাম দিক থেকে প্রয়োগ করা হয়।
এখন স্টাইলগুলির CSS অংশে 'td' উপাদানটি নির্বাচন করুন যা ইনলাইন পদ্ধতি ব্যবহার করে প্রয়োগ করা যেতে পারে। তারপর, 'এর প্যাডিং যোগ করুন 50px ” ব্যবধান যোগ করতে এবং আরও ভাল ভিজ্যুয়ালাইজেশনের উদ্দেশ্যে সীমানা সম্পত্তি যোগ করতে:
td {প্যাডিং-বাম: 50px;
সীমান্ত : 2px কঠিন লাল;
}
কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
আউটপুট দেখায় যে টেবিলের কলামের মধ্যে স্থান যোগ করা হয়েছে।
এখন, ডান দিক থেকে প্যাডিং সেট করতে, ' প্যাডিং-ডান 'সম্পত্তি ব্যবহার করা হয়. একই পদ্ধতিতে, কিন্তু এখন সেল ডেটা দেখায় ' বাম প্রান্তিককৃত ” কোড হল:
td {প্যাডিং-বাম: 50px;
সীমান্ত : 2px কঠিন লাল;
}
উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
আউটপুট নিশ্চিত করে যে ডানদিকে প্যাডিং প্রয়োগ করে কলামগুলির মধ্যে স্থান বৃদ্ধি করা হয়েছে।
ধাপ 3: বাম এবং ডান প্যাডিংয়ের সমন্বয়
উপরের ধাপের মতো, উভয় ক্ষেত্রেই ডেটা কেন্দ্রে সারিবদ্ধ নয় এবং এটি ডেটাটিকে অপ্রফেশনাল করে তোলে। নকশা অর্থ ভাঙ্গা ছাড়া এটি বিশিষ্ট করতে. উভয় বৈশিষ্ট্য নীচের মত একই সময়ে ব্যবহার করা যেতে পারে:
td {প্যাডিং-ডান: 60px;
প্যাডিং-বাম: 60px;
সীমান্ত : 2px কঠিন লাল;
}
উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
আউটপুট নিশ্চিত করে যে কলামগুলির মধ্যে স্থান যোগ করা হয়েছে এবং ডেটাও কেন্দ্রে সারিবদ্ধ।
উপসংহার
বাম এবং ডান বৈশিষ্ট্য প্যাডিং সাহায্যে টেবিল কলাম মধ্যে স্থান যোগ করা যেতে পারে. এই বৈশিষ্ট্যগুলি ঘরের ডান এবং বাম দিক থেকে অতিরিক্ত স্থান যোগ করে। উভয় বৈশিষ্ট্য একই সময়ে বা পৃথকভাবে ব্যবহার করা যেতে পারে। এই নিবন্ধটি সফলভাবে প্রদর্শন করেছে কিভাবে সারিগুলিকে প্রভাবিত না করে টেবিলের কলামের মধ্যে ব্যবধান যোগ করতে হয়।