এইচটিএমএল টেবিল স্টাইলিং
আপনার টেবিলগুলিকে আরও ভাল দেখাতে CSS ব্যবহার করুন।
এইচটিএমএল টেবিল - জেব্রা স্ট্রাইপস
আপনি যদি প্রতিটি টেবিলের সারিতে একটি পটভূমির রঙ যোগ করেন, আপনি একটি চমৎকার জেব্রা স্ট্রাইপ প্রভাব পাবেন।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
প্রতিটি টেবিল সারি উপাদান স্টাইল করতে, এইভাবে :nth-child(even) নির্বাচক ব্যবহার করুন:
উদাহরণ
tr:nth-child(even) {
background-color: #D6EEEE;
}দ্রষ্টব্য:
আপনি যদি (জোড়) এর পরিবর্তে (বিজোড়) ব্যবহার করেন তবে বিন্যাসটি ক্রম 2,4,6 ইত্যাদির পরিবর্তে 1,3,5 ইত্যাদিতে ঘটবে।
HTML টেবিল - উল্লম্ব জেব্রা লাইন
উল্লম্ব জেব্রা স্ট্রাইপ তৈরি করতে, প্রতিটি অন্য সারির পরিবর্তে প্রতিটি কলাম স্টাইল করুন।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
সেট করুন :nth-child(এমনকি) টেবিল ডেটা এলিমেন্টে এইভাবে:
উদাহরণ
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}দ্রষ্টব্য:
আপনি যদি শিরোনাম এবং নিয়মিত টেবিল কক্ষে স্টাইলিং রাখতে চান, তাহলে th এবং td উভয় উপাদানেই :nth-child() নির্বাচক রাখুন।
উল্লম্ব এবং অনুভূমিক জেব্রা লাইন সংযুক্ত করা হচ্ছে
উপরের দুটি উদাহরণ থেকে স্টাইলিং একত্রিত করা যাক এবং প্রতিটি সারি এবং অন্য প্রতিটি কলামে ড্যাশ আছে।
আপনি যদি একটি স্বচ্ছ রঙ ব্যবহার করেন, আপনি একটি ওভারল্যাপিং প্রভাব পাবেন।
রঙের স্বচ্ছতা নির্দিষ্ট করতে rgba() রঙ ব্যবহার করুন:
উদাহরণ
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}অনুভূমিক বিভাজক
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
আপনি যদি প্রতিটি টেবিল সারির নীচে সীমা নির্দিষ্ট করেন, আপনি অনুভূমিক বিভাজক সহ একটি টেবিল পাবেন।
অনুভূমিক বিভাজক পেতে সমস্ত tr উপাদানগুলিতে সীমানা-নীচের বৈশিষ্ট্য যুক্ত করুন:
উদাহরণ
tr {
border-bottom: 1px solid #ddd;
}ঘোরানো টেবিল
হোভারে টেবিলের সারিগুলিকে হাইলাইট করতে tr এ :হোভার নির্বাচক ব্যবহার করুন:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
(উপরের সারির উপর মাউস)
উদাহরণ
tr:hover {background-color: #D6EEEE;}