แท็ก colgroup: จัดกลุ่มคอลัมน์ตารางใน HTML

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

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

แอตทริบิวต์	ค่า	คำอธิบาย	สถานะ HTML5
span	จำนวน	จำนวนคอลัมน์ที่ต้องการจัดกลุ่ม	รองรับ
width (บน <col>)	พิกเซล หรือ %	ความกว้างของคอลัมน์	รองรับ
align	left, center, right, justify, char	การจัดตำแหน่งแนวนอน	ไม่รองรับ ใน HTML5
valign	top, middle, bottom, baseline	การจัดตำแหน่งแนวตั้ง	ไม่รองรับ ใน HTML5
char	อักขระ	อักขระสำหรับจัดตำแหน่ง (ใช้กับ align="char")	ไม่รองรับ ใน HTML5
charoff	พิกเซล	ระยะห่างจากอักขระจัดตำแหน่ง	ไม่รองรับ ใน HTML5

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

ตัวอย่างสร้างคอลัมน์ 5 คอลัมน์ ความกว้างต่างกัน:

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง HTML colgroup Tag</title>
</head>
<body>
    <p>ตัวอย่าง colgroup ที่มี 5 คอลัมน์ ความกว้างต่างกัน:</p>
    <table border="1">
        <colgroup>
            <col style="width: 40px">
            <col style="width: 70px">
            <col style="width: 100px">
            <col style="width: 130px">
            <col style="width: 160px">
        </colgroup>
        <tr>
            <td>หนึ่ง</td>
            <td>สอง</td>
            <td>สาม</td>
            <td>สี่</td>
            <td>ห้า</td>
        </tr>
    </table>
</body>
</html>

หมายเหตุ: ใน HTML5 ควรใช้ CSS (style="width: ...) แทนแอตทริบิวต์ width โดยตรง