টেবিল সেল প্যাডিং এবং স্পেসিং সেট করতে CSS ব্যবহার করা

টেবিল সেল প্যাডিং এবং স্পেসিং সেট করতে CSS ব্যবহার করা
Lucas Simon
রবিবার, ৩০ জুন, ২০২৪ ১০:৩৯:০৭ PM
CSS

স্টাইলিং টেবিল প্যাডিং এবং CSS সহ ব্যবধান

একটি এইচটিএমএল টেবিলে, বৈশিষ্ট্যগুলি `সেলপ্যাডিং` এবং `সেলস্পেসিং` ঐতিহ্যগতভাবে টেবিলের ঘরের মধ্যে এবং মধ্যে ব্যবধান সেট করতে ব্যবহৃত হয়। যাইহোক, ওয়েব ডেভেলপমেন্ট বিকশিত হওয়ার সাথে সাথে, এই স্টাইলিং উদ্দেশ্যে সিএসএস ব্যবহার করা আরও প্রচলিত হয়ে ওঠে, আরও ভাল নমনীয়তা এবং নিয়ন্ত্রণের প্রস্তাব দেয়।

এই নিবন্ধটি অনুসন্ধান করে যে কিভাবে CSS ব্যবহার করে `সেলপ্যাডিং` এবং `সেলস্পেসিং` এর প্রভাবগুলি প্রতিলিপি করা যায়। এই পদ্ধতিগুলি বোঝার মাধ্যমে, বিকাশকারীরা আধুনিক ওয়েব মানগুলি মেনে চলার সময় আরও রক্ষণাবেক্ষণযোগ্য এবং মাপযোগ্য কোড অর্জন করতে পারে।

আদেশ বর্ণনা
border-collapse: separate; বর্ডার-কলেপস প্রপার্টি ডিফল্টে রিসেট করে, বর্ডার-স্পেসিং ব্যবহারের অনুমতি দেয়।
border-spacing একটি টেবিলের সংলগ্ন কক্ষের সীমানার মধ্যে দূরত্ব নির্দিষ্ট করে।
padding এইচটিএমএল সেলপ্যাডিং অ্যাট্রিবিউটের মতো টেবিলের ঘরের ভিতরে প্যাডিং সেট করে।
querySelectorAll নথিতে একটি নির্দিষ্ট CSS নির্বাচক(গুলি) মেলে এমন সমস্ত উপাদান নির্বাচন করে।
forEach প্রতিটি অ্যারে উপাদানের জন্য একবার একটি প্রদত্ত ফাংশন চালায়, সাধারণত querySelectorAll থেকে NodeList এর সাথে ব্যবহৃত হয়।
style জাভাস্ক্রিপ্টের মাধ্যমে CSS বৈশিষ্ট্যে গতিশীল আপডেটের অনুমতি দিয়ে একটি উপাদানের শৈলী বৈশিষ্ট্য পায় বা সেট করে।

টেবিল প্যাডিং এবং স্পেসিংয়ের জন্য CSS বাস্তবায়ন করা

প্রথম স্ক্রিপ্টে, আমরা মৌলিক HTML এবং CSS ব্যবহার করি এর প্রভাব প্রতিলিপি করতে cellpadding এবং cellspacing গুণাবলী সেট করে border-collapse প্রতি separate, আমরা নিশ্চিত করি যে টেবিলের কোষগুলি একটি একক সীমানায় ভেঙে না পড়ে, যা আমাদের ব্যবহার করে কোষগুলির মধ্যে ব্যবধান নির্ধারণ করতে দেয় border-spacing সম্পত্তি এটি সেটিং এর সমতুল্য cellspacing="1" HTML এ একইভাবে, দ padding ভিতরে সম্পত্তি td এবং th নির্বাচকরা অনুকরণ করে cellpadding="1" প্রতিটি কক্ষের মধ্যে একটি 1-পিক্সেল প্যাডিং সেট করে বৈশিষ্ট্য। এই পদ্ধতিটি কোডের নমনীয়তা এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি করে, সিএসএসের মাধ্যমে বিশুদ্ধভাবে পছন্দসই ব্যবধান অর্জন করার জন্য একটি সরল পদ্ধতি প্রদান করে।

দ্বিতীয় স্ক্রিপ্টটি CSS এর পাশাপাশি JavaScript ব্যবহার করে একটি গতিশীল পদ্ধতি প্রদর্শন করে। এইচটিএমএল-এ প্রারম্ভিক টেবিল গঠন এবং মৌলিক স্টাইলিং সংজ্ঞায়িত করার পর, আমরা জাভাস্ক্রিপ্ট ব্যবহার করি টেবিলের স্পেসিং গতিশীলভাবে সামঞ্জস্য করতে। দ্য document.getElementById ফাংশনটি তার ID দ্বারা টেবিল নির্বাচন করতে ব্যবহৃত হয়। আমরা তারপর টেবিল এর সেট borderSpacing সম্পত্তি '1px' এর মতো একই প্রভাব অর্জন করতে cellspacing বৈশিষ্ট্য পরবর্তী, আমরা ব্যবহার করি querySelectorAll সব নির্বাচন করতে td এবং th টেবিলের মধ্যে উপাদান, এবং forEach এই উপাদানগুলির উপর পুনরাবৃত্তি করার পদ্ধতি, একটি 1-পিক্সেল প্রয়োগ করে padding প্রতিটি। এই স্ক্রিপ্টটি প্রদর্শন করে যে কীভাবে জাভাস্ক্রিপ্ট CSS কার্যকারিতা উন্নত করতে ব্যবহার করা যেতে পারে, নির্দিষ্ট শর্ত বা ব্যবহারকারীর মিথস্ক্রিয়াগুলির উপর ভিত্তি করে টেবিল স্টাইলিংয়ে গতিশীল আপডেটের অনুমতি দেয়।

টেবিল সেল প্যাডিং এবং স্পেসিংকে CSS-এ রূপান্তর করা হচ্ছে

HTML এবং CSS ব্যবহার করে

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate; /* Resets spacing */
      border-spacing: 1px; /* Equivalent to cellspacing="1" */
    }
    td, th {
      padding: 1px; /* Equivalent to cellpadding="1" */
    }
  </style>
</head>
<body>
  <table>
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
</body>
</html>

টেবিল প্যাডিং এবং ব্যবধান সামঞ্জস্য করার জন্য গতিশীল পদ্ধতি

JavaScript এবং CSS ব্যবহার করা

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: separate;
    }
    td, th {
      padding: 1px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr><th>Header 1</th><th>Header 2</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
  </table>
  <script>
    const table = document.getElementById('myTable');
    table.style.borderSpacing = '1px';
    const cells = table.querySelectorAll('td, th');
    cells.forEach(cell => {
      cell.style.padding = '1px';
    });
  </script>
</body>
</html>

CSS সহ টেবিল স্টাইলিংয়ের জন্য উন্নত কৌশল

বেসিক প্যাডিং এবং স্পেসিং এর বাইরে, CSS HTML টেবিল স্টাইল করার জন্য বিভিন্ন উন্নত কৌশল অফার করে। এরকম একটি কৌশল হল ছদ্ম-শ্রেণীর ব্যবহার :nth-child এবং :nth-of-type নির্দিষ্ট সারি বা কলাম স্টাইল করতে। উদাহরণস্বরূপ, ব্যবহার করে tr:nth-child(even) এমনকি সারিগুলিতেও শৈলী প্রয়োগ করতে পারে, বিকল্প সারি ছায়া দেওয়ার অনুমতি দেয় যা পাঠযোগ্যতা বাড়ায়। এই পদ্ধতিটি বড় ডেটাসেটের জন্য বিশেষভাবে উপযোগী যেখানে চাক্ষুষ পার্থক্য অত্যন্ত গুরুত্বপূর্ণ। আরেকটি উন্নত পদ্ধতি ব্যবহার জড়িত CSS Grid জটিল টেবিল লেআউট তৈরি করতে। যদিও সিএসএস গ্রিড সাধারণত লেআউটের উদ্দেশ্যে ব্যবহার করা হয়, তবে এটি টেবিলের উপাদানগুলিতেও প্রয়োগ করা যেতে পারে যাতে কক্ষ, সারি এবং কলামের অবস্থান এবং ব্যবধান নিয়ন্ত্রিত হয়।

উপরন্তু, টেবিল স্টাইলিংয়ের সাথে CSS ট্রানজিশন এবং অ্যানিমেশন একত্রিত করা ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। ট্রানজিশন প্রয়োগ করে hover টেবিল সারি বা কক্ষের উপর প্রভাব, আপনি একটি আরো ইন্টারেক্টিভ এবং দৃশ্যত আকর্ষণীয় টেবিল তৈরি করতে পারেন। উদাহরণস্বরূপ, হোভারে সামান্য রঙ পরিবর্তন বা স্কেলিং প্রভাব যোগ করা টেবিলের সাথে ইন্টারঅ্যাক্ট করা ব্যবহারকারীদের অবিলম্বে প্রতিক্রিয়া প্রদান করে। উপরন্তু, লিভারেজিং media queries টেবিলগুলি প্রতিক্রিয়াশীল এবং বিভিন্ন ডিভাইসে অ্যাক্সেসযোগ্য তা নিশ্চিত করে। মিডিয়া ক্যোয়ারী আপনাকে ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইস জুড়ে একটি সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে, পর্দার আকারের উপর ভিত্তি করে টেবিলের বিন্যাস, ফন্টের আকার এবং সেল প্যাডিং সামঞ্জস্য করতে দেয়।

CSS এর সাথে টেবিল স্টাইলিংয়ের সাধারণ প্রশ্ন এবং উত্তর

  1. কিভাবে আমি একটি টেবিলে বিকল্প সারি রং প্রয়োগ করতে পারি?
  2. ব্যবহার করুন tr:nth-child(even) বা tr:nth-child(odd) আপনার CSS-এ টার্গেট করতে এবং বিকল্প সারি স্টাইল করুন।
  3. আমি কিভাবে CSS দিয়ে একটি টেবিল প্রতিক্রিয়াশীল করতে পারি?
  4. ব্যবহার করুন media queries বিভিন্ন পর্দার আকারের উপর ভিত্তি করে টেবিল লেআউট এবং শৈলী সামঞ্জস্য করতে।
  5. টেবিলের জন্য CSS গ্রিড ব্যবহার করার সুবিধা কি?
  6. CSS গ্রিড টেবিল উপাদানগুলির অবস্থান এবং ব্যবধানের উপর সুনির্দিষ্ট নিয়ন্ত্রণ প্রদান করে, আরও জটিল এবং নমনীয় লেআউটের জন্য অনুমতি দেয়।
  7. আমি কি টেবিলের সারিগুলিতে হোভার প্রভাব যুক্ত করতে পারি?
  8. হ্যাঁ, আপনি ব্যবহার করতে পারেন :hover ছদ্ম-শ্রেণি শৈলী প্রয়োগ করার জন্য যখন ব্যবহারকারী টেবিলের সারি বা ঘরের উপর ঘোরাফেরা করে।
  9. একটি নির্দিষ্ট কলাম হাইলাইট করতে আমি কিভাবে CSS ব্যবহার করব?
  10. ব্যবহার করুন td:nth-child(column_number) আপনার টেবিলের মধ্যে একটি নির্দিষ্ট কলাম টার্গেট এবং স্টাইল করতে।
  11. টেবিলের সাথে সিউডো-ক্লাস ব্যবহার করার সুবিধা কী?
  12. ছদ্ম-শ্রেণীর মত :nth-child এবং :nth-of-type নির্দিষ্ট সারি বা কলামে নির্দিষ্ট শৈলী প্রয়োগ করা সহজ করে, লক্ষ্যযুক্ত স্টাইলিং করার অনুমতি দিন।
  13. আমি কিভাবে টেবিল কোষে অ্যানিমেশন যোগ করতে পারি?
  14. ব্যবহার করুন CSS animations বা transitions টেবিল কোষে গতিশীল প্রভাব তৈরি করতে, ব্যবহারকারীর মিথস্ক্রিয়া বৃদ্ধি করে।
  15. টেবিলের বাকি অংশ থেকে আলাদাভাবে টেবিল শিরোনাম স্টাইল করা কি সম্ভব?
  16. হ্যাঁ, আপনি ব্যবহার করতে পারেন th টেবিলের শিরোনামগুলিতে নির্দিষ্ট শৈলী প্রয়োগ করার জন্য নির্বাচক, অন্যান্য টেবিল ঘর থেকে তাদের আলাদা করে।

টেবিল ব্যবধান জন্য CSS উপর চূড়ান্ত চিন্তা

টেবিল পরিচালনা করতে CSS ব্যবহার করে cellpadding এবং cellspacing প্রথাগত HTML বৈশিষ্ট্যগুলির একটি আধুনিক এবং দক্ষ বিকল্প অফার করে। যেমন সিএসএস বৈশিষ্ট্য প্রয়োগ করে border-spacing এবং padding, আপনি বৃহত্তর নমনীয়তা এবং নিয়ন্ত্রণের সাথে একই ভিজ্যুয়াল প্রভাবগুলি অর্জন করতে পারেন। এই পদ্ধতিটি আপনার কোডের রক্ষণাবেক্ষণযোগ্যতা এবং পরিমাপযোগ্যতা বাড়ায়, আপনার টেবিলগুলি বিভিন্ন ডিভাইস এবং স্ক্রীনের আকার জুড়ে প্রতিক্রিয়াশীল এবং দৃশ্যত আকর্ষণীয় থাকে তা নিশ্চিত করে।