সংগঠিত উপায়ে ডেটা উপস্থাপন করার জন্য টেবিলগুলি হল সবচেয়ে সাধারণ এবং কার্যকরী টুল। আগের সময়ে, CSS এর আগে, <টেবিল> উপাদানটি সমৃদ্ধ ডিজাইন লেআউট তৈরির জন্য ব্যবহার করা হয়েছিল। কিন্তু আজকাল, লেআউট তৈরি করা হয় অন্যান্য CSS বৈশিষ্ট্য ব্যবহার করে। আরও নির্দিষ্টভাবে, HTML “
” উপাদানটি একটি ওয়েব টেবিল তৈরি করতে ব্যবহৃত হয়, যা বিভিন্ন CSS বৈশিষ্ট্য প্রয়োগ করে আরও স্টাইল করা যেতে পারে।
এই অধ্যয়নটি সিএসএসের সাথে স্টাইলিং টেবিলের সাথে সম্পর্কিত গাইড করবে।
কিভাবে CSS দিয়ে টেবিল স্টাইল করবেন?
টেবিলে শৈলী প্রয়োগ করতে, আমরা নীচে দেওয়া ধাপগুলির সিরিজের মধ্য দিয়ে যাব।
উপাদানটি নিম্নলিখিত CSS স্টাইলিং বৈশিষ্ট্যগুলির সাথে প্রয়োগ করা হয়:
' ফন্ট-পরিবার 'মূল্য সহ সম্পত্তি' ভার্দানা, জেনেভা, তাহোমা, সান-সেরিফ ” ব্রাউজার দ্বারা সমর্থিত ফন্ট প্রয়োগ করতে ব্যবহার করা হয়। যদি ব্রাউজার প্রথম ফন্ট স্টাইল সমর্থন না করে, অন্যটি ব্যবহার করা হবে।
' পেছনের রঙ ' সম্পত্তি উপাদানটির পটভূমির রঙ সেট করে।
' অক্ষরের আকার ” বৈশিষ্ট্য ফন্টের আকার নির্ধারণের জন্য ব্যবহার করা হয়।
' পাঠ্য-সারিবদ্ধ ' সম্পত্তি উপাদানটির পাঠ্যের প্রান্তিককরণ নির্দিষ্ট করে।
' রঙ ' সম্পত্তি উপাদানের ফন্ট রঙ বোঝায়।
এখানে উপরে-প্রদত্ত কোডের আউটপুট রয়েছে:
ধাপ 4: টেবিলে সীমানা যোগ করুন দ্য ' সীমান্ত উপাদানটির চারপাশে একটি সীমানা যুক্ত করতে সম্পত্তি ব্যবহার করা হয়। এটি একটি শর্টহ্যান্ড প্রপার্টি যা সীমানার প্রস্থ, সীমানা শৈলী এবং সীমানার রঙ নির্দিষ্ট করে।
টেবিলে প্যাডিং এবং মার্জিন সহ বর্ডার প্রয়োগ করা যাক:
' সীমান্ত সীমানা প্রস্থ, সীমানা শৈলী এবং সীমানার রঙ উল্লেখ করে বৈশিষ্ট্য টেবিলের চারপাশে সীমানা সমন্বয় করে।
' প্যাডিং ” উপাদানের বিষয়বস্তুর চারপাশে স্থান নির্দিষ্ট করে, যেখানে প্রথম মানটি উপরের-নীচে স্থান নির্ধারণ করে এবং দ্বিতীয় মানটি বিষয়বস্তুর ডান-বাম দিকে স্থান যোগ করে।
' মার্জিন 'মূল্য সহ সম্পত্তি' স্বয়ংক্রিয় ” উপাদানটির চারপাশে সমান স্থান যোগ করে।
আউটপুট
বিঃদ্রঃ : যদি আমরা টেবিলের সীমানার মধ্যে ফাঁকা জায়গা না চাই, বর্ডার-কলাপস প্রপার্টি ব্যবহার করুন।
ধাপ 5: টেবিল থেকে সীমানা ফাঁকা স্থান সঙ্কুচিত করুন টেবিলের সীমানার মধ্যবর্তী স্থানগুলি ' ব্যবহার করে সরানো যেতে পারে সীমান্ত-পতন 'পতন' মান সহ সম্পত্তি:
এলিমেন্ট সহ ” বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে এটি অনুসারে টেবিলের আকার সামঞ্জস্য করবে::
আমরা নির্দিষ্ট টেবিলের ঘরেও শৈলী প্রয়োগ করতে পারি। তাদের আলোচনা করা যাক!
ধাপ 7: শৈলী নির্দিষ্ট টেবিল কোষ নির্দিষ্ট টেবিল সেল স্টাইল করতে, সেই নির্দিষ্ট ঘরের ক্লাস নাম উল্লেখ করুন। উদাহরণস্বরূপ, নীচের কোডটি প্রতিনিধিত্ব করে যে দ্বিতীয় সারির তৃতীয় ঘরটিকে একটি শ্রেণির নাম দেওয়া হয়েছে “ লক্ষণীয় করা ”:
নিম্নলিখিত CSS বৈশিষ্ট্যগুলি টেবিল উপাদানে প্রয়োগ করা হয়:
' ফন্ট-পরিবার ' সম্পত্তি উপাদানটির ফন্ট শৈলী সেট করে।
' অক্ষরের আকার উপাদানের ফন্ট সেট করার জন্য সম্পত্তি ব্যবহার করা হয়।
' পাঠ্য-সারিবদ্ধ টেক্সট সারিবদ্ধকরণ সামঞ্জস্য করার জন্য সম্পত্তি ব্যবহার করা হয়।
এখানে আউটপুট আছে:
ধাপ 9: সিকোয়েন্সে রঙিন সারি এটি নির্দিষ্ট সারি বা কলামগুলিতে শৈলী প্রয়োগ করার অনুমতিও রয়েছে। উদাহরণস্বরূপ, জোড় সারিগুলি নীচের বিন্যাসটি অনুসরণ করে স্টাইল করা হয়েছে:
\ tbody tr:nth-child ( এমন কি ) { পটভূমি- রঙ : #FFB200; }
এখানে:
দ্য ' :নম-শিশু (এমনকি) ” ছদ্ম নির্বাচক একটি যুক্তি নিতে ব্যবহার করা হয় যা যে প্যাটার্নের উপর স্টাইলিং প্রয়োগ করা হবে তা নির্দিষ্ট করে।
' পেছনের রঙ উপাদানটির পটভূমির রঙ সেট করতে সম্পত্তি ব্যবহার করা হয়।
এটা লক্ষ্য করা যায় যে ব্যাকগ্রাউন্ডের রঙ সফলভাবে জোড় সারিতে প্রয়োগ করা হয়েছে:
এটি সিএসএস দিয়ে টেবিলের স্টাইলিং সম্পর্কে ছিল
উপসংহার
ডেটা সংগঠিত রাখার জন্য টেবিলগুলি একটি গুরুত্বপূর্ণ হাতিয়ার। টেবিলটি HTML
,
,
এবং আরও উপাদান ব্যবহার করে তৈরি করা যেতে পারে। টেবিলটিকে স্টাইলাইজ করার জন্য বেশ কিছু CSS বৈশিষ্ট্য ব্যবহার করা হয়, যেমন বর্ডার, ব্যাকগ্রাউন্ড-কালার প্রপার্টি, ফন্ট-ফ্যামিলি প্রপার্টি এবং আরও অনেক কিছু। আরও ভালোভাবে বোঝার জন্য, এই লেখায় CSS এর সাথে একটি টেবিল স্টাইল করার জন্য ধাপে ধাপে পদ্ধতি ব্যাখ্যা করা হয়েছে।
