วิธีรวมแอตทริบิวต์สำหรับคอลัมน์ตารางใน HTML

ใช้แท็ก <col> เพื่อรวมแอตทริบิวต์สำหรับคอลัมน์ตาราง แท็ก HTML <col> อนุญาตให้นักเขียนจัดกลุ่มข้อกำหนดแอตทริบิวต์สำหรับคอลัมน์ตาราง ไม่ได้จัดกลุ่มคอลัมน์ในโครงสร้าง - นั่นคือบทบาทขององค์ประกอบ <colgroup>

แอตทริบิวต์ของ <col> (ส่วนใหญ่ Deprecated)

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

หมายเหตุ: ใน HTML5 รองรับเฉพาะ span แอตทริบิวต์อื่นใช้ CSS แทน

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแท็ก <col>:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML col Tag</title> 
  </head> 
  <body> 
    <p>ตัวอย่างนี้แสดง colgroup ที่มี 3 คอลัมน์ความกว้างต่างกัน:</p> 
    <table border="1"> 
      <colgroup> 
        <col span="2" style="width: 100px;"> 
        <col style="width: 200px;"> 
      </colgroup> 
      <tr> 
        <td>หนึ่ง</td> 
        <td>สอง</td> 
        <td>สาม</td> 
      </tr> 
    </table> 
  </body> 
</html>

แนวทางปฏิบัติ: ใช้ <colgroup> ครอบ <col> และใช้ CSS width, background-color สำหรับจัดรูปแบบคอลัมน์