CSS ตารางสลับสี ด้วยคำสั่ง nth-child even กับ odd

สอนเขียนภาษา CSS ตารางสลับสี ด้วยคำสั่ง nth-child โดยตัวอย่างจะแนะนำการสลับสี 2 แบบคือ เริ่มใส่สีที่แถวเลขคู่ (even) กับเริ่มใส่สีที่แถวเลขคี่ (odd) ด้วยภาษา CSS ร่วมกับภาษา HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS ตารางสลับสี ด้วยคำสั่ง nth-child even

<style>
    tbody tr:nth-child(even) {
        background-color: #4C8BF5;
        color: #fff;
    }    
</style>

<table border="1" width="100%">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>

CSS ตารางสลับสี tbody tr:nth-child(even) จะเป็นการอ้างถึงเฉพาะแถว tr ที่เป็นแถวเลขคู่ โดยกำหนดให้ใส่สีพื้นหลังเป็น #4C8BF5 และกำหนดให้ตัวหนังสือสีขาว #fff

ตัวอย่าง CSS ตารางสลับสี ด้วยคำสั่ง nth-child odd

<style>
    tbody tr:nth-child(odd) {
        background-color: #4C8BF5;
        color: #fff;
    }    
</style>

<table border="1" width="100%">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
</table>

CSS ตารางสลับสี tbody tr:nth-child(odd) จะเป็นการอ้างถึงเฉพาะแถว tr ที่เป็นแถวเลขคี่ โดยกำหนดให้ใส่สีพื้นหลังเป็น #4C8BF5 และกำหนดให้ตัวหนังสือสีขาว #fff