কিভাবে এবং কেন CSS এ 'display: table-cell' ব্যবহার করবেন

এটি লক্ষ্য করা যেতে পারে যে ডেটা সফলভাবে যোগ করা হয়েছে:

ধাপ 2: স্টাইল 'টেবিল-বিষয়বস্তু' ধারক

প্রধান ডিভ অ্যাক্সেস করতে, ' ব্যবহার করুন #টেবিল-বিষয়বস্তু ', কোথায় ' # 'নির্দিষ্ট' অ্যাক্সেস করার জন্য ব্যবহৃত একটি নির্বাচক আইডি ” div পাত্রের বৈশিষ্ট্য। তারপরে, নিম্নলিখিত বৈশিষ্ট্যগুলি প্রয়োগ করুন:

এখানে:

• • দ্য ' প্রদর্শন ' সম্পত্তি সংজ্ঞায়িত করে এবং নির্ধারণ করে কিভাবে একটি উপাদান দেখায়। এটি করার জন্য, এই সম্পত্তির মান হিসাবে সেট করা হয়েছে ' টেবিল 'টেবিল তৈরির জন্য।
  • ' প্যাডিং ” পাত্রের ভিতরে স্থান বরাদ্দ করে।

ধাপ 3: স্টাইল 'tr-div' কন্টেইনার

এখন, স্টাইল করুন ' tr-div নিম্নরূপ ধারক:

উপরের কোড ব্লক অনুযায়ী, ' প্রদর্শন ' সম্পত্তি মান হিসাবে সেট করা হয় ' টেবিল-সারি 'যার অর্থ একটি টেবিলে সারি আকারে ডেটা সেট করা হয়, ' পেছনের রং উপাদানটির পিছনের অংশে রঙ নির্দিষ্ট করার জন্য সম্পত্তি ব্যবহার করা হয় এবং সবশেষে, ' প্যাডিং ' প্রয়োগ করা হয়:

ধাপ 4: 'td-div' কন্টেইনারে 'ডিসপ্লে: টেবিল-সেল' প্রপার্টি প্রয়োগ করুন

'এর সাহায্যে তৃতীয় ডিভ অ্যাক্সেস করুন .td-div ” ডট সিলেক্টিভ এবং সংশ্লিষ্ট আইডি, এবং নীচে দেওয়া CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন:

• • এর মান ' প্রদর্শন ' সম্পত্তি হিসাবে সেট করা হয়েছে ' টেবিল-কোষ যা সেল তৈরি এবং সেলে ডেটা যোগ করার জন্য ব্যবহার করা হয়।
  • ' প্রস্থ ” টেবিল ঘরের আকার অনুভূমিকভাবে নির্দিষ্ট করে।
  • ' সীমান্ত কোষের চারপাশে একটি সীমানা নির্ধারণ করে।
  • ' মার্জিন ” সম্পত্তি সংজ্ঞায়িত সীমানার বাইরে স্থান বরাদ্দ করে।
  • ' প্যাডিং ” সীমানার ভিতরে স্থান নির্দিষ্ট করে।

আউটপুট

কেন CSS-এ 'display: table-cell' ব্যবহার করবেন?

দ্য ' প্রদর্শন: টেবিল-কোষ ' CSS প্রপার্টি ডেটাতে ডিসপ্লে সেট করার জন্য ব্যবহার করা হয় যা উপাদানটিকে টেবিলের মতো আচরণ করে। সুতরাং, ব্যবহারকারীরা td এবং tr সহ টেবিলের উপাদান এবং অন্যান্য উপাদানগুলি ব্যবহার না করেই HTML-এ একটি টেবিলের একটি ডুপ্লিকেট তৈরি করতে পারে। আরও নির্দিষ্টভাবে, তার সম্পত্তি একটি টেবিলের আকারে ডেটা সংজ্ঞায়িত করে।

উপসংহার

ব্যবহার করতে ' প্রদর্শন: টেবিল-কোষ ” CSS প্রপার্টি, নেস্টেড ডিভ কন্টেনার তৈরি করুন এবং একটি নির্দিষ্ট নামের সাথে প্রতিটি কন্টেইনারে একটি ক্লাস ঢোকান। তারপর, সিএসএস-এ ডিভ কন্টেইনার অ্যাক্সেস করুন এবং 'ডিসপ্লে: টেবিল-সেল' বৈশিষ্ট্য প্রয়োগ করুন, যেখানে ' প্রদর্শন টেবিল কোষে ডেটা সেট করার জন্য বৈশিষ্ট্য ব্যবহার করা হয়। এই পোস্টটি প্রদর্শন:টেবিল-সেল সিএসএস সম্পত্তি ব্যবহার করার পদ্ধতি প্রদর্শন করেছে।