การเพิ่มความสวยงามให้กับ HTML Table นอกจากจะได้ในเรื่องของความสวยงามแล้วนั้น การทำ Style ให้กับตาราง ยังช่วยทำให้ตารางที่เราสร้างขึ้นมาอ่านงายขึ้นอีกด้วย ว่าแล้วดูเพลินเลยได้นำเทคนิคการเขียน CSS ตารางสลับสีมาฝากกัน จะง่ายแค่ไหนไปดู
See the Pen Untitled by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.
CSS สลับสีตาราง บรรทัดเดียว จบเลย
Copy CSS ด้านล่าง นี้ไปใส่ในไฟล์ stylesheet (.css) หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์ของคุณ เพียงเท่านี้สีตารางของคุณจะสลับสีได้แล้ว
ตัวอย่าง เราจะมาทำให้ Row ของตารางที่เป็นเลขคี่ (1,3,5 ....) มี Background เป็นสีขาว ด้วยคำสั่ง nth-child(odd)
tbody tr:nth-child(odd) {background-color: #FFF;}
จากทำให้ Row ของตารางที่เป็นเลขคู่ (2,4,6 ....) มี Background เป็นสีเทา ด้วยคำสั่ง nth-child(even)
tbody tr:nth-child(even) {background-color: #EAEAEA;}
อธิบายเรื่อง 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 สลับสีตารางง่าย ๆ ในบรรทัดเดียว ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย
