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

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

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

การใช้งาน <col> ใน HTML5

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

รูปแบบพื้นฐานของการใช้งาน <col>

HTML
<table>
  <colgroup>
    <col style="background-color:lightblue">
    <col style="background-color:lightgreen">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>
  • เราใช้แท็ก <colgroup> เพื่อตั้งค่าให้กลุ่มคอลัมน์
  • <col> สองตัวถูกใช้เพื่อกำหนดสีพื้นหลังให้แต่ละคอลัมน์
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4

การกำหนดจำนวนคอลัมน์ที่ต้องการด้วยแอตทริบิวต์ span

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

HTML
<table>
  <colgroup>
    <col span="2" style="background-color:lightblue">
    <col style="background-color:lightgreen">
  </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>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>
  • <col span="2"> ทำให้คอลัมน์ 1 และ 2 ถูกใช้สไตล์ background-color:lightblue
  • คอลัมน์ที่ 3 จะถูกใช้สไตล์ background-color:lightgreen
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

การใช้ <col> ร่วมกับการกำหนดความกว้างของคอลัมน์

สามารถกำหนดความกว้างของคอลัมน์ในตารางได้โดยใช้ CSS กับ <col>

HTML
<table>
  <colgroup>
    <col style="width:30%">
    <col style="width:70%">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
  • คอลัมน์แรกจะมีความกว้าง 30% ของตารางทั้งหมด
  • คอลัมน์ที่สองจะมีความกว้าง 70%
Header 1 Header 2
Data 1 Data 2

สรุปการใช้งาน <col> ใน HTML5

  1. ใช้ <col> เพื่อกำหนดสไตล์ให้กับคอลัมน์
  2. ใช้ร่วมกับ <colgroup> เพื่อกำหนดสไตล์สำหรับกลุ่มคอลัมน์
  3. สามารถใช้แอตทริบิวต์ span เพื่อกำหนดจำนวนคอลัมน์ที่ครอบคลุม
  4. ปรับสไตล์ของคอลัมน์ เช่น สีพื้นหลัง ความกว้าง หรือเส้นขอบ
Tags
แชร์เรื่องนี้

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