সিএসএস এর সাথে একটি টেবিলে অভ্যন্তরীণ লাইন (সীমানা) কিভাবে যোগ করবেন

মাত্র পাঁচ মিনিটের মধ্যে একটি সিএসএস টেবিল সীমানা তৈরি করা শিখুন

আপনি শুনেছেন যে CSS এবং HTML টেবিলগুলি মিশ্রিত হয় না। এই কেবল সত্য নয়। হ্যাঁ, লেআউটের জন্য এইচটিএমএল টেবিলের ব্যবহার করে ওয়েব ডিজাইনটি সর্বোত্তম অনুশীলন নয়, CSS লেআউট স্টাইল দ্বারা প্রতিস্থাপিত করা হয়েছে, তবে টেবিলের একটি ট্যাবলেটে ডাটা যোগ করার জন্য সঠিক মার্কআপটি এখনও ওয়েবপেজে রয়েছে।

দুর্ভাগ্যবশত, অনেক ওয়েব পেশাদাররা টেবিল থেকে দূরে shied কারণ তারা বিষ যে চিন্তা, যারা পেশাদারদের অনেক এই সাধারণ HTML উপাদান এবং সংগ্রাম যখন তারা একটি ওয়েবপেজ তাদের মোকাবেলা আছে সঙ্গে সামান্য অভিজ্ঞতা আছে। উদাহরণস্বরূপ, যদি আপনার একটি পৃষ্ঠায় একটি টেবিল থাকে এবং আপনি টেবিল কক্ষগুলিতে অভ্যন্তরীণ লাইন যোগ করতে চান।

CSS টেবিল সীমানা

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

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

শুরু করার আগে

প্রথমে আপনার সিদ্ধান্ত নিতে হবে যে আপনি আপনার টেবিলে কীভাবে লাইনগুলি প্রদর্শিত হবে। আপনার বিভিন্ন বিকল্প আছে, সহ:

আপনি পৃথক কোষের চারপাশে বা পৃথক কোষের ভিতরে রেখাগুলি অবস্থান করতে পারেন।

কিভাবে একটি টেবিল মধ্যে সমস্ত ঘর কাছাকাছি লাইন যোগ করুন

আপনার টেবিলের সমস্ত কক্ষের চারপাশে রেখা যোগ করতে, গ্রিডের মতো প্রভাব তৈরি করে, আপনার শৈলী শীটটি নিম্নোক্ত যুক্ত করুন:

টিডি, তম
সীমানা: কঠিন 1px কালো;
}

কিভাবে একটি টেবিল মধ্যে শুধু কলামের মধ্যে লাইন যোগ করুন

কলামের মধ্যে রেখা যোগ করতে (এটি উল্লম্ব লাইনগুলি তৈরি করে যা টেবিলের কলামে উপরে থেকে নীচের দিকে চলে), আপনার স্টাইলের শীটে নিম্নলিখিতগুলি যোগ করুন:

টিডি, তম
সীমানা বাম: কঠিন 1px কালো;
}

তারপর, যদি আপনি তাদের প্রথম কলামে উপস্থিত না করতে চান, তাহলে আপনাকে সেইগুলি এবং টিডি সেলগুলির একটি ক্লাস যোগ করতে হবে। এই উদাহরণে, আমরা ধরে নিতে পারি যে আমাদের কোষগুলির উপর কোনও সীমানা আছে এবং এই সীমানাকে আমরা আরও নির্দিষ্ট সিএসএস নিয়ম দিয়ে সরিয়ে দিচ্ছি। তাই এখানে এইচটিএমএল ক্লাস আমরা ব্যবহার করা হবে:

বর্গ = "নো-সীমান্ত">

এবং তারপর আমরা আমাদের স্টাইল শীট নিম্নলিখিত শৈলী যোগ করতে পারে:

.সীমানা নেই {
সীমান্ত-বাম: কেউ না;
}

কিভাবে একটি টেবিল মধ্যে শুধু সারি মধ্যে লাইন যোগ করুন

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

tr {
সীমান্ত-নীচে: কঠিন 1px কালো;
}

এবং সারণির নিচের দিক থেকে সীমান্ত সরিয়ে ফেলার জন্য, আপনি আবার সেই tr ট্যাগের একটি ক্লাস যোগ করবেন:

বর্গ = "নো-সীমান্ত">

আপনার স্টাইল শীট নিম্নলিখিত শৈলী যোগ করুন:

.সীমানা নেই {
সীমান্তের নীচে: কেউ না;
}

কিভাবে একটি টেবিল মধ্যে নির্দিষ্ট কলাম বা সারি মধ্যে লাইন যোগ করুন

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

বর্গ = "পার্শ্ব-সীমান্ত">

সারিগুলির মধ্যবর্তী রেখা যোগ করা অনেক সহজ, কারণ আপনি কেবল যে সারিটি আপনি চান তার সারিটি যোগ করতে পারেন।

বর্গ = "সীমান্ত-নীচে">

তারপর আপনার শৈলী শীট CSS যোগ করুন:

.border- পাশ {
সীমানা বাম: কঠিন 1px কালো;
}
.border- নীচে {
সীমান্ত-নীচে: কঠিন 1px কালো;
}

কিভাবে একটি সারণি মধ্যে পৃথক ঘর কাছাকাছি লাইন যোগ করুন

পৃথক কক্ষের চারপাশে লাইন যুক্ত করতে, আপনি যে ঘরগুলি চারপাশে সীমানা চান সেগুলির একটি বর্গ যোগ করুন:

বর্গ = "সীমান্ত">

এবং তারপর আপনার শৈলী শীট নিম্নলিখিত CSS যোগ করুন:

.border {
সীমানা: কঠিন 1px কালো;
}

কিভাবে একটি সারণিতে পৃথক কক্ষে ভিতরে লাইন যোগ করুন

যদি আপনি একটি কক্ষের বিষয়বস্তুগুলির মধ্যে রেখা যোগ করতে চান, তবে এটি করার সবচেয়ে সহজ উপায় হল অনুভূমিক নিয়ম ট্যাগ (


)।

দরকারি পরামর্শ

যদি আপনি আপনার সীমানার মধ্যে ফাঁক দেখেন, তাহলে আপনার টেবিলে সীমান্ত-পতন শৈলী সেট করা আছে কিনা তা নিশ্চিত হওয়া উচিত। আপনার শৈলী শীট নিম্নলিখিত যোগ করুন:

টেবিল {
সীমান্ত-পতন: পতন;
}

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