วิธีการเปลี่ยนสีพื้นหลังของตาราง

เปลี่ยนสีพื้นหลังโดยใช้สไตล์ชีต

หากคุณไม่ต้องการเพิ่มสีพื้นหลังของสไตล์ลงในตารางมีวิธีอื่นในการตั้งสีพื้นหลัง ตัวอย่างเช่นคุณสามารถกำหนดสไตล์ในสไตล์ชีตที่ HEAD ของเอกสาร HTML ของคุณหรือตั้งค่าไว้ในสไตล์ชีทภายนอกได้ การเปลี่ยนแปลงเหล่านี้ใน HEAD หรือในสไตล์ชีตภายนอกอาจปรากฏเช่นนี้สำหรับตารางแถวและเซลล์:

ตาราง {background-color: # ff0000; } tr {พื้นหลังสี: สีเหลือง; } td {background-color: # 000; }

การตั้งค่าสีพื้นหลังของคอลัมน์

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

CSS:

td.ColColor {background-color: blue; }

HTML:

ข้อดีอย่างหนึ่งที่สำคัญในการควบคุมสีพื้นหลังผ่านสไตล์ชีตคือความสามารถในการเปลี่ยนสีที่คุณเลือกได้ในภายหลัง แทนที่จะต้องผ่านเอกสาร HTML และทำการเปลี่ยนแปลงทุกเซลล์เดียวคุณสามารถทำการเปลี่ยนแปลงเดียวกับตัวเลือกสีใน CSS และจะใช้งานได้ทันทีกับทุกๆกรณีที่ใช้ class = "ColColor" ช่วยประหยัดเวลาจำนวนมากและลดโอกาสของข้อผิดพลาดเช่นการเปลี่ยนแปลงสีของเซลล์ที่ขาดหายไป

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