CSS ตารางสลับสี วิธีทำ Style สลับสีตารางง่าย ๆ ในบรรทัดเดียว

Spread the love

จำนวนผู้เข้าชม : 632

การเพิ่มความสวยงามให้กับ HTML Table นอกจากจะได้ในเรื่องของความสวยงามแล้วนั้น การทำ Style ให้กับตาราง ยังช่วยทำให้ตารางที่เราสร้างขึ้นมาอ่านงายขึ้นอีกด้วย ว่าแล้วดูเพลินเลยได้นำเทคนิคการเขียน CSS ตารางสลับสีมาฝากกัน จะง่ายแค่ไหนไปดู

CSS สลับสีตาราง บรรทัดเดียว จบเลย

Copy CSS ด้านล่าง นี้ไปใส่ในไฟล์ stylesheet (.css) หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์ของคุณ เพียงเท่านี้สีตารางของคุณจะสลับสีได้แล้ว

ตัวอย่าง เราจะมาทำให้ Row ของตารางที่เป็นเลขคี่ (1,3,5 ....) มี Background เป็นสีขาว ด้วยคำสั่ง nth-child(odd)

อธิบายเรื่อง nth-child เพื่อเติม

เราจะใช้ nth-child ในการกรณีที่ต้องการระบุ Element ที่เป็นเลขคี่/คู่ มักจะใช้กับ HTML เช่น Table, Unordered list, Ordered List เป็นต้น

CSS nth-child(odd) คือ

การชี้ไปยัง CSS Element ที่เป็นเลขคี่

CSS nth-child(even) คือ

การชี้ไปยัง CSS Element ที่เป็นเลขคู่

เป็นยังไงกันบ้างคะ ไม่ยากเลยใช่ไหมละสำหรับเทคนิค CSS ตารางสลับสี วิธีทำ Style สลับสีตารางง่าย ๆ ในบรรทัดเดียว ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย