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

HTML5 Table Colspan and Rowspan

ใน HTML5 การใช้งาน colspan และ rowspan เป็นคุณสมบัติที่ใช้ควบคุมการรวมเซลล์ในตาราง (table) เพื่อสร้างเลย์เอาต์ของข้อมูลที่มีความซับซ้อนมากขึ้น ซึ่งแต่ละคุณสมบัติจะทำงานดังนี้

  • colspan: ใช้เพื่อรวมเซลล์ตามแนวนอน (คอลัมน์) โดยกำหนดจำนวนคอลัมน์ที่ต้องการรวมให้กับเซลล์นั้น
  • rowspan: ใช้เพื่อรวมเซลล์ตามแนวตั้ง (แถว) โดยกำหนดจำนวนแถวที่ต้องการรวมให้กับเซลล์นั้น

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

HTML
<table border="1">
  <tr>
    <th colspan="2">หัวข้อที่รวม 2 คอลัมน์</th>
  </tr>
  <tr>
    <td>ข้อมูล 1</td>
    <td>ข้อมูล 2</td>
  </tr>
</table>

ในตัวอย่างนี้ เซลล์หัวข้อแถวแรกจะครอบคลุมสองคอลัมน์

หัวข้อที่รวม 2 คอลัมน์
ข้อมูล 1 ข้อมูล 2

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

HTML
<table border="1">
  <tr>
    <th>หัวข้อ 1</th>
    <th>หัวข้อ 2</th>
  </tr>
  <tr>
    <td rowspan="2">ข้อมูลที่รวม 2 แถว</td>
    <td>ข้อมูล 2.1</td>
  </tr>
  <tr>
    <td>ข้อมูล 2.2</td>
  </tr>
</table>
หัวข้อ 1 หัวข้อ 2
ข้อมูลที่รวม 2 แถว ข้อมูล 2.1
ข้อมูล 2.2

ในตัวอย่างนี้ เซลล์ที่ครอบคลุมสองแถวในคอลัมน์แรกจะถูกรวมให้เซลล์เดียว

การใช้งาน colspan และ rowspan ร่วมกัน

HTML
<table border="1">
  <tr>
    <th colspan="2" rowspan="2">หัวข้อที่รวม 2 คอลัมน์และ 2 แถว</th>
    <th>หัวข้อ 3</th>
  </tr>
  <tr>
    <td>ข้อมูล 3.1</td>
  </tr>
  <tr>
    <td>ข้อมูล 1</td>
    <td>ข้อมูล 2</td>
    <td>ข้อมูล 3.2</td>
  </tr>
</table>

ในตัวอย่างนี้ เซลล์ในแถวแรกจะครอบคลุมทั้ง 2 คอลัมน์และ 2 แถว และจะอยู่ด้านซ้ายของตาราง

หัวข้อที่รวม 2 คอลัมน์และ 2 แถว หัวข้อ 3
ข้อมูล 3.1
ข้อมูล 1 ข้อมูล 2 ข้อมูล 3.2

สรุป

colspan และ rowspan เป็นเครื่องมือสำคัญใน HTML5 ที่ช่วยในการจัดรูปแบบตารางเพื่อให้สามารถนำเสนอข้อมูลที่ซับซ้อนได้อย่างชัดเจน

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

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