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

HTML5 การจัดกลุ่มคอลัมน์ภายในตาราง

<colgroup> เป็นแท็กใน HTML5 ที่ใช้ในการจัดกลุ่มคอลัมน์ภายในตาราง <table> โดยการกำหนดรูปแบบหรือคุณสมบัติต่างๆ ให้กับกลุ่มคอลัมน์หลายๆ คอลัมน์พร้อมกัน แทนการระบุคุณสมบัติสำหรับแต่ละคอลัมน์แยกออกจากกันในแต่ละเซลล์

การใช้งาน <colgroup> และ <col>

  • <colgroup> จะถูกใช้ในตารางเพื่อจัดกลุ่มคอลัมน์ที่ต้องการกำหนดคุณสมบัติร่วมกัน
  • <col> ใช้ภายใน <colgroup> เพื่อกำหนดคุณสมบัติของคอลัมน์ เช่น ความกว้าง (width), สีพื้นหลัง (background-color), การจัดตำแหน่ง (align), และอื่นๆ

รูปแบบพื้นฐานของ <colgroup>

การกำหนดคุณสมบัติคอลัมน์ด้วย <colgroup>

HTML
<table border="1">
  <colgroup>
    <col style="background-color: lightgray;">
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>ประเทศ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>ไทย</td>
  </tr>
  <tr>
    <td>จอห์น</td>
    <td>25</td>
    <td>อเมริกา</td>
  </tr>
</table>

ในตัวอย่างนี้ เราใช้ <col> ภายใน <colgroup> เพื่อกำหนดสีพื้นหลังของแต่ละคอลัมน์ โดยแต่ละ <col> จะตรงกับคอลัมน์ในตาราง

ชื่อ อายุ ประเทศ
สมชาย 30 ไทย
จอห์น 25 อเมริกา

การใช้ <colgroup> เพื่อจัดกลุ่มคอลัมน์หลายๆ คอลัมน์ร่วมกัน

HTML
<table border="1">
  <colgroup span="2" style="background-color: lightgray;"></colgroup>
  <colgroup style="background-color: lightgreen;"></colgroup>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>ประเทศ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>ไทย</td>
  </tr>
  <tr>
    <td>จอห์น</td>
    <td>25</td>
    <td>อเมริกา</td>
  </tr>
</table>

ในตัวอย่างนี้ เราใช้ span="2" เพื่อกำหนดว่า <colgroup> แรกจะใช้กับสองคอลัมน์แรก โดยกำหนดให้มีพื้นหลังสี lightgray และคอลัมน์ที่สามจะมีพื้นหลังสี lightgreen

ชื่อ อายุ ประเทศ
สมชาย 30 ไทย
จอห์น 25 อเมริกา

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

HTML
<table border="1">
  <colgroup>
    <col style="width: 150px;">
    <col style="width: 100px;">
    <col style="width: 200px;">
  </colgroup>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>ประเทศ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>ไทย</td>
  </tr>
  <tr>
    <td>จอห์น</td>
    <td>25</td>
    <td>อเมริกา</td>
  </tr>
</table>

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

ชื่อ อายุ ประเทศ
สมชาย 30 ไทย
จอห์น 25 อเมริกา

การใช้ร่วมกับ class เพื่อกำหนดสไตล์หลายๆ คอลัมน์

HTML
<style>
  .highlight {
    background-color: yellow;
  }
  .wide-column {
    width: 300px;
  }
</style>

<table border="1">
  <colgroup>
    <col class="highlight">
    <col class="wide-column">
    <col>
  </colgroup>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>ประเทศ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>ไทย</td>
  </tr>
  <tr>
    <td>จอห์น</td>
    <td>25</td>
    <td>อเมริกา</td>
  </tr>
</table>

ในตัวอย่างนี้ เราใช้ class เพื่อควบคุมสไตล์ของคอลัมน์ โดย highlight กำหนดให้คอลัมน์มีพื้นหลังสีเหลือง และ wide-column กำหนดความกว้างเป็น 300px

ชื่อ อายุ ประเทศ
สมชาย 30 ไทย
จอห์น 25 อเมริกา

ข้อสังเกต

  • <colgroup> มักใช้เพื่อกำหนดคุณสมบัติที่ซ้ำกันหลายๆ คอลัมน์ ซึ่งช่วยให้โค้ดกระชับและง่ายต่อการบำรุงรักษา
  • ควรใช้ <colgroup> ก่อน <thead> หรือ <tbody> เพื่อให้ลำดับการประมวลผลถูกต้อง
Tags
แชร์เรื่องนี้

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