কিভাবে CSS টেবিল td প্রস্থ ঠিক করবেন?

• HTML ব্যবহার করে ' প্রস্থ ” বৈশিষ্ট্য
• ব্যবহার ' nম-শিশু() 'নির্বাচক
• ব্যবহার ' 'ট্যাগ

পদ্ধতি 1: HTML 'প্রস্থ' বৈশিষ্ট্য ব্যবহার করা

দ্য ' প্রস্থ HTML দ্বারা প্রদত্ত একটি মৌলিক বৈশিষ্ট্য। এটি HTML উপাদানের প্রস্থ বা অনুভূমিক দৈর্ঘ্য সেট করে। টেবিল ডেটা ঠিক করতে, প্রস্থ বৈশিষ্ট্যটি নীচের ধাপে ব্যবহার করা হয়েছে।

ধাপ 1: একটি টেবিল তৈরি করুন
HTML ফাইলে, একটি ব্যবহার করুন <কেন্দ্র> ওয়েবপৃষ্ঠার কেন্দ্রে প্রতিটি উপাদান প্রদর্শন করতে ট্যাগ করুন। এর ভিতরে, ব্যবহার করে একটি টেবিল তৈরি করুন ' <টেবিল> ',' ' এবং ' ট্যাগ করুন এবং এতে ডেটা লিখুন:

ধাপ 2: 'টেবিল' উপাদানে CSS বৈশিষ্ট্য যোগ করুন
CSS-এ টেবিল এলিমেন্ট সিলেক্টর ব্যবহার করুন এবং যোগ করুন “ সীমান্ত ” এর 1px কঠিন লাল, “ পাঠ্য-সারিবদ্ধ ' পাঠ্যটিকে কেন্দ্রে সারিবদ্ধ করে এবং ' প্রস্থ যা টেবিলের সামগ্রিক প্রস্থ 80% এ সেট করে:

ধাপ 3: 'td' এলিমেন্টে বৈশিষ্ট্য বরাদ্দ করা
ব্যবহার ' td ' উপাদান নির্বাচক এবং সেট করে ' সীমানা-নীচ ” এর 5px কঠিন লাল, “ প্যাডিং আইটেমটিকে আরও বিশিষ্ট করতে 20px এর ” এবং “ প্রস্থ 30% হিসাবে সেট করে:

ধাপ 4: 'থ' এলিমেন্টে বৈশিষ্ট্য বরাদ্দ করা
ব্যবহার ' ম ' উপাদান নির্বাচক ' এর রঙ পরিবর্তন করতে সীমানা-নীচ একটি ভাল ভিজ্যুয়ালাইজেশন তৈরি করতে লাল থেকে সমুদ্র সবুজ:

আউটপুট হিসাবে প্রদর্শিত হয়:

উপরের স্ন্যাপশটটি দেখায় যে সমস্ত কলামের প্রস্থ প্রতিটি 30% এ স্থির করা হয়েছে।

পদ্ধতি 2: 'nth-child( )' নির্বাচক ব্যবহার করা

CSS-এর nth-child() বৈশিষ্ট্য একটি নির্দিষ্ট-প্রস্থ টেবিল তৈরি করতে ব্যবহৃত হয়। এই বৈশিষ্ট্যটি কলাম নম্বর পায় এবং ' ' এবং ' <থ> ' ট্যাগ. উদাহরণস্বরূপ, প্রস্থ হল ' স্থির 'শুধু কলাম সংখ্যার জন্য' 1 ' এবং ' 3 ” এই কলামগুলির প্রতিটি 10% প্রস্থ পাচ্ছে। এই নিবন্ধটি সফলভাবে প্রদর্শন করেছে কিভাবে ডেটা টেবিলের প্রস্থ ঠিক করতে হয়।

উপরের কোড ব্লকের আউটপুট হল:

এই আউটপুটটি দেখায় যে কলাম নম্বর 1 এবং 3 10% প্রস্থে স্থির করা হয়েছে।

পদ্ধতি 3: ট্যাগ ব্যবহার করা

ভিতরে ' টেবিল 'সিএসএস অংশের অংশে ' যোগ করুন টেবিল-লেআউট: স্থির ডেটা টেবিল উপাদানগুলির 'প্রস্থ' সেট করার জন্য বৈশিষ্ট্য:

HTML ফাইলে, যোগ করুন ' 'এর ভিতরে ট্যাগ করুন' <টেবিল> ' অধ্যায়. উদাহরণস্বরূপ, প্রথম কলামে 15% এবং দ্বিতীয় কলামে 30% প্রস্থ ঠিক করুন:

উপরের কোড স্নিপেট চালানোর পরে, আউটপুট হল:

এইভাবে ব্যবহারকারী টেবিল ডেটা উপাদানগুলির প্রস্থ ঠিক করতে পারে।

উপসংহার

টেবিল ডেটার প্রস্থ ঠিক করতে, ' প্রস্থ ' বৈশিষ্ট্য, ' নবম-শিশু() ' বিভাজক, এবং ' 'ট্যাগ পদ্ধতি। দ্য ' প্রস্থ ” সম্পত্তি নির্দিষ্ট প্রস্থ সেট করে। 'nth-child( )' বিভাজক একটি প্যারামিটার হিসাবে কলাম নম্বর পায়। উপরন্তু, ' টেবিলটিকে নমনীয় না করার জন্য ট্যাগ ব্যবহার করা যেতে পারে। এই নিবন্ধটি দেখানো হয়েছে কিভাবে টেবিল ডেটা উপাদানের প্রস্থ ঠিক করতে হয়।