- টেবিল সারি
এ কিভাবে বর্ডার-বটম যোগ করবেন? - সারণী সারি
এলিমেন্টে বর্ডার-নিচ সেট করুন - শৈলী টেবিল উপাদান
- স্টাইল 'td' উপাদান
- শৈলী 'tr' উপাদান
টেবিল সারি
এ কিভাবে বর্ডার-বটম যোগ করবেন? টেবিলের সারিতে বর্ডার-নিচ যোগ করলে পুরো সারিতে সীমানা যুক্ত হবে যাতে আরও ভালো ভিজ্যুয়াল অভিজ্ঞতা তৈরি হয় এবং ব্যবহারকারীর মনোযোগ আকর্ষণ করা যায়।
টেবিল সারি
-এ বর্ডার-নিচ যোগ করার একটি বিশদ উদাহরণ নীচে প্রদর্শিত হয়েছে:
সারণী সারি
-এ বর্ডার-নিচ সেট করুন আমাদের HTML ফাইলে 3টি সারি এবং 3টি কলাম সম্বলিত একটি সাধারণ টেবিল তৈরি করুন যা
, এবং উপাদান ব্যবহার করে তৈরি করা হয়েছে:
< টেবিল >
< tr ক্লাস = 'সারি' >
< ম > নাম < / ম >
< ম > স্ট্যাটাস < / ম >
< ম > কক্ষ নম্বর < / ম >
< / tr >
< tr ক্লাস = 'সারি' >
< td > ফখর < / td >
< td > ছাত্র < / td >
< td > 05 < / td >
< / tr >
< tr ক্লাস = 'সারি' >
< td > ওমর < / td >
< td > ছাত্র < / td >
< td > 05 < / td >
< / tr >
< / টেবিল >উপরের কোড স্নিপেটে, আমরা টেবিলের সারি
-এ “সারি”-এর একটি ক্লাস বরাদ্দ করেছি, যাতে এটি পরে CSS-এ অ্যাক্সেস করা যায়।
ওয়েবপেজটি দেখতে এরকম হবে:
শৈলী টেবিল উপাদান
CSS অংশে টেবিলের উপাদান নির্বাচন করুন এবং পাঠ্যটিকে কেন্দ্রে সারিবদ্ধ করুন। এর পরে, ব্যবহার করুন ' সীমান্ত-পতন ' সম্পত্তি ধসে তার মান সেট করতে:
টেবিল
{
সীমান্ত-পতন: পতন;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
}স্টাইল 'td' উপাদান
একটি ভাল ভিজ্যুয়াল উপস্থাপনার জন্য, আসুন টেবিল ডেটা “
” এবং টেবিল হেডার “ ” উপাদানগুলিতে 20px এর প্যাডিং দিই: td
{
প্যাডিং: 20px;
}
ম
{
প্যাডিং: 20px;
}আউটপুট এই মত দেখায়:
উপরের আউটপুটটি 20px এর প্যাডিং দেখিয়েছে এবং পাঠ্যটিকে কেন্দ্রে সারিবদ্ধ করেছে।
শৈলী 'tr' উপাদান
CSS ফাইলে, 'tr' নির্বাচকের অধীনে বর্ডার-বটম প্রপার্টি যোগ করুন। এটি শিরোনাম সারি সহ টেবিলের প্রতিটি সারিতে বরাদ্দ করে। উদাহরণস্বরূপ, এর মান 2px কঠিন অন্ধকারে সেট করুন:
tr {
বর্ডার-নিচ: 2px কঠিন অন্ধকার;
}উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
প্রতিটি টেবিলের সারির নীচে কীভাবে একটি সীমানা যুক্ত করা যায় সে সম্পর্কে এটিই '
” উপসংহার
উপাদানের নীচে একটি বর্ডার যোগ করতে, CSS প্রপার্টি বর্ডার-কলেপ্স সেট করুন এবং ' ' এলিমেন্টে বর্ডার-বটম প্রপার্টি ব্যবহার করুন। এটি সিএসএস সম্পত্তিকে টেবিলে সীমানা প্রয়োগ করতে দেয়। এইভাবে আপনি সহজেই প্রতিটি “
” ট্যাগে একটি বর্ডার-নিচ যোগ করতে পারেন। - সারণী সারি