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

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

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

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

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

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

শুরু করার আগে

আপনি টেবিলে লাইন প্রদর্শিত যেখানে চান তা নির্ধারণ করুন। আপনি বিভিন্ন বিকল্প আছে, সহ:

• একটি গ্রিড গঠন সব কোষ ঘিরে
• শুধু কলাম মধ্যে লাইন পজিশনিং
• শুধু সারি মধ্যে
• নির্দিষ্ট কলাম বা সারির মধ্যে।

আপনি পৃথক কোষের কাছাকাছি বা পৃথক কোষের ভিতরে লাইনগুলি স্থির করতে পারেন।

কিভাবে একটি সারণির সব সেল কাছাকাছি লাইন যোগ করুন

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

td, th {সীমানা: কঠিন 1px কালো;}

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

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

td, th {সীমানা বাম: কঠিন 1px কালো;}

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

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

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

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

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

কলামের মধ্যে লাইন যুক্ত করার সাথে সাথে, আপনি স্টাইল শীটে যোগ করা একটি সহজ শৈলী সহ সারিগুলির মধ্যে অনুভূমিক রেখা যোগ করতে পারেন:

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

টেবিলে নীচের সীমানাটি সরাতে, আপনি আবার একটি ক্লাস যুক্ত করুন

ট্যাগ:

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

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

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

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

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

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

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

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

তারপরে, আপনার স্টাইলশীটে সিএসএস যোগ করুন:

.border-side {সীমানা বাম: কঠিন 1px কালো;}.border-bottom {সীমানা নীচে: কঠিন 1px কালো;}

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

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

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

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

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

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

যদি আপনি একটি কোষের সামগ্রীগুলির ভিতরে লাইন যুক্ত করতে চান তবে এটি করার সবচেয়ে সহজ উপায় অনুভূমিক নিয়ম ট্যাগের সাথে ().

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

আপনি যদি আপনার সীমানাতে ফাঁকগুলি লক্ষ্য করেন তবে সীমানা-পতন শৈলীটি টেবিলে সেট করা আছে তা নিশ্চিত করুন। আপনার স্টাইলশীট নিম্নলিখিত যোগ করুন:

টেবিল {সীমান্ত ভেঙে পড়েছে: পতন;}

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