แท็ก HTML <colgroup>

แท็ก <colgroup> ใช้สำหรับ จัดกลุ่มคอลัมน์ (columns) ในตาราง (<table>) หนึ่งกลุ่มสามารถมี 1 หรือหลายคอลัมน์ ใช้กำหนดสไตล์ (style) ให้คอลัมน์ในกลุ่มนั้นๆ ร่วมกันได้

แอตทริบิวต์ของ <colgroup>

• span — จำนวนคอลัมน์ที่กลุ่มนี้ครอบคลุม (ถ้าไม่ระบุ span ให้มี <col> ลูกๆ แทน)

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

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
    padding: 8px;
  }
</style>
</head>
<body>
<h2>ผลการสอบ</h2>
<table>
  <colgroup>
    <col span="3" style="background-color:gray; color:white;">
    <col style="background-color:orange;">
  </colgroup>
  <tr>
    <th>ID</th> <th>ชื่อ</th> <th>เปอร์เซ็นต์</th> <th>อันดับ</th>
  </tr>
  <tr><td>009</td><td>Tom</td><td>98</td><td>1</td></tr>
  <tr><td>011</td><td>Kieron</td><td>97</td><td>2</td></tr>
  <tr><td>039</td><td>Gayle</td><td>95</td><td>3</td></tr>
  <tr><td>017</td><td>Shaun</td><td>92</td><td>4</td></tr>
  <tr><td>009</td><td>Kane</td><td>91</td><td>5</td></tr>
  <tr><td>025</td><td>Steve</td><td>87</td><td>6</td></tr>
  <tr><td>013</td><td>Jack</td><td>85</td><td>7</td></tr>
  <tr><td>023</td><td>Tim</td><td>84</td><td>8</td></tr>
</table>
</body>
</html>

ผลลัพธ์

ตารางแสดงผล: คอลัมน์ 1-3 (ID, ชื่อ, เปอร์เซ็นต์) พื้นหลังสีเทา ตัวอักษรสีขาว | คอลัมน์ 4 (อันดับ) พื้นหลังสีส้ม

คำอธิบายโค้ด

• <colgroup> ครอบคลุมคอลัมน์ทั้งหมด 4 คอลัมน์
• <col span="3" style="background-color:gray; color:white;"> — คอลัมน์แรก 3 คอลัมน์ สีเทา ตัวอักษรขาว
• <col style="background-color:orange;"> — คอลัมน์ที่ 4 สีส้ม

วิธีใช้งาน 2 แบบ:

1. ใช้ span attribute: <colgroup><col span="2" style="..."><col span="2" style="..."></colgroup>
2. ใช้ <col> elements: <colgroup><col style="..."><col style="..."><col style="..."></colgroup> (ยืดหยุ่นกว่า)

หมายเหตุ: <colgroup> ต้องอยู่ใน <table> ก่อน <thead>, <tbody>, <tr> และหลัง <caption> (ถ้ามี)