พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน colgroup Tag

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

รูปแบบการใช้งาน <colgroup>

ใช้งาน <colgroup> เพียงอย่างเดียว

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

HTML
<table border="1">
  <colgroup></colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Header 1 Header 2
Data 1 Data 2

ใช้งาน <colgroup> ร่วมกับ <col>

เราสามารถระบุรายละเอียดเพิ่มเติมให้กับแต่ละคอลัมน์ด้วยแท็ก <col> เพื่อกำหนดคุณสมบัติเฉพาะ เช่น ความกว้างของคอลัมน์

HTML
<table border="1">
  <colgroup>
    <col style="background-color:lightgrey">
    <col style="background-color:lightblue">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

ในตัวอย่างนี้ คอลัมน์แรกจะมีพื้นหลังสีเทาอ่อน และคอลัมน์ที่สองจะมีพื้นหลังสีฟ้าอ่อน

Header 1 Header 2
Data 1 Data 2

กำหนดความกว้างให้คอลัมน์

สามารถกำหนดความกว้างของแต่ละคอลัมน์ได้ด้วยคุณสมบัติ width ของแท็ก <col> โดยความกว้างสามารถระบุเป็นเปอร์เซ็นต์หรือเป็นหน่วยพิกเซล

HTML
<table border="1">
  <colgroup>
    <col style="width:50%">
    <col style="width:50%">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

ในตัวอย่างนี้ คอลัมน์ทั้งสองจะมีความกว้างเท่ากันที่ 50% ของความกว้างตารางทั้งหมด

Header 1 Header 2
Data 1 Data 2

กำหนดจำนวนคอลัมน์ภายใน <colgroup>

แท็ก <colgroup> สามารถระบุจำนวนคอลัมน์ที่จะนำไปใช้ โดยใช้แอตทริบิวต์ span

HTML
<table border="1">
  <colgroup span="2" style="background-color:lightyellow"></colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

ในตัวอย่างนี้ แท็ก <colgroup> กำหนดให้มีการจัดกลุ่มคอลัมน์ 2 คอลัมน์ที่มีพื้นหลังสีเหลืองอ่อน

Header 1 Header 2
Data 1 Data 2

ใช้หลาย <colgroup> ในตารางเดียวกัน

สามารถใช้ <colgroup> หลายๆ กลุ่มในตารางเดียว เพื่อกำหนดการจัดรูปแบบที่แตกต่างกันในแต่ละกลุ่มคอลัมน์

HTML
<table border="1">
  <colgroup>
    <col style="background-color:lightcoral">
  </colgroup>
  <colgroup>
    <col style="background-color:lightgreen">
    <col style="background-color:lightblue">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

ในตัวอย่างนี้ คอลัมน์แรกจะมีพื้นหลังสีชมพูอ่อน (Light Coral) ส่วนคอลัมน์ที่สองและสามจะมีพื้นหลังเป็นสีเขียวอ่อนและสีฟ้าอ่อนตามลำดับ

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

สรุป

แท็ก <colgroup> ใน HTML5 ช่วยให้เราสามารถจัดกลุ่มและควบคุมลักษณะเฉพาะของคอลัมน์ในตารางได้อย่างยืดหยุ่น ไม่ว่าจะเป็นการกำหนดสีพื้นหลัง ความกว้าง หรือจำนวนคอลัมน์ ซึ่งจะช่วยให้การจัดรูปแบบตารางทำได้ง่ายและสะดวกมากยิ่งขึ้น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ