การกำหนดสีให้บรรทัดคู่และบรรทัดคี่
การกำหนดสีให้บรรทัดคู่และบรรทัดคี่ในตารางเป็นเทคนิคที่ช่วยให้ผู้อ่านสามารถติดตามข้อมูลในตารางได้ง่ายขึ้น โดยเฉพาะเมื่อตารางมีข้อมูลจำนวนมาก
CSS มี pseudo-class ที่ชื่อว่า :nth-child
ซึ่งช่วยให้เราสามารถเลือกองค์ประกอบที่เป็นลำดับที่ต้องการได้ เช่น ลำดับที่คู่หรือคี่
tr:nth-child(even) { background-color: #f9f9f9; } tr:nth-child(odd) { background-color: #ffffff; }
ตัวอย่างตารางที่ใช้ CSS ข้างต้น:
ชื่อ | นามสกุล | อายุ |
---|---|---|
สมชาย | ใจดี | 25 |
สมหญิง | รักเรียน | 22 |
สมศักดิ์ | มีปัญญา | 30 |
สมใจ | นึกคิด | 28 |
สมปอง | ดีงาม | 35 |
นอกจากการใช้ even
และ odd
แล้ว เรายังสามารถใช้สูตรคณิตศาสตร์เพื่อเลือกแถวที่ต้องการได้ เช่น:
tr:nth-child(3n+1) { background-color: #f0f0f0; } tr:nth-child(3n+2) { background-color: #e0e0e0; } tr:nth-child(3n+3) { background-color: #d0d0d0; }
สูตรด้านบนจะทำให้แถวที่ 1, 4, 7, ... มีสีพื้นหลังเป็น #f0f0f0, แถวที่ 2, 5, 8, ... มีสีพื้นหลังเป็น #e0e0e0 และแถวที่ 3, 6, 9, ... มีสีพื้นหลังเป็น #d0d0d0
เทคนิคนี้ไม่ได้จำกัดเฉพาะตารางเท่านั้น แต่สามารถใช้กับรายการ (list) หรือองค์ประกอบอื่นๆ ที่มีลักษณะเป็นลำดับได้เช่นกัน