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

Lucas Simon

শনিবার, ২২ জুন, ২০২৪ ১২:২৫:০২ PM

CSS টেবিল ব্যবধানের ভূমিকা

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

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

আদেশ	বর্ণনা
border-collapse	এই CSS প্রপার্টি সেট করে যে টেবিলের সীমানাগুলি একটি একক বর্ডারে ভেঙে যাবে নাকি আলাদা করা হবে।
padding	একটি ঘরের বিষয়বস্তু এবং এর সীমানার মধ্যে স্থান নির্ধারণ করে।
border	প্রস্থ এবং রঙ সহ টেবিল ঘরের সীমানা শৈলী নির্দিষ্ট করে।
<th>	একটি HTML টেবিলে একটি হেডার সেল সংজ্ঞায়িত করে।
<td>	একটি HTML টেবিলে একটি আদর্শ ঘর সংজ্ঞায়িত করে।
width	টেবিলের প্রস্থ নির্দিষ্ট করে।

টেবিল ব্যবধানের জন্য CSS বোঝা

প্রদত্ত স্ক্রিপ্টগুলিতে, আমরা ঐতিহ্যগত HTML প্রতিস্থাপন করি cellpadding এবং cellspacing টেবিল কোষের মধ্যে এবং মধ্যে ব্যবধান নিয়ন্ত্রণ করতে CSS বৈশিষ্ট্য সহ বৈশিষ্ট্য। প্রথম স্ক্রিপ্ট এর মধ্যে একটি CSS ব্লক ব্যবহার করে <style> টেবিল এবং এর ঘরগুলিতে বিশ্বব্যাপী শৈলী প্রয়োগ করার জন্য ট্যাগ। আমরা ব্যবহার করি border-collapse সংলগ্ন কক্ষগুলির সীমানাগুলি একটি একক বর্ডারে একত্রিত হয়েছে তা নিশ্চিত করার জন্য সম্পত্তি, একটি পরিষ্কার চেহারা তৈরি করে৷ দ্য padding মধ্যে সম্পত্তি th এবং td নির্বাচকরা বিষয়বস্তু এবং ঘরের সীমানার মধ্যে স্থান নির্ধারণ করে, কার্যকরভাবে প্রতিস্থাপন করে cellpadding.

দ্বিতীয় স্ক্রিপ্টটি দেখায় কিভাবে ইনলাইন CSS ব্যবহার করে অনুরূপ ফলাফল অর্জন করা যায়, যা সম্পূর্ণ নথিকে প্রভাবিত না করে সরাসরি নির্দিষ্ট উপাদানগুলিতে শৈলী প্রয়োগ করার জন্য দরকারী। ইনলাইন CSS পৃথক উপাদানগুলির সাথে কাজ করার সময় আরও বেশি নমনীয়তা প্রদান করে কিন্তু অতিরিক্ত ব্যবহার করা হলে HTML কোড কম পাঠযোগ্য করে তুলতে পারে। সেট করে border-collapse উপরে <table> ট্যাগ এবং ব্যবহার করে style উপর বৈশিষ্ট্য <th> এবং <td> ট্যাগ, আমরা টেবিল জুড়ে সামঞ্জস্যপূর্ণ সেল প্যাডিং নিশ্চিত করি। এই পদ্ধতিটি হাইলাইট করে যে কীভাবে সিএসএস ঐতিহ্যগত বৈশিষ্ট্যের তুলনায় এইচটিএমএল উপাদান স্টাইল করার জন্য আরও মডুলার এবং বজায় রাখার পদ্ধতি প্রদান করতে পারে।

CSS দিয়ে সেলপ্যাডিং এবং সেলস্পেসিং প্রতিস্থাপন করা হচ্ছে

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table Spacing</title>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
</body>
</html>

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

নমনীয়তার জন্য ইনলাইন CSS ব্যবহার করা

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Table Spacing</title>
</head>
<body>
<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid black; padding: 10px;">Header 1</th>
    <th style="border: 1px solid black; padding: 10px;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 10px;">Cell 1</td>
    <td style="border: 1px solid black; padding: 10px;">Cell 2</td>
  </tr>
</table>
</body>
</html>

টেবিল ব্যবধানের জন্য উন্নত CSS কৌশল

টেবিল ব্যবধানের জন্য CSS ব্যবহার করার আরেকটি গুরুত্বপূর্ণ দিক হল মধ্যে পার্থক্য বোঝা border-spacing এবং padding. যখন padding কোষের মধ্যে স্থান নিয়ন্ত্রণ করে, border-spacing কোষের মধ্যে স্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আবেদন করা হচ্ছে border-spacing বিশেষভাবে উপযোগী হতে পারে যখন আপনাকে আরও স্পষ্টভাবে কক্ষগুলি আলাদা করে আরও দৃশ্যমান আকর্ষণীয় টেবিল তৈরি করতে হবে। ব্যবহার করা border-spacing, আপনি সরাসরি এটি প্রয়োগ করতে পারেন <table> আপনার CSS এ উপাদান, যেমন: table { border-spacing: 10px; }. এটি প্রতিটি ঘরকে 10 পিক্সেল দ্বারা পৃথক করে, আপনার টেবিলের পঠনযোগ্যতা এবং নান্দনিকতা বাড়ায়।

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

CSS টেবিল স্পেসিং সম্পর্কে সাধারণ প্রশ্ন

আমি কিভাবে CSS ব্যবহার করে সেলস্পেসিং সেট করব?
ব্যবহার border-spacing কোষের মধ্যে স্থান সেট করার জন্য সম্পত্তি।
আমি কিভাবে CSS এ সেলপ্যাডিং সেট করতে পারি?
ব্যবহার padding ভিতরে সম্পত্তি th বা td কোষের মধ্যে স্থান সেট করার উপাদান।
সীমান্ত-পতন কী করে?
দ্য border-collapse সম্পত্তি সংলগ্ন টেবিল সেল সীমানাগুলিকে একক সীমানায় একত্রিত করে।
আমি কি টেবিল ব্যবধানের জন্য ইনলাইন CSS ব্যবহার করতে পারি?
হ্যাঁ, আপনি ব্যবহার করতে পারেন style এট্রিবিউট সরাসরি সিএসএস যোগ করতে <table>, <th>, এবং <td> ট্যাগ।
প্যাডিং এবং বর্ডার-স্পেসিংয়ের মধ্যে পার্থক্য কী?
Padding কোষের ভিতরে স্থান নিয়ন্ত্রণ করে, যখন border-spacing কোষের মধ্যে স্থান নিয়ন্ত্রণ করে।
কিভাবে আমি একটি টেবিলের প্রতিটি অন্য সারি হাইলাইট করতে পারি?
ব্যবহার :nth-child ছদ্ম-শ্রেণি একটি জোড় বা বিজোড় যুক্তি সহ স্টাইল বিকল্প সারি।
আমি একটি ডোরাকাটা টেবিল তৈরি করতে CSS ব্যবহার করতে পারি?
হ্যাঁ, ব্যবহার করে শৈলী প্রয়োগ করুন :nth-child বা :nth-of-type নির্বাচকরা একটি ডোরাকাটা প্রভাব অর্জন করতে।
আমি কিভাবে CSS এ টেবিলের সীমানা ঘন করতে পারি?
ব্যবহার border একটি নির্দিষ্ট প্রস্থ সঙ্গে সম্পত্তি th এবং td নির্বাচক
এইচটিএমএল অ্যাট্রিবিউটের চেয়ে টেবিল স্পেসিংয়ের জন্য সিএসএস ব্যবহার করা কি ভাল?
হ্যাঁ, CSS ব্যবহার করা আরও নমনীয় এবং বিষয়বস্তু এবং স্টাইলিংয়ের একটি পৃথকীকরণ বজায় রাখে, যা ওয়েব ডেভেলপমেন্টে একটি সেরা অনুশীলন।

CSS টেবিল ব্যবধান সঙ্গে মোড়ানো

টেবিল ব্যবধানের জন্য CSS প্রয়োগ করা শুধুমাত্র আপনার HTML কোডকে আধুনিক করে না বরং এর রক্ষণাবেক্ষণযোগ্যতা এবং পাঠযোগ্যতাও বাড়ায়। এর ব্যবহার border-collapse, padding, এবং border-spacing বৈশিষ্ট্যগুলি টেবিল লেআউটের উপর সুনির্দিষ্ট নিয়ন্ত্রণের অনুমতি দেয়, ঐতিহ্যগত HTML বৈশিষ্ট্যগুলির তুলনায় আরও মার্জিত এবং নমনীয় সমাধান প্রদান করে। এই CSS কৌশলগুলিকে আলিঙ্গন করা পরিষ্কার, প্রতিক্রিয়াশীল, এবং দৃশ্যত আকর্ষণীয় ওয়েব টেবিল তৈরি করার জন্য অপরিহার্য।