การกำหนดสีให้บรรทัดคู่และบรรทัดคี่

หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document Even and Odd Rows

การกำหนดสีให้บรรทัดคู่และบรรทัดคี่

การกำหนดสีให้บรรทัดคู่และบรรทัดคี่ในตารางเป็นเทคนิคที่ช่วยให้ผู้อ่านสามารถติดตามข้อมูลในตารางได้ง่ายขึ้น โดยเฉพาะเมื่อตารางมีข้อมูลจำนวนมาก

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) หรือองค์ประกอบอื่นๆ ที่มีลักษณะเป็นลำดับได้เช่นกัน