সিএসএস টেবিল (CSS Table)


নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ

খেলোয়াড়ের নামদলীয় অবস্থানদেশ
মাশরাফি বিন মুর্তজাক্যাপ্টেন এবং বোলারবাংলাদেশ
সাকিব আল হাসানঅলরাউন্ডারবাংলাদেশ
ডু প্লেসিসক্যাপ্টেন এবং ব্যাটসম্যানদক্ষিন আফ্রিকা
বিরাট কোহলিব্যাটসম্যানভারত

 


একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ

প্রোপার্টিবর্ণনা
borderএকটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি।
border-collapseটেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে।
border-spacingপাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে।
caption-sideটেবিল ক্যাপশনের অবস্থান নির্ধারণ করে।
empty-cellsএকটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে।
table-layoutএকটি টেবিলের লেআউট নির্ধারণ করে।

 


টেবিলে বর্ডার সেট

< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।

kt_satt_skill_example_id=695

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।


< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।

kt_satt_skill_example_id=701

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ

,
এবং তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।


টেবিলের বর্ডার কলাপ্স

টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য border-collapse প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=702

উপরের উদাহরনে border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।


টেবিলের টেক্সট এলাইনমেন্ট সেট

টেবিলের < th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।

ডিফল্টভাবে < th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।

নিচের উদাহরনে < th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।

kt_satt_skill_example_id=703

বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন।  < th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom


টেবিলের প্রস্থ এবং উচ্চতা সেট

টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যাবহার করা হয়।

নিচের উদাহরনে < table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।

kt_satt_skill_example_id=707


টেবিলে প্যাডিং যুক্তকরণ

টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য < th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=711


সারিকে অনুভূমিকভাবে বিভাজন

টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য < th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।

kt_satt_skill_example_id=714


 

টেবিলের সারিতে পৃথকভাবে কালার সেট

নিচের উদাহরণে < th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ

kt_satt_skill_example_id=720



টেবিলে জেব্রা স্টাইল যুক্তকরণ

টেবিলকে জেব্রা স্টাইল করতে হলে nth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।

kt_satt_skill_example_id=738


টেবিলে হোভার ইফেক্ট যুক্তকরণ

টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য < tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।

kt_satt_skill_example_id=732


রেসপন্সিভ টেবিল তৈরি করা

টেবিলকে রেস্পন্সিভ করার জন্য

এলিমেন্টকে
এলিমেন্টের মধ্যে রেখে
এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।

kt_satt_skill_example_id=736

বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।


 

Content added || updated By

আরও দেখুন...

Promotion