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

การเพิ่มความสวยงามให้กับ 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 สลับสีตารางง่าย ๆ ในบรรทัดเดียว ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

ดูเพลิน Admin - 04 ม.ค. 66
Debug CSS @media print วิธีดีบั๊ก print preview

Debug CSS @media print วิธีดีบั๊ก print preview

ดูเพลิน Admin - 04 ม.ค. 66
Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

ดูเพลิน Admin - 19 ม.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4