নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ
| খেলোয়াড়ের নাম | দলীয় অবস্থান | দেশ |
|---|---|---|
| মাশরাফি বিন মুর্তজা | ক্যাপ্টেন এবং বোলার | বাংলাদেশ |
| সাকিব আল হাসান | অলরাউন্ডার | বাংলাদেশ |
| ডু প্লেসিস | ক্যাপ্টেন এবং ব্যাটসম্যান | দক্ষিন আফ্রিকা |
| বিরাট কোহলি | ব্যাটসম্যান | ভারত |
একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ
| প্রোপার্টি | বর্ণনা |
|---|---|
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
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ <table>, <th> এবং <td> তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।
টেবিলের বর্ডার কলাপ্স
টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য 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
রেসপন্সিভ টেবিল তৈরি করা
টেবিলকে রেস্পন্সিভ করার জন্য <table> এলিমেন্টকে <div> এলিমেন্টের মধ্যে রেখে <div> এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।
kt_satt_skill_example_id=736
বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।
Read more
