แท็ก HTML <col>: กำหนดคุณสมบัติคอลัมน์ในตาราง

แท็ก <col> ใน HTML คืออะไร?

แท็ก <col> ใช้สำหรับ กำหนดคุณสมบัติของคอลัมน์ (Column) ในตาราง เช่น สีพื้นหลัง ความกว้าง เป็นต้น ต้องอยู่ภายในแท็ก <colgroup> เท่านั้น

แอตทริบิวต์หลัก

• span: จำนวนคอลัมน์ที่ <col> นี้ครอบคลุม (ค่าเริ่มต้น = 1)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 2px solid black; border-collapse: collapse; }
  </style>
</head>
<body>
  <h2>อันดับ ICC</h2>
  <table>
    <colgroup>
      <col span="2" style="background-color: magenta;">
      <col style="background-color: blue; color: white;">
    </colgroup>
    <tr><th>นักกีฬา</th><th>ประเทศ</th><th>อันดับ</th></tr>
    <tr><td>Jack</td><td>WI</td><td>1</td></tr>
    <tr><td>Tom</td><td>AUS</td><td>2</td></tr>
    <tr><td>Virat</td><td>IND</td><td>3</td></tr>
    <tr><td>Steve</td><td>AUS</td><td>4</td></tr>
    <tr><td>Kane</td><td>NZ</td><td>5</td></tr>
    <tr><td>David</td><td>AUS</td><td>6</td></tr>
  </table>
</body>
</html>

ผลลัพธ์

คอลัมน์ที่ 1-2 (นักกีฬา, ประเทศ) จะมีพื้นหลังสีมเจนตา คอลัมน์ที่ 3 (อันดับ) จะมีพื้นหลังสีน้ำเงิน ตัวอักษรสีขาว

จุดสำคัญ

• <col> ต้องอยู่ใน <colgroup> เท่านั้น
• ใช้ span เพื่อครอบคลุมหลายคอลัมน์ (เช่น <col span="3">)
• สไตล์ที่รองรับ: background, width, visibility (บางเบราวเซอร์รองรับน้อย)
• ไม่สามารถจัดการ border หรือ margin ของเซลล์ได้ผ่าน <col>
• ควรใช้ border-collapse: collapse บน table เพื่อผลลัพธ์สวยงาม