วิธีแสดงสีพื้นหลังขององค์ประกอบใน HTML

ใช้แอตทริบิวต์ bgcolor ใน HTML เพื่อแสดงสีพื้นหลังขององค์ประกอบ ใช้ควบคุมพื้นหลังขององค์ประกอบ HTML โดยเฉพาะ body และตาราง

หมายเหตุ: แอตทริบิวต์นี้ ไม่รองรับใน HTML5

ตัวอย่าง (วิธีเก่า)

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การใช้แอตทริบิวต์ bgcolor ใน HTML:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML Background Colors</title> 
  </head> 
  <body> 
    <!-- รูปแบบ 1 - ใช้ชื่อสี --> 
    <table bgcolor="yellow" width="100%"> 
      <tr> 
        <td>พื้นหลังสีเหลือง</td> 
      </tr> 
    </table> 
    <!-- รูปแบบ 2 - ใช้ค่า hex --> 
    <table bgcolor="#6666FF" width="100%"> 
      <tr> 
        <td>พื้นหลังสีฟ้าอ่อน</td> 
      </tr> 
    </table> 
    <!-- รูปแบบ 3 - ใช้ค่า RGB --> 
    <table bgcolor="rgb(255,0,255)" width="100%"> 
      <tr> 
        <td>พื้นหลังสีม่วง</td> 
      </tr> 
    </table> 
  </body> 
</html>

วิธีที่แนะนำ (ใช้ CSS)

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      .bg-yellow { background-color: yellow; }
      .bg-hex { background-color: #6666FF; }
      .bg-rgb { background-color: rgb(255,0,255); }
    </style> 
  </head> 
  <body> 
    <table class="bg-yellow"><tr><td>สีเหลือง</td></tr></table>
    <table class="bg-hex"><tr><td>สีฟ้าอ่อน</td></tr></table>
    <table class="bg-rgb"><tr><td>สีม่วง</td></tr></table>
  </body> 
</html>

CSS รองรับ: background-color, background-image, background-gradient, opacity และหลายคุณสมบัติอื่นๆ